代码分割通过将大JS文件拆分为小块并按需加载，减少首屏加载时间。它利用构建工具如Webpack或Vite，结合路由实现懒加载，例如React的React.lazy与Suspense、Vue的动态导入。基于路由时，每个页面组件独立打包，访问时才加载；按功能可分离重型模块如地图或编辑器；第三方库可用splitChunks提取公共依赖。还可通过preload预加载关键资源，prefetch在空闲时预取后续模块，提升性能。关键是区分优先级，合理配置以优化加载时机。
代码分割是JavaScript性能优化中的关键策略之一。它的核心思想是将一个大的JS文件拆分成多个小块，按需加载，而不是一次性加载全部代码。这样可以显著减少首屏加载时间，提升用户体验。
什么是代码分割
在构建大型Web应用时，所有JavaScript代码通常会被打包成一两个bundle文件。随着项目增长，这些文件体积迅速膨胀，导致页面加载缓慢。代码分割通过工具（如Webpack、Vite等）将代码拆分为多个chunk，实现按需加载或并行加载。
例如：你有一个电商网站，用户访问首页时并不需要“订单管理”模块的代码。通过代码分割，这部分代码可以独立打包，在用户进入对应页面时才加载。
基于路由的代码分割
最常见的代码分割方式是结合前端路由使用。每个路由对应的组件单独打包，访问该路由时动态加载资源。
立即学习“Java免费学习笔记（深入）”；
- React中可使用React.lazy + Suspense实现组件懒加载
- Vue中可通过import()函数动态导入组件
- 配置路由时使用异步组件定义，框架会自动触发代码分割
这种方式特别适合多页面或单页应用（SPA），能有效降低初始加载量。
按功能或库进行分割
除了路由，还可以根据功能模块拆分代码。比如将数据分析、富文本编辑器、地图组件等重型功能单独打包。
- 第三方库如Lodash、Moment.js体积较大，可单独提取或按需引入
- 使用splitChunks插件（Webpack）优化公共依赖提取
- 避免将不常用的工具函数打包进主bundle
这样即使某些功能未被使用，也不会影响主流程的加载速度。
预加载与预获取提示
代码分割后，可通过浏览器的资源提示机制优化加载时机。
- preload：告诉浏览器立即加载当前页面需要的关键chunk
- prefetch：在空闲时提前加载可能用到的模块（如下一个页面）
在Webpack中可通过magic comments添加指令：
const OrderPage = () => import(/* webpackPrefetch: true */ './OrderPage');浏览器会在主资源加载完成后，利用空闲时间下载这个模块。
基本上就这些。合理使用代码分割，配合构建工具配置，能大幅改善应用加载性能。关键是识别哪些代码是“必须马上加载”的，哪些可以延后。不复杂但容易忽略细节。
