代码分割通过拆分脚本按需加载提升性能。使用动态import实现异步加载，结合Webpack等工具自动生成分块，支持路由级分割、第三方库分离和条件加载。React中可用lazy+Suspense实现组件懒加载，并通过webpackPrefetch预加载模块，优化用户体验。配置splitChunks可提取公共代码，增强缓存复用。合理分块能显著减少初始加载时间。
JavaScript 中的代码分割主要是为了优化网页加载性能，把过大的脚本文件拆分成更小的块，按需加载。这样可以减少初始加载时间，提升用户体验。实现方式主要依赖现代构建工具和语言特性。
使用动态 import()
动态 import() 是实现代码分割最常用的方式。它返回一个 Promise，可以在需要时异步加载模块。
例如：
button.addEventListener('click', () => {
import('./module.js')
.then(module => {
module.doSomething();
})
.catch(err => {
console.error('模块加载失败', err);
});
});
上面这段代码中，module.js 只有在用户点击按钮时才会被加载，而不是页面初始化时就加载。
立即学习“Java免费学习笔记（深入）”；
结合 Webpack、Vite 等构建工具
像 Webpack 和 Vite 这类工具原生支持基于动态 import 的代码分割，无需额外配置即可自动生成分块文件。
常见场景包括：
- 路由级分割：在单页应用中，每个路由对应的组件单独打包
- 第三方库分离：将 react、lodash 等大库单独打包，利于缓存复用
- 条件加载：根据设备或用户权限加载不同功能模块
以 React + Webpack 为例：
Node.js 可靠编程
下载
Node.js 可靠编程技能。避免事件循环阻塞、异步陷阱、ESM 兼容问题和内存泄漏。触发词：Node.js 开发、async/await、流处理、性能优化、安全编码。
const About = lazy(() => import('./About'));
<p>function App() {
return (
<Routes>
<Route path="/about" element={<Suspense fallback="加载中..."><About /></Suspense>} />
</Routes>
);
}</p>这里 lazy 配合动态 import 实现了路由组件的懒加载，Webpack 会自动为其创建独立的 chunk。
预加载与预获取提示
为了进一步优化体验，可以使用 webpackPrefetch 或 webpackPreload 告诉浏览器提前下载某些模块。
语法示例：
import(/* webpackPrefetch: true */ './modal.js');
这会在空闲时加载 modal.js，适合后续可能用到的功能。生成的 script 标签会包含 rel="prefetch"，由浏览器决定何时下载。
手动分割公共代码
如果多个页面共用相同依赖，可通过配置提取公共模块。
以 Webpack 为例，在配置中设置：
optimization: {
splitChunks: {
chunks: 'all',
cacheGroups: {
vendor: {
test: /[\/]node_modules[\/]/,
name: 'vendors',
chunks: 'all',
}
}
}
}
这样所有来自 node_modules 的模块会被打包进 vendors.chunk.js，便于长期缓存。
基本上就这些。代码分割不复杂但容易忽略，合理使用能显著提升首屏速度。关键是按需加载、分块清晰、结合构建工具发挥最大效果。
