应用场景
当我们的业务逻辑很大的时候（index.js很大），我们打包生成的文件会很大：用户打开页面要一次性加载这个很大的文件，需要很长的加载时间；当文件有一点点修改，用户又要重新加载这个很大的文件，又需要很长加载时间。所以可以用code splitting（代码分割）把代码分离到不同的 bundle 中，可以实现按需加载或并行加载这些文件，优化加载时间。
实现
借用SplitChunksPlugin，可以实现对同步加载的代码或者异步加载的代码实现代码分割。把spliChunk写在webpack配置文件的optimization配置项中。代码如下
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| optimization: {
splitChunks: {
chunks: "async",
minSize: 30000,
minChunks: 1,
maxAsyncRequests: 5,
maxInitialRequests: 3,
automaticNameDelimiter: '~',
name: true,
cacheGroups: {
vendors: false,
default: false
}
}
}
|
SplitChunksPlugin配置项详解
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| splitChunks: {
chunks: "async",
minSize: 30000,
minChunks: 1,
maxAsyncRequests: 5,
maxInitialRequests: 3,
automaticNameDelimiter: '~',
name: true,
cacheGroups: {
vendors: false,
default: false
}
}
|
