动态导入（import()）是实现代码分割与按需加载的核心机制，它在运行时加载模块以减小初始包体积；语法为返回 Promise 的函数调用，路径需静态可分析；构建工具如 Webpack、Vite 自动据此生成异步 chunk；常用于路由/组件懒加载、按钮触发加载等场景，并支持预加载、错误处理和命名 chunk。

JavaScript 动态导入（import()）是实现代码分割与按需加载的核心机制，它让模块在运行时才被加载，而不是打包时就全部引入，从而显著减小初始包体积、提升首屏加载速度。

动态导入语法：用函数调用代替静态语句

与 import { foo } from './module.js' 这类静态导入不同，动态导入使用返回 Promise 的 import() 函数：

• 写法： const module = await import('./utils.js')（ES 模块中支持顶层 await）
• 或配合 then：import('./chart.js').then(({ render }) => render())
• 路径可以是字符串变量，支持拼接和条件判断，例如：import(`./locales/${lang}.js`)
• 注意：不能用表达式或变量名直接替代整个路径（如 import(myPath) 不被 webpack/vite 静态分析识别），需确保路径可被构建工具“看到”以生成对应 chunk

构建工具如何配合生成分割代码

动态 import() 本身是语言特性，但真正实现物理拆包和按需加载，依赖构建工具（如 Webpack、Vite、Rollup）的代码分割能力：

• Webpack 会自动把每个 import('./xxx') 调用打包成独立的 chunk 文件（如 2.a1b2c3.js），并在运行时通过 JSONP 或 script 标签加载
• Vite 在开发时按需编译并热更新模块；生产构建时默认启用 rollup 的 dynamic import 分割，输出带哈希的异步 chunk
• 关键点：只要用了 import()，且路径是静态可分析的字符串，工具就会自动分割 —— 无需额外配置（除非要自定义 chunk 名称或预加载）

结合路由/交互实现真实场景的按需加载

常见落地方式包括路由级和组件级懒加载：

• React 路由（v6.4+）：const Home = React.lazy(() => import('./pages/Home'))，配合 占位
• Vue Router：component: () => import('./views/Profile.vue')，路由切换时才加载对应组件
• 按钮触发加载：button.addEventListener('click', () => import('./heavy-editor.js').then(m => m.init()))
• 可搭配 import.meta.webpackIgnore（Webpack）或 /* @vite-ignore */（Vite）跳过某些动态路径的打包分析（慎用）

进阶技巧：预加载、错误处理与命名 chunk

提升体验和可维护性的小细节：

• 预加载：在资源空闲时提前加载，比如鼠标悬停菜单项时调用 import('./admin.js')，避免点击后等待
• 错误捕获：try { const mod = await import('./feature.js'); } catch (err) { console.error('加载失败', err); }
• 命名 chunk（Webpack）：import(/* webpackChunkName: "feature-login" */ './login.js')，生成更易识别的文件名
• Vite 命名 chunk：import(/* @vite-ignore */ './login.js') // 注释不生效；改用 rollup 的 magic comment：import(/* rollup-plugin-visualizer */ './login.js')，或靠文件路径推导