代码分割是将大JavaScript文件拆分为小块按需加载的技术，通过动态import()实现路由级和功能级分块，结合webpack的splitChunks提取公共代码与第三方库，并利用prefetch和preload优化资源加载时机，从而减少首屏体积、提升页面响应速度与用户体验。
JavaScript代码分割是前端性能优化的重要手段之一。随着应用体积不断增大，一次性加载所有脚本会导致首屏加载缓慢、资源浪费和用户体验下降。通过将代码拆分成更小的块，按需加载，可以显著提升页面响应速度和运行效率。
什么是代码分割？
代码分割（Code Spliting）是指将一个大的JavaScript文件拆分为多个较小的文件，在需要时动态加载。它不是构建工具的附加功能，而是现代前端工程化中的核心实践。
与传统的“打包成一个bundle.js”不同，代码分割让浏览器只加载当前页面或功能所需的代码，减少初始下载量，加快渲染速度。
使用动态import()实现按需加载
ES2020引入了动态import()语法，它是实现代码分割的关键。不同于静态import，动态import()返回promise，可以在运行时条件加载模块。
立即学习“Java免费学习笔记（深入）”；
例如：路由级别的分割常用于单页应用中
- 用户访问登录页时，才加载登录相关逻辑
- 点击某个功能按钮后，再加载对应的处理模块
示例代码：
const loadAnalytics = async () => {
const module = await import(‘./analytics.JS’);
module.trackEvent(‘button_click’);
};
结合Webpack进行自动分割
Webpack等打包工具原生支持代码分割。通过配置splitChunks选项，可提取公共代码、第三方库和异步模块。
常见策略包括：
- vendor分割：把node_modules中的依赖单独打包，利于长期缓存
- runtime分割：将Webpack运行时代码独立出来，避免因小改动导致缓存失效
- 异步模块分割：每个import()生成独立chunk
webpack.config.js配置片段：
optimization: {
splitChunks: {
chunks: ‘all’,
cacheGroups: {
vendor: {
test: /[/]node_modules[/]/,
name: ‘vendors’,
chunks: ‘all’
}
}
&;} }
预加载与预连接优化体验
代码分割后可能带来“点击才加载”的延迟。可通过link标签提示浏览器提前准备资源。
- <link rel=”prefetch” href=”analytics.chunk.js”>：空闲时预加载，适合后续可能用到的模块
- <link rel=”preload” href=”critical-utils.js”>：关键资源优先加载
Webpack支持在动态import中添加魔法注释来生成这些指令：
import(/* webpackPrefetch: true */ ‘./modal.js’)
这会让Webpack自动注入prefetch标签到html中。
基本上就这些。合理使用代码分割，能有效降低首包体积，提高交互响应速度，是现代前端开发不可或缺的一环。