import() 是动态导入函数，返回 Promise，支持运行时按需加载模块，实现代码分割与懒加载；构建工具自动将其打包为独立 chunk，适用于路由、弹窗等场景，并需配合加载态与错误处理提升用户体验。
JavaScript 中的 import() 是一个动态导入函数，它返回一个 Promise，允许你在运行时按需加载模块，从而实现代码分割和懒加载。相比静态 import 语句（必须在模块顶层、编译时确定），import() 更灵活，是现代前端工程中优化首屏加载性能的关键手段。
动态导入触发代码分割
Webpack、Vite、Rollup 等构建工具会自动识别 import() 调用，并将目标模块及其依赖单独打包成一个 chunk 文件（如 chunk-abc123.js）。这个过程无需额外配置，开箱即用。
- 静态
import：所有代码在初始化时加载，适合核心逻辑或共享工具 - 动态
import()：只在真正需要时才发起请求，适合路由组件、弹窗、图表库、国际化语言包等场景 - 示例：
const module = await import('./utils/chart.js');—— 此时才会下载并执行chart.js及其依赖
结合条件与交互实现按需加载
你可以把 import() 放在事件回调、条件分支甚至异步逻辑中，精准控制加载时机。
- 按钮点击后加载 heavy 组件：
button.addEventListener('click', () => import('./HeavyComponent.vue').then(m => m.default())) - 根据用户权限加载不同模块：
if (user.role === 'admin') { const adminTools = await import('./admin/Tools.js'); } - 配合
try/catch处理加载失败：try { const mod = await import('./optional-feature.js'); } catch (err) { console.warn('模块加载失败', err); }
与路由和框架的集成实践
主流前端框架都内置了对动态导入的支持，让代码分割更自然。
立即学习“Java免费学习笔记（深入）”；
- Vue Router：
component: () => import('./views/Home.vue')—— 路由组件自动变成异步组件 - React Router（v6.4+）：
lazy(() => import('./Dashboard'))配合Suspense实现加载状态管理 - Next.js / Nuxt：页面级
import()或dynamic()已深度集成，支持服务端预取与客户端懒加载策略
注意加载状态与用户体验
import() 是异步操作，加载过程有延迟。不能假定模块“立刻可用”，需设计加载态、错误态和占位内容。
- 避免白屏：配合骨架屏、loading 指示器或默认轻量组件
- 预加载提示：可调用
import('./module.js').then(...)提前触发网络请求（不立即执行），再在需要时await - 缓存友好：生成的 chunk 文件通常带 contenthash，浏览器可长期缓存，更新后自动获取新版本
