入口点分割通过多入口生成独立chunk，适合模块分离但易重复打包；2. 动态导入实现按需加载，结合框架懒加载优化路由级分割；3. SplitChunksPlugin提取公共代码，减少冗余并提升缓存利用率；4. 预获取与预加载调度资源，prefetch用于未来模块，preload加速关键依赖。合理组合策略可平衡性能与维护成本。
在现代前端开发中，随着应用体积不断增长，一次性加载所有JavaScript代码会导致页面启动性能下降。Webpack 提供了多种代码分割（Code Splitting）策略，帮助开发者将代码拆分成更小的块，按需加载，从而提升首屏加载速度和用户体验。合理使用这些策略，能有效优化大型项目的性能表现。
1. 入口点分割（Entry Points）
最基础的代码分割方式是通过配置多个入口文件。Webpack 会为每个入口生成独立的 chunk。
示例配置：module.exports = {
entry: {
main: './src/index.js',
admin: './src/admin.js'
},
output: {
filename: '[name].bundle.js'
}
};
这种方式适合功能模块相对独立的项目，比如前台与后台完全分离。但缺点是容易产生重复代码，不同入口间共享的模块可能被重复打包。
2. 动态导入（Dynamic Imports）
利用 import() 语法实现按需加载，是最常用也最灵活的分割方式。路由级或组件级的懒加载通常采用此方法。
示例用法：// 路由中懒加载组件
const HomePage = () => import('./HomePage');
const AboutPage = () => import('./AboutPage');
<p>// Webpack 会为每个 import() 创建单独的 chunk</p>结合 React.lazy 或 Vue 的异步组件，可实现路由级别的代码分割。用户只有在访问特定页面时，对应代码才会被请求加载。
3. SplitChunksPlugin：提取公共代码
Webpack 内置的 SplitChunksPlugin 可自动识别并提取多个 chunk 之间的公共模块，避免重复打包。
常见配置建议：- 将 node_modules 中的依赖打包进 vendor chunk
- 将高频复用的工具库或 UI 组件抽离成独立模块
- 设置最小公共引用次数（minChunks）来控制提取条件
optimization: {
splitChunks: {
chunks: 'all',
cacheGroups: {
vendor: {
test: /[\/]node_modules[\/]/,
name: 'vendors',
chunks: 'all',
priority: 10
}
}
}
}
这样可以显著减少主包体积，并利用浏览器缓存机制提升二次加载速度。
4. 预获取与预加载（Prefetch/Preload）
通过魔法注释控制动态导入的加载行为，进一步优化资源调度。
- /* webpackPrefetch: true */：空闲时预加载，适合未来可能用到的模块
- /* webpackPreload: true */：与主资源并行加载，适合关键路径上的依赖
const Chart = () => import( /* webpackChunkName: "chart" */ /* webpackPrefetch: true */ './components/Chart' );
合理使用 prefetch 可提升后续页面的响应速度，而 preload 适用于当前页面即将用到的重要资源。
基本上就这些。根据项目实际需求组合使用上述策略，才能在加载性能和维护成本之间取得平衡。代码分割不是越细越好，关键在于识别用户行为模式，把资源送达得恰到好处。
