import() 函数支持交互触发的按需加载，如点击事件中动态导入模块以减小首屏体积；其返回 Promise 可处理 loading、成功、失败状态；React/Vue 等框架封装为 lazy 或 defineAsyncComponent；构建工具自动分片，无需复杂配置。
可以通过 import() 函数在用户点击、滚动、输入等交互发生时，动态加载模块，实现真正的按需分片（code splitting）——无需构建时配置复杂规则，运行时决定加载什么。
交互触发加载：绑定事件 + 动态 import
把 import() 放在事件回调中，比如按钮点击后加载一个图表组件：
- 避免页面初始化时加载非必要代码，减少首屏体积
- 确保模块只在真正需要时才发起网络请求和执行初始化
- 示例：button.addEventListener('click', () => import('./Chart.js').then(module => module.render()))
配合 Promise 处理加载状态与错误
import() 返回 Promise，可链式处理加载中、成功、失败三种状态：
- 显示 loading 提示（如 skeleton 或 spinner）
- 捕获网络失败或模块解析错误，降级展示提示信息
- 示例：import('./Editor.js').then(m => m.init()).catch(() => alert('编辑器加载失败'))
与 React/Vue 等框架结合：懒加载组件
主流框架已封装 import() 为声明式语法，但底层仍是动态导入：
- React：const Modal = React.lazy(() => import('./Modal'))，配合 Suspense
- Vue：defineAsyncComponent(() => import('./Dashboard.vue'))
- 关键点：这些写法仍依赖用户交互（如路由跳转、条件渲染）来触发实际加载
构建工具自动分片：无需手动配置 chunk 名称
Webpack / Vite / esbuild 在检测到 import() 时会自动创建独立 chunk：
- 每个
import('./xxx')默认生成一个单独的 JS 文件（如 xxx.123abc.js） - 支持魔法注释控制 chunk 名称或预取策略，例如：import(/* webpackChunkName: "pdf" */ './PdfViewer.js')
- 不依赖
SplitChunksPlugin配置，更轻量、更可控
