什么是javascript代码分割_如何提升应用加载速度？_技术教程

JavaScript代码分割是打包工具按需拆分代码为多个chunk并在运行时动态加载，解决首屏加载慢问题；关键在import()语法触发异步加载，需避免循环导入、过度分割及路径非字面量等误用。

代码分割不是“把 JS 文件手动切成几块”，而是让打包工具（如 Webpack、Vite）在构建时，把应用代码按需拆成多个 chunk，再通过动态导入等机制，在运行时按需加载。它解决的是「首屏加载全部 JS」导致白屏久、TTFB 高、内存占用大的问题。

关键判断标准：是否在运行时才决定加载哪部分代码。静态 import 全部走编译期合并，不算分割；只有 import() 返回 Promise 的写法，才触发真正的分割。

这是最常见也最有效的落地方式。不改架构、不加插件，仅靠语法就能生效。

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 不识别为分割点
路径必须是字符串字面量（不能是变量拼接），否则打包工具无法静态分析依赖

分割过度反而增加 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" 提前拉取了