动态导入（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 名称或预加载）
结合路由/交互实现真实场景的按需加载
常见落地方式包括路由级和组件级懒加载：
立即学习“Java免费学习笔记（深入）”；
-
React 路由（v6.4+）：
const Home = React.lazy(() => import('./pages/Home'))，配合<Suspense>占位 -
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：<code>import(/* rollup-plugin-visualizer */ './login.js')，或靠文件路径推导
