代码分割和懒加载通过拆分代码并按需加载，减少初始加载时间。使用动态import实现模块懒加载，React中结合lazy与Suspense实现路由级分割，配合预加载和公共代码分离优化性能体验。
代码分割和懒加载是提升 JavaScript 应用性能的关键手段，尤其在大型单页应用中效果显著。通过将代码拆分成更小的块，并按需加载，可以减少初始加载时间，加快页面渲染速度。
什么是代码分割（Code Splitting）
代码分割是指将原本打包成一个大 bundle 的 JavaScript 文件拆分为多个较小的文件。这些文件可以在需要时动态加载，而不是在页面启动时全部加载。
现代构建工具如 Webpack、Vite 和 Rollup 都原生支持代码分割。最常见的实现方式是使用 动态 import() 语法：
// 按需加载某个模块
button.addEventListener('click', () => {
import('./module/lazyModule').then(module => {
module.default();
});
});
Webpack 会自动将 lazyModule.js 打包为独立的 chunk，在用户触发点击事件时才加载。
立即学习“Java免费学习笔记（深入）”；
路由级别的懒加载
在基于路由的应用中（如 React 或 Vue），可以对不同页面进行懒加载，避免一次性加载所有页面资源。
以 React 为例，结合 React.lazy 和 Suspense 可实现组件级懒加载：
const Home = lazy(() => import('./pages/Home'));
const About = lazy(() => import('./pages/About'));
<p>function App() {
return (
<Suspense fallback="加载中...">
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
</Suspense>
);
}</p>这样，只有当用户访问对应路由时，相关组件才会被加载。
预加载与预连接优化体验
懒加载虽然节省了初始资源，但可能带来加载延迟。可通过 webpackPreload 或 webpackPrefetch 提前加载关键资源。
使用注释语法控制加载时机：
// 预加载：资源优先级高，立即下载 import(/* webpackPreload: true */ './criticalModule'); <p>// 预获取：空闲时加载，适合非关键模块 import(/<em> webpackPrefetch: true </em>/ './futureModule');</p>
预加载适用于即将使用的功能模块，而预获取更适合后续导航可能用到的代码。
分割第三方库与公共代码
将第三方依赖（如 lodash、moment 等）单独打包，可利用浏览器缓存机制，避免因业务代码更新导致 vendor 重新下载。
在 Webpack 配置中使用 SplitChunksPlugin：
optimization: {
splitChunks: {
chunks: 'all',
cacheGroups: {
vendor: {
test: /[\/]node_modules[\/]/,
name: 'vendors',
chunks: 'all',
},
},
},
}
这会把 node_modules 中的模块提取到独立的 vendors.chunk.js 中，提升缓存利用率。
基本上就这些。合理运用代码分割和懒加载，配合构建工具的能力，能显著降低首屏加载时间，提升用户体验。关键是根据业务场景决定拆分粒度，避免过度分割带来的请求开销。
