目录
上节： 代码分割(code spliting)中
上节目录如下：
前两节代码分割只用到了splitChunks中的chunks属性，现在来看下其它属性
魔法注释
先来打个包，npm run build：
可以看到lodash打包后的名字是vendors~lodash，这其实跟src/index.js中的一段注释有关：
现在删掉这段注释再打包：
就默认用[id]命名了，这就是魔法注释的作用，还有其它魔法注释如：
/ webpackPrefetch: true / 这段表示改模块开启Prefetch预加载
/ webpackPreload: true / 这段表示改模块开启Preload预加载
修改输出文件名
虽然魔法注释能影响输出的文件名，但却不能完全控制，比如我就想让输出的文件名叫lodash呢？
先恢复魔法注释，然后修改webpack/webpack.prod.js:
// 省略
optimization: {
// 配置代码分割
splitChunks: {
cacheGroups: {
vendors: false,
default: false
}
}
}
// 省略再打包：
这样就没有vendor~前缀了。
splitChunks其它属性
先看下splitChunks的默认属性：
module.exports = {
//...
optimization: {
splitChunks: {
chunks: 'async',
minSize: 30000,
maxSize: 0,
minChunks: 1,
maxAsyncRequests: 5,
maxInitialRequests: 3,
automaticNameDelimiter: '~',
name: true,
cacheGroups: {
vendors: {
test: /[\\/]node_modules[\\/]/,
priority: -10
},
default: {
minChunks: 2,
priority: -20,
reuseExistingChunk: true
}
}
}
}
};属性很多，官网传送
这里注释一下这些默认属性的意思：
splitChunks: { // 代码分隔配置
/*
* 选择要进行分割的包
* 可选值： all（推荐）, async(默认，只分隔异步代码), and initial(只分割同步代码)
* 还可以传入函数精确控制
* chunks (chunk) {
// exclude `my-excluded-chunk`
return chunk.name !== 'my-excluded-chunk';
}
* */
chunks: 'all',
// 默认，大于30k的包才做代码分割
minSize: 30000,
// 默认，分割出来的每个包最大size，
// 比如设为50000（50kb），那如果某个包分离出来后超过50kb，就会进行再分割，保证每个文件都不超过50kb
maxSize: 0,
// 默认，至少被引入一次就进行代码分隔
minChunks: 1,
// 默认，浏览器最多并行请求5个js文件,也就是说，分割数量超过5个时，就会停止代码分割了
maxAsyncRequests: 5,
// 默认，对于入口文件最多只分割3个js包，超过3个就停止
maxInitialRequests: 3,
// 默认，文件名连接符
automaticNameDelimiter: '~',
// 默认，分割后的文件名将根据chunks和cacheGroups自动生成名称。
name: true,
cacheGroups: {
vendors: { // vendors是组名
// 默认，只对node_modules里的代码进行分隔
test: /[\\/]node_modules[\\/]/,
/*
默认，每个组都会有个优先级，
如果某个包满足多个组的test规则，就按优先级来判断归哪个组
数值越大，优先级越高
*/
priority: -10,
// 分割后的文件名（默认是：组名~入口名.js，即verdors~main.js）
filename: 'vendors.js',
// 强制分隔，无视minChunks、maxAsyncRequests等选项，默认false
enforce: true
}
},
default: { // default是组名, 分隔不在node_modules里的代码
minChunks: 2, // 默认
priority: -20, // 默认
/*
复用已存在的chunk,
比如index.js里引入axios和test.js
test里也引入了axios，那么axios就会被复用
*/
reuseExistingChunk: true
},
/*
* 将项目所有css打包到一个文件中
* 还可以分入口打包：https://webpack.js.org/plugins/mini-css-extract-plugin
* */
styles: {
name: 'styles',
test: /\.less$/,
chunks: 'all',
enforce: true,
}
}
}下节：懒加载