按路由分割结合公共依赖提取和预加载优化代码性能。使用动态import拆分路由组件，splitchunksplugin抽取公共库，魔法注释实现预加载与预取，高频组件内联、低频功能独立分割，并通过分析工具持续优化，平衡拆分粒度。
在现代 JavaScript 工程化开发中，代码分割（Code Spliting）是提升应用加载性能的关键手段。随着项目规模增长，打包后的单个 bundle 文件可能变得非常庞大，导致首屏加载缓慢、资源浪费。通过合理的代码分割策略，可以将代码拆分为更小的块，按需加载，显著优化用户体验。
按路由进行代码分割
对于使用前端路由框架（如 React Router、Vue Router）的单页应用，最常见的分割方式是按页面或路由拆分。
以 React + Webpack 为例：
- 利用动态 import() 语法配合 Suspense 实现组件懒加载
- 每个路由对应的组件被打包成独立 chunk
- 用户访问某个页面时才加载对应代码，减少首页加载体积
const Home = React.lazy(() => import('./routes/Home'));
const About = React.lazy(() => import('./routes/About'));
<p>function App() {
return (
<Suspense fallback="Loading...">
<Switch>
<Route path="/home" component={Home} />
<Route path="/about" component={About} />
</Switch>
</Suspense>
);
}
提取公共依赖
多个入口或异步模块之间往往共享第三方库（如 lodash、moment、react 等），如果不做处理，这些依赖可能被重复打包进不同 chunk。
立即学习“Java免费学习笔记（深入）”；
通过配置 Webpack 的 SplitChunksPlugin 可解决该问题：
webpack.config.js 配置片段：
optimization: {
splitChunks: {
chunks: 'all',
cacheGroups: {
vendor: {
test: /[\/]node_modules[\/]/,
name: 'vendors',
chunks: 'all',
}
}
}
}
动态导入与预加载结合
除了基本的按需加载，还可以通过 Webpack 提供的魔法注释优化加载时机。
- /* webpackChunkName */：为生成的 chunk 命名，便于维护
- /* webpackPreload */：预加载资源，在空闲时提前下载
- /* webpackPrefetch */：预测性预取，适用于后续可能用到的模块
import( /* webpackChunkName: "login-modal" */ /* webpackPreload: true */ './components/LoginModal' )
注意区分 preload 和 prefetch 的浏览器优先级，避免影响关键资源加载。
基于使用频率的分割策略
不是所有代码都适合延迟加载。应根据模块的使用场景决定是否分割：
- 首屏强相关组件保持内联或合并至主包
- 工具函数库可按功能拆分，配合 tree-shaking 清理无用代码
- 大型但低频功能（如报表导出、富文本编辑器）建议独立分割
结合 Bundle 分析工具（如 webpack-bundle-analyzer）定期审查输出结构，发现不合理打包情况及时调整。
基本上就这些。合理运用多种代码分割方式，配合缓存策略和 CDN，能让应用加载更高效。关键是根据业务特点权衡拆分粒度，避免过度工程化。
