基础知识点
- webpack内部的Code-Splitting(代码分割),实际上是splitChunksPlugin插件来实现
- 默认会对所有的异步加载进行代码分割 import()函数
optimization: {
},
- 异步导入第三方模块(或自己业务模块)
- 数字0代表代码分割产生的id值,如果我们希望是一个可识别的英文名,在异步加载代码import()函数中可以使用魔法注释的语法
语法: /webpackChunkName:模块名/
- 我们发现魔法注释我们填写的是lodash,为什么打包后生成的文件名是vendors~lodash,多了一个vendors呢?因为受webpack.config.js中optimization的默认配置项的值的影响
- 查看splitChunksPlugin插件配置项=>因为optimization.splitChunks配置选项就是往webpack内部的splitChunksPlugin插件传参,由splitChunksPlugin插件来进项代码分割
- vendors和default的默认值都改成false(之后详解具体含义),再打包
optimization: {
splitChunks: {
chunks: "all",
cacheGroups: {
vendors: false,
default: false
}
}
}
小结
- 异步导入(import()函数)才能使用魔法字符串
- 异步导入(import()函数)使用魔法字符串生效的前提必须cacheGroups中的vendors和default设置为false,即没有缓存组
- cacheGroups只对同步导入模块有约束作用,且同步导入的模块要进行代码分割必须配置相关的缓存组
- 当上面异步导入模块,加了魔法注释 /webpackChunkName:lodash/,
- 同时满足vendors缓存组的检测,所以lodash模块打包到vendors缓存组中vendors~lodash.js
- 当cacheGroups中的vendors和default设置为false,则没有缓存组,直接用魔法注释的命名生成分割后的文件名
splitChunks参数详解
splitChunks参数默认值概览
optimization: {
splitChunks: {
chunks: "async",
minSize: 30000,
minChunks: 1,
maxAsyncRequests: 5,
maxInitialRequests: 3,
automaticNameDelimiter: '~',
name: true,
cacheGroups: {
vendors: {