代码分割是构建工具配合 import() 语法实现的运行时分包策略，将大 bundle 拆为多个小 chunk 按需加载；必须用字符串字面量路径调用 import()，且不能在顶层作用域使用。
什么是 JavaScript 的代码分割
代码分割不是语法特性，而是构建工具（如 Webpack、Vite、Rollup）配合 import() 语法实现的运行时分包策略。它让一个大 bundle 拆成多个小 chun
关键判断：如果你用的是现代打包工具 + ES 模块，代码分割默认就支持，但必须主动用动态 import() 触发，静态 import 仍会全量打包进主 chunk。
如何用 import() 动态导入模块
import() 是返回 Promise 的函数，只能在运行时调用，不能解构或默认导入。它触发 Webpack/Vite 自动创建新 chunk，并按需加载。
- 写法必须是
import('./module.js')，路径必须是字符串字面量（不能是变量拼接，否则无法静态分析） - 支持
await或.then()获取导出对象：const { renderChart } = await import('./charts.js'); - 不能出现在顶层作用域（会报 SyntaxError），必须包裹在函数、事件回调或条件分支中
- Vite 中支持
import.meta.glob()批量导入，Webpack 需配require.context或插件
常见错误：为什么 import() 没触发分割
动态导入写了，但构建后没生成新 chunk？大概率是以下原因：
- 路径用了变量：
import(`./${name}.js`)→ 构建工具无法确定模块列表，直接忽略分割 - 用了 Babel 转译但未启用
@babel/plugin-syntax-dynamic-import（旧项目常见） - Webpack 配置中
optimization.splitChunks被设为chunks: 'all'以外的值，且未显式匹配 dynamic import chunk - 模块本身被其他静态
import引用过 → 构建工具会把它提前合并进主包，动态调用只是“命中缓存”
实际优化建议与取舍点
不是所有地方都适合加 import()。重点放在：路由级组件、条件性功能（如编辑器插件）、大体积第三方库（如 monaco-editor）、用户交互后才需的逻辑。
- 路由懒加载推荐写法：
const Home = () => import('./views/Home.vue');（Vue）或const About = React.lazy(() => import('./About'));（React） - 避免在循环里反复
import()同一模块，浏览器会复用已加载的 module，但 Promise 会重复创建 - 注意加载状态：动态导入是异步的，UI 上应有 loading 提示，否则白屏或报错
- Chrome DevTools 的 Network → JS tab 可验证 chunk 是否独立加载；Lighthouse 能量化首屏 JS 体积下降效果
最易被忽略的一点：动态导入的模块如果引用了大量共享依赖（比如都用了 lodash），这些依赖可能被重复打进多个 chunk —— 这时候得靠 splitChunks.cacheGroups 或 Vite 的 build.rollupOptions.output.manualChunks 手动归并。
