JavaScript代码分割是将大JS文件拆分为按需加载的小块以提升性能。核心是动态import()语法，支持路由、组件、工具库等多场景分割，并由Webpack/Vite等工具自动处理chunk分离。
JavaScript 代码分割（Code Splitting）是指将一个大体积的 JavaScript 文件拆分成多个更小、按需加载的块（chunks），从而减少初始加载时间，提升页面性能。动态加载模块是实现代码分割的核心手段，它让浏览器只在真正需要时才获取并执行某段代码，而不是一开始就全部加载。
为什么需要代码分割？
单页应用（SPA）随着功能增加，打包后的 JS 文件可能迅速膨胀到几 MB。用户首次访问时若必须下载全部代码，会导致白屏时间长、交互延迟。代码分割能：
- 缩短首屏加载时间（关键资源更少）
- 降低内存占用（未用模块不执行）
- 支持按路由、功能或组件粒度加载
- 便于长期缓存管理（例如 vendor chunk 不常变）
如何用 import() 动态加载模块？
import() 是 ES2020 标准引入的函数式动态导入语法，返回一个 Promise，可在任何地方调用（包括条件语句、循环、事件回调中）。
示例：点击按钮时加载一个图表组件
立即学习“Java免费学习笔记（深入）”；
document.getElementById('loadChart').addEventListener('click', async () => {
const { default: Chart } = await import('./chart.js');
new Chart(document.getElementById('chart-root'));
});
注意：
– 不能用 import() 加载变量名（即不能写 import(myModulePath)，路径必须是静态可分析的字符串或模板字面量中的静态部分）；
– Webpack/Vite 等构建工具会自动识别 import() 并生成独立 chunk；
– 支持命名导出解构，但需确保模块导出方式匹配（如 import('./utils.js').then(({ helper }) => {...})）。
常见代码分割场景与写法
1. 路由级分割（React/Vue 最常用）
React Router v6.4+ 推荐配合 React.lazy 和 Suspense：
const Home = React.lazy(() => import('./pages/Home'));
const About = React.lazy(() => import('./pages/About'));
function App() {
return (
);
}
2. 组件级分割（按需加载重型 UI）
比如模态框、富文本编辑器、地图等非首屏必需组件：
function EditorButton() {
const [Editor, setEditor] = useState(null);
const loadEditor = async () => {
const module = await import('draft-js');
setEditor(() => module.Editor);
};
return (
{Editor &&
3. 工具库按需加载（避免全量引入）
例如只用 Lodash 的 debounce：
// ❌ 不推荐：加载整个 lodash import _ from 'lodash';// ✅ 推荐：只加载需要的方法 import debounce from 'lodash/debounce'; // 或动态加载（适合不常触发的场景） const { throttle } = await import('lodash/throttle');
构建工具如何配合？
Webpack、Vite、Rollup 等现代打包器原生支持 import() 并自动做 chunk 分离。你无需额外配置即可启用基本代码分割。进阶控制可通过：
-
Webpack 的 magic comments：如
/* webpackChunkName: "charts" */指定 chunk 名称，便于调试和缓存 -
Vite 的预加载提示：使用
import.meta.webpackIgnore或import.meta.glob批量处理模块 - SplitChunksPlugin（Webpack）：自动提取公共依赖（如多个页面都用 axios，就单独打成 vendor chunk）
基本上就这些。代码分割不是银弹，但合理使用 import() + 构建工具，能让 JS 加载更聪明、更轻快。
