概念
Code Splitting，即为代码分割。是一种前端性能优化技术，主要用于将代码**按需加载，**一般我们打完包之后首次加载页面会加载项目所有代码，而越是大型的项目所需加载的代码量就越多，使用CodeSplitting可以将代码分割成多个模块，首次加载的时候不进行加载。而在需要时再动态加载相应的模块。
它主要做到了下面几个功能：
- 提高加载速度：减少首次加载的资源，提高页面加载速度
- 优化运行效率：只加载需要的代码，减少内存占用
- 支持懒加载：实现模块的懒加载，提高用户体验
实现方法
实现步骤如下：
- 使用构建工具：如Webpack、Parcel等，它们支持代码分割的实现。
- 定义入口点：在配置文件中定义多个入口点，每个入口点对应一个模块。
- 动态导入：使用动态导入语法（import()），按需加载模块。
- 代码分割策略：选择合适的代码分割策略，如动态导入、分割公共代码等。
代码实现：
在不同的项目中有不同的实现方式：
- JS实现
在 ECMAScript 2020（ES11）中，引入了动态import()语法，它可以实现代码分割。使用动态import()时，代码会被分成多个小块，并在需要时按需加载。
import('./modules.js')
.then((module) => {
})
- Webpack:
通常在配置文件中进行配置，分为多种分割方式
第三方类库
需要先在配置文件中进行配置
//在entry中添加入口
entry: {
index: './index',
vendor: ['jquery', 'bootstrap']
},
//在plugins中配置
plugins: [
new webpack.optimize.CommonsChunkPlugin("vendor", "vendor.bundle.js"),
]
说明
CommonsChunkPlugin提供两个参数，第一个参数为对应的chunk名（chunk指文件块，对应entry中的属性名），第二个参数为生成的文件名。
这个插件做了两件事：
将vendor配置的模块（jquery,bootstrap）打包到vendor.bundle.js中。
将index中存在的jquery, bootstrap模块从文件中移除。这样index中则只留下纯净的业务代码。
代码模块进行按需加载
使用动态import()语法或require.ensure等方法，按需加载代码块。
// 使用 require.ensure 确保加载的代码块在需要时才会被下载
require.ensure(['./MyComponent.js'], (require) => {
const component = require('./MyComponent.js');
// 使用 component
});
如上方式将打出两个文件，a.js和b.js（当然名字会有所不同），且为按需加载。只有在访问a时，a.js才会被加载，b同理。但是这种做法存在两个问题：
若路由分配不合理，会打包出很多很小的文件，每个文件或许只有几k，却多了很多网络请求，得不偿失。
会造成通用模块的重复打包，比如a模块和b模块都引用了c模块，
通用模块打包
上面的方式在多个组件引用同一个模块时会导致重复获取，可以试试如下方案：
//在entry中添加入口
entry: {
index: './index',
common: ['./c', './d'], //其中c,d模块为通用功能模块
vendor: ['jquery', 'bootstrap']
},
//在plugin中
plugins: [
new webpack.optimize.CommonsChunkPlugin(["common", "vendor"], "[name].js") //[name]对应'common'和'vendor'
]
- Vite
使用chunkSplitPlugin插件配置进行分割，这个方式可以分割第三方模块
// vite.config.ts
import { chunkSplitPlugin } from 'vite-plugin-chunk-split';
export default {
chunkSplitPlugin({
// 指定拆包策略
customSplitting: {
// 1. 支持填包名。`react` 和 `react-dom` 会被打包到一个名为`render-vendor`的 chunk 里面(包括它们的依赖，如 object-assign)
'react-vendor': ['react', 'react-dom'],
// 2. 支持填正则表达式。src 中 components 和 utils 下的所有文件被会被打包为`component-util`的 chunk 中
'components-util': [/src\/components/, /src\/utils/]
}
})
}
参考链接
blog.csdn.net/weixin_4255… 这种方法可以显著提高网页的加载速度，提高用户体验。
