代码分割是将javascript文件拆分为多个小块以按需加载的技术。通过动态导入import()实现懒加载，减少初始负载，提升页面响应速度。构建工具如webpack、vite等支持自动分块。常见应用于路由级懒加载，如react中结合lazy与suspense实现组件延迟加载并显示占位内容。还可使用webpackpreload或webpackprefetch优化后续资源加载时机。合理控制拆分粒度，平衡请求量与性能收益，是提升用户体验的关键。
在现代前端开发中，JavaScript 代码分割是提升页面加载性能的重要手段。随着应用体积不断增大，一次性加载全部脚本会导致首屏延迟、用户体验下降。通过动态导入和懒加载，我们可以按需加载模块，减少初始负载，加快页面响应速度。
什么是代码分割？
代码分割（Code Splitting）是指将打包后的 JavaScript 文件拆分成多个小块（chunk），让浏览器只在需要时加载对应的代码块。这不同于传统的打包方式——把所有代码合并成一个大文件。
Webpack、Vite、Rollup 等构建工具都原生支持代码分割。开发者无需手动拆分文件，只需使用特定语法引导构建系统生成分块。
动态导入：import() 的使用
动态导入是实现代码分割的核心机制。它使用 import(path) 函数形式，在运行时异步加载模块，返回一个 Promise。
立即学习“Java免费学习笔记（深入）”；
示例：按需加载工具函数
button.addEventListener('click', () => {
import('./utils/largeModule.js')
.then(module => {
module.default();
})
.catch(err => {
console.error('加载失败:', err);
});
});
当用户点击按钮时，largeModule.js 才会发起网络请求并执行。这种方式适用于功能级模块的延迟加载，比如图表渲染、模态框组件或第三方库。
结合路由实现懒加载
在单页应用（SPA）中，最常见的代码分割场景是路由级别的懒加载。每个页面组件独立成块，访问对应路径时才加载。
以 React + React Router 为例：
const Home = lazy(() => import('./pages/Home'));
const About = lazy(() => import('./pages/About'));
<p>function App() {
return (
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
);
}
这里 React.lazy 接收一个动态导入函数，内部自动处理 Promise 状态。配合 Suspense 可设置加载占位内容：
<Suspense fallback="加载中...">
<Routes>
<Route path="/about" element={<About />} />
</Routes>
</Suspense>
预加载与预连接优化体验
虽然懒加载减少了初始加载量，但可能带来交互延迟。可通过 Webpack 的魔法注释提前提示浏览器预加载资源。
import(/* webpackPreload: true */ './heavyComponent.js')
该指令会在空闲时预先加载指定模块，提升后续访问流畅度。类似地，webpackPrefetch: true 实现更保守的预取策略（优先级低于 preload）。
注意：合理使用预加载，避免浪费带宽。
基本上就这些。动态导入让代码分割变得简单自然，懒加载显著改善性能表现。关键是根据业务场景选择拆分粒度——太细会增加请求数，太粗则效果有限。平衡才是关键。
