代码分割与懒加载通过拆分 bundle 并按需加载，降低首屏体积。1. 使用 splitchunksplugin 提取公共模块；2. 路由级懒加载实现 spa 按需加载；3. 条件性加载低频功能模块；4. 结合预加载与预获取优化体验，合理控制拆分粒度以提升性能。
在现代前端开发中，JavaScript 打包优化直接影响应用加载速度和用户体验。代码分割（Code Spliting）与懒加载（Lazy Loading）是 Webpack、Vite 等构建工具支持的核心优化手段，能有效减少首屏加载体积，实现按需加载。
理解代码分割：将大包拆小
代码分割的核心思想是将单个庞大的 bundle 拆分为多个较小的 chunk，让浏览器只加载当前需要的代码。
常见实现方式包括：
- 入口点分割：通过配置多个 entry，适用于多页面应用（MPA）
- 动态导入（import()）：使用 import('module') 实现运行时按需加载
- SplitChunksPlugin：自动提取公共模块（如 node_modules）生成 vendor chunk
例如，将第三方库单独打包可提升缓存利用率：
立即学习“Java免费学习笔记（深入）”；
// webpack.config.js
optimization: {
splitChunks: {
chunks: 'all',
cacheGroups: {
vendor: {
test: /[\/]node_modules[\/]/,
name: 'vendors',
chunks: 'all'
}
}
}
}
路由级懒加载：提升首屏性能
在 SPA 中，将不同路由组件拆分为独立 chunk 是最有效的优化策略之一。
以 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={<Suspense fallback="Loading..."><About /></Suspense>} />
</Routes>
);
}</p>Vue 中可通过异步组件实现类似效果：
const routes = [
{ path: '/home', component: () => import('./views/Home.vue') }
]
条件性懒加载非路由模块
除路由外，一些功能模块也可延迟加载，比如模态框、图表组件或富文本编辑器。
示例：点击按钮才加载 PDF 渲染库
async function loadPDF() {
const { pdfjsLib } = await import('pdfjs-dist');
// 初始化并渲染 PDF
}
这种策略避免用户未使用功能时下载无用资源，尤其适合低频功能。
预加载与预获取提示优化体验
为平衡懒加载带来的延迟，可用 webpackPrefetch 或 webpackPreload 提示浏览器提前加载可能需要的模块。
语法示例：
// 预取（空闲时加载） import(/* webpackPrefetch: true */ './components/ChatWidget'); <p>// 预加载（高优先级） import(/<em> webpackPreload: true </em>/ './utils/routerHelper');</p>
webpackPrefetch 会在主资源加载完成后利用空闲时间下载，适合未来可能访问的内容。
基本上就这些。合理使用代码分割与懒加载，配合构建工具的分析功能（如 webpack-bundle-analyzer），能显著降低首包体积，提升响应速度。关键是根据业务场景选择拆分粒度，避免过度拆分导致请求过多。
