webpack.config.js中
optimization: {
chunkIds: 'named',
splitChunks: {
chunks: 'all', // async 对异步代码进行分割 all可对同步和异步代码进行分割,使用all时,必须配置cacheGroups
minSize: 30000, // 代码大于30000个字节才做代码分割
maxSize: 0,
minChunks: 1, // 一个模块至少被用了多少次进行分割
maxAsyncRequests: 6,
maxInitialRequests: 4,
automaticNameDelimiter: '~',
automaticNameMaxLength: 30,
name: true,
cacheGroups: { // 与chunks配合使用
vendors: {
test: /[\\/]node_modules[\\/]/, // 是从node_modules中引入的模块
priority: -10, // 用来确定切割时生成块的优先级 值越大,优先级越高
filename: 'vendors.js' // 定义thunk生成后的名称
},
default: { // 当未满足minSize的时候,默认thunk的生成
filename: 'common.js', // 定义thunk生成后的名称
priority: -20, // 用来确定切割时生成块的优先级 值越大,优先级越高
reuseExistingChunk: true // 如果之前的块里面有,那就使用之前块里面的方法
}
}
}
}