🪀 [Webpack实战: 入门、进阶与调优] 6. 代码分片
通过入口划分代码
每个入口都会生成对于的资源，通过划分入口可以进行简单代码拆分
CommonsChunkPlugin
Webpack4之前内部自带插件webpack4后被替换为SplitChunks
optimizations.SplitChunks
javascriptCopy
module.exports = {
...,
optimization: {
splitChunks: 'all'
}
}javascriptCopy
// foo.js
import React from 'react'
import('./bar.js')
// bar.js
import React from 'react'
console.log('bar.js')
// 打包结果
// foo.js // foo.js的结果
// 0.foo.js // foo.js 异步加载 bar 的结果
// vendors-main.foo.js // react 提取到了这里javascriptCopy
{
splitChunks: {
chunks: "async", // 匹配模式 async | initial | all
// async 为只提取异步chunk （默认）
// initial 只对入口chunk生效
// all 为两种模式都开启
},
minsize: { // minSize minChunks maxAsyncRequests maxInitialRequests
// 都属于匹配条件
javascript: 30000,
sty1e: 50000,
},
maxsize: 0,
minChunks: 1,
maxAsyncRequests: 5,
maxInitialRequests: 3,
automaticNameDelimiter: '~',
name: true, // 会根据cacheGroups作用范围自动生成chunk命名
cacheGroups: {
vendors: { // 用于提取符合test的模块 这里提取node_modules
test: / [\\/]node_modules[\\/]/,
priority: -10,
},
default: { // 被动被引用多次的模块
minChunks: 2,
priority: -20,
reuseExistingChunk: true,
}
}