一 、SplitChunks插件配置选项
chunks选项，决定要提取那些模块。initial：提取同步加载和异步加载模块，如果xxx在项目中异步加载了，也同步加载了，那么xxx这个模块会被提取两次，分别打包到不同的文件中。- 同步加载的模块：通过
import xxx或require('xxx')加载的模块。
- 同步加载的模块：通过
all：不管异步加载还是同步加载的模块都提取出来，打包到一个文件中。minSize选项：规定被提取的模块在压缩前的大小最小值，单位为字节，默认为30000，只有超过了30000字节才会被提取。maxSize选项：把提取出来的模块打包生成的文件大小不能超过maxSize值，如果超过了，要对其进行分割并打包生成新的文件。单位为字节，默认为0，表示不限制大小。minChunks选项：表示要被提取的模块最小被引用次数，引用次数超过或等于minChunks值，才能被提取。maxAsyncRequests选项：最大的按需(异步)加载次数，默认为 6。maxInitialRequests选项：打包后的入口文件加载时，还能同时加载js文件的数量（包括入口文件），默认为4。- 先说一下优先级
maxInitialRequests/maxAsyncRequests<maxSize<minSize。 automaticNameDelimiter选项：打包生成的js文件名的分割符，默认为~。name选项：打包生成js文件的名称。cacheGroups选项，核心重点，配置提取模块的方案。里面每一项代表一个提取模块的方案。下面是cacheGroups每项中特有的选项，其余选项和外面一致，若cacheGroups每项中有，就按配置的，没有就使用外面配置的。
也就是说，在不影响代码正确执行的前提下，最优化的代码压缩配置为如下：
module.exports = {
configureWebpack:config =>{
return {
optimization: {
splitChunks: {
chunks: 'all', //拆分
minSize: 30000, //被打包文件最小限制 30000字节
maxSize: 500000,//输出文件最大限制 500000字节
minChunks: 1,
maxAsyncRequests: 6,
maxInitialRequests: 4, //允许入口并行加载的最大请求数
name: false,
cacheGroups: {
vendors: {
name: `chunk-vendors`,
test: /[\\/]node_modules[\\/]/,
priority: -10,
chunks: 'initial'
},
common: {
name: `chunk-common`,
minChunks: 2,
priority: -20,
chunks: 'initial',
reuseExistingChunk: true
}
}
}
}
}
}
};
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
