JavaScript代码分割是打包工具按需拆分代码为多个chunk并在运行时动态加载，解决首屏加载慢问题；关键在import()语法触发异步加载，需避免循环导入、过度分割及路径非字面量等误用。
什么是 JavaScript 代码分割？
代码分割不是“把 JS 文件手动切成几块”，而是让打包工具（如 Webpack、Vite）在构建时，把应用代码按需拆成多个 chunk，再通过动态导入等机制，在运行时按需加载。它解决的是「首屏加载全部 JS」导致白屏久、TTFB 高、内存占用大的问题。
关键判断标准：是否在运行时才决定加载哪部分代码。静态 import 全部走编译期合并，不算分割；只有 import() 返回 Promise 的写法，才触发真正的分割。
用 import() 实现路由级分割（React/Vue 场景）
这是最常见也最有效的落地方式。不改架构、不加插件，仅靠语法就能生效。
- React Router v6 推荐写法：
const Home = () => import('./pages/Home').then(m => m.default)，配合Suspense和lazy - Vue Router 写法：
component: () => import('./views/Dashboard.vue')，Vue CLI 或 Vite 均原生支持 - 注意：不能写成
import('./pages/Home.js')后直接解构，必须保留import()调用形式，否则 Webpack/Vite 不识别为分割点 - 路径必须是字符串字面量（不能是变量拼接），否则打包工具无法静态分析依赖
避免 import() 误用导致 chunk 爆炸
分割过度反而增加 HTTP 请求、破坏缓存、拖慢整体加载。重点防三个坑：
立即学习“Java免费学习笔记（深入）”；
- 不要在循环里写
import(`./modules/${name}.js`)—— Webpack 会为每个可能的name打一个 chunk，体积和数量都失控 - 不要给每个按钮点击都配一个
import('./utils/xxx.js')—— 工具函数应归入公共vendor或按功能聚合成逻辑 chunk - 慎用
import.meta.webpackIgnore（Webpack）或/* @vite-ignore */—— 它会让工具跳过分析，可能把本该共用的模块重复打进多个 chunk - 检查生成的
dist/目录下 chunk 数量：超过 15–20 个且无明显业务边界，大概率切碎了
如何验证代码分割是否生效？
别只看打包报告数字，要结合真实网络行为判断：
- 打开 Chrome DevTools → Network 标签页 → 刷新页面 → 筛选
JS类型 → 观察是否有非main.js/index.js的 chunk 在「交互后」才发起请求（比如点击菜单后才加载settings.abc123.js） - 在 Sources 面板里展开
webpack://或vite:，看模块是否按需出现在子文件夹中，而非全塞进src_主 chunk - 运行
npx webpack-bundle-analyzer dist/stats.json（需先配置stats: 'verbose'），重点关注「Async chunks」列表和它们的引入路径 - 如果所有 chunk 都在
DOMContentLoaded前就已下载完，说明分割没起作用——很可能是被PreloadPlugin或link rel="modulepreload"提前拉取了
真正有效的分割，会在 Performance 面板看到 JS 下载时间明显错峰，且首屏可交互时间（TTI）下降 20% 以上。但要注意：gzip/Brotli 压缩率、CDN 缓存命中率、HTTP/2 多路复用这些底层因素，有时比分割本身影响更大。
