概要
同maxAsyncRequests配置类似，该配置表示入口点能被拆分的最大数量。
准备工作
- 目录
root
——dist（打包之后的文件夹）
——node_modules（下载的包）
——src（项目脚本目录）
————entry（入口点脚本）
————modules（入口点中引入的模块）
——package.json（包管理文件）
——webpack.config.js（webpack配置文件）
- webpack配置
const path = require('path')
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
entry: {
entry1: './src/entry/entry1.js',
entry2: './src/entry/entry2.js'
},
plugins: [
new CleanWebpackPlugin()
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
},
optimization: {
splitChunks: {
chunks: 'initial',
maxInitialRequests: 2,
minSize: 1,
cacheGroups: {
vendors: {
test: /[\\/]node_modules[\\/]/,
priority: -10
},
default: {
minChunks: 1,
priority: -20,
reuseExistingChunk: true
}
}
}
}
// default config
// optimization: {
// splitChunks: {
// chunks: 'async',
// minSize: 30000,
// minChunks: 1,
// maxAsyncRequests: 5,
// maxInitialRequests: 3,
// automaticNameDelimiter: '~',
// automaticNameMaxLength: 30,
// name: true,
// cacheGroups: {
// vendors: {
// test: /[\\/]node_modules[\\/]/,
// priority: -10
// },
// default: {
// minChunks: 2,
// priority: -20,
// reuseExistingChunk: true
// }
// }
// }
// }
}
- package.json
{
"name": "test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"clean-webpack-plugin": "^3.0.0",
"webpack": "^4.41.2",
"webpack-cli": "^3.3.10"
}
}
案例
接下来，通过几个简单的案例，来分析maxInitialRequests配置的控制规则。
- demo1
################################
webpack.config.js:
splitChunks.maxInitialRequests设为2
################################
modules/add.js:
export default function add (a, b) {
return a + b
}
################################
modules/subtract.js
export default function subtract (a, b) {
return a - b
}
################################
entry/entry1.js:
import add from '../modules/add.js'
console.log('index', add(1, 2))
################################
entry/entry2.js:
import subtract from '../modules/subtract'
console.log('index', subtract(1, 2))
通过npm run build进行打包，结果如下：
Hash: 1a653fb772ccb33c66ba
Version: webpack 4.41.5
Time: 211ms
Built at: 2020/01/26 下午3:34:06
Asset Size Chunks Chunk Names
default~entry1.bundle.js 122 bytes 0 [emitted] default~entry1
default~entry2.bundle.js 123 bytes 1 [emitted] default~entry2
entry1.bundle.js 1.47 KiB 2 [emitted] entry1
entry2.bundle.js 1.47 KiB 3 [emitted] entry2
Entrypoint entry1 = default~entry1.bundle.js entry1.bundle.js
Entrypoint entry2 = default~entry2.bundle.js entry2.bundle.js
[0] ./src/entry/entry1.js + 1 modules 122 bytes {0} [built]
| ./src/entry/entry1.js 68 bytes [built]
| ./src/modules/add.js 54 bytes [built]
[1] ./src/entry/entry2.js + 1 modules 140 bytes {1} [built]
| ./src/entry/entry2.js 81 bytes [built]
| ./src/modules/subtract.js 59 bytes [built]
add.js和subtract.js被分别打包到default~entry1.bundle.js和default~entry2.bundle.js。
- demo2
################################
webpack.config.js:
splitChunks.maxInitialRequests设为1
################################
modules/add.js:
export default function add (a, b) {
return a + b
}
################################
modules/subtract.js
export default function subtract (a, b) {
return a - b
}
################################
entry/entry1.js:
import add from '../modules/add.js'
console.log('index', add(1, 2))
################################
entry/entry2.js:
import subtract from '../modules/subtract'
console.log('index', subtract(1, 2))
打包结果如下：
Hash: ec010da1fdddf9f25905
Version: webpack 4.41.5
Time: 210ms
Built at: 2020/01/26 下午7:27:35
Asset Size Chunks Chunk Names
entry1.bundle.js 976 bytes 0 [emitted] entry1
entry2.bundle.js 977 bytes 1 [emitted] entry2
Entrypoint entry1 = entry1.bundle.js
Entrypoint entry2 = entry2.bundle.js
[0] ./src/entry/entry1.js + 1 modules 122 bytes {0} [built]
| ./src/entry/entry1.js 68 bytes [built]
| ./src/modules/add.js 54 bytes [built]
[1] ./src/entry/entry2.js + 1 modules 140 bytes {1} [built]
| ./src/entry/entry2.js 81 bytes [built]
两个入口点引入的包都没有被打包出来，符合设置的最大值1。
- demo3
################################
webpack.config.js:
splitChunks.maxInitialRequests设为1
################################
modules/add.js:
export default function add (a, b) {
return a + b
}
################################
modules/subtract.js
export default function subtract (a, b) {
return a - b
}
################################
modules/module.js
import add from './add'
export default function () {
console.log(add(3, 4) + 10)
}
################################
entry/entry1.js:
import add from '../modules/module.js'
console.log('index', add(1, 2))
################################
entry/entry2.js:
import subtract from '../modules/subtract'
import add from '../modules/add'
console.log('index', subtract(1, 2) + add(1, 0))
打包后的结果如下：
default~entry1~entry2.bundle.js 151 bytes 0 [emitted] default~entry1~entry2
entry1.bundle.js 1.58 KiB 1 [emitted] entry1
entry2.bundle.js 1.56 KiB 2 [emitted] entry2
Entrypoint entry1 = default~entry1~entry2.bundle.js entry1.bundle.js
Entrypoint entry2 = default~entry1~entry2.bundle.js entry2.bundle.js
[0] ./src/modules/add.js 54 bytes {0} [built]
[1] ./src/entry/entry1.js + 1 modules 161 bytes {1} [built]
| ./src/entry/entry1.js 71 bytes [built]
| ./src/modules/module.js 85 bytes [built]
[2] ./src/entry/entry2.js + 1 modules 190 bytes {2} [built]
| ./src/entry/entry2.js 126 bytes [built]
两个入口点都引入的add.js被单独打包到default~entry1~entry2.bundle.js，所以结果是，entry1.js被拆分为entry1.bundle.js和default~entry1~entry2.bundle.js，entry2.js被拆分为entry2.bundle.js和default~entry1~entry2.bundle.js，符合设置的最大值2。
- demo4
################################
webpack.config.js:
splitChunks.maxInitialRequests设为3
################################
modules/add.js:
export default function add (a, b) {
return a + b
}
################################
modules/subtract.js
export default function subtract (a, b) {
return a - b
}
################################
modules/module.js
import add from './add'
export default function () {
console.log(add(3, 4) + 10)
}
################################
entry/entry1.js:
import add from '../modules/module.js'
console.log('index', add(1, 2))
################################
entry/entry2.js:
import subtract from '../modules/subtract'
import add from '../modules/add'
console.log('index', subtract(1, 2) + add(1, 0))
打包结果为：
Hash: 8f215c580657b26dd448
Version: webpack 4.41.5
Time: 299ms
Built at: 2020/01/26 下午7:49:25
Asset Size Chunks Chunk Names
default~entry1.bundle.js 168 bytes 1 [emitted] default~entry1
default~entry1~entry2.bundle.js 151 bytes 0 [emitted] default~entry1~entry2
default~entry2.bundle.js 152 bytes 2 [emitted] default~entry2
entry1.bundle.js 1.47 KiB 3 [emitted] entry1
entry2.bundle.js 1.47 KiB 4 [emitted] entry2
Entrypoint entry1 = default~entry1~entry2.bundle.js default~entry1.bundle.js entry1.bundle.js
Entrypoint entry2 = default~entry1~entry2.bundle.js default~entry2.bundle.js entry2.bundle.js
[0] ./src/modules/add.js 54 bytes {0} [built]
[1] ./src/entry/entry1.js + 1 modules 161 bytes {1} [built]
| ./src/entry/entry1.js 71 bytes [built]
| ./src/modules/module.js 85 bytes [built]
[2] ./src/entry/entry2.js + 1 modules 190 bytes {2} [built]
| ./src/entry/entry2.js 126 bytes [built]
| ./src/modules/subtract.js 59 bytes [built]
entry1.js被拆分为entry1.bundle.js、default~entry1.bundle.js和default~entry1~entry2.bundle.js，entry2.js被拆分为entry2.bundle.js、default~entry2.bundle.js和default~entry1~entry2.bundle.js。其中default~entry1~entry2.bundle.js为entry1和entry2中均被引入的add.js。
- demo5
################################
webpack.config.js:
splitChunks.maxInitialRequests设为2
设置3个入口点：
entry: {
entry1: './src/entry/entry1.js',
entry2: './src/entry/entry2.js',
entry3: './src/entry/entry3.js'
},
################################
modules/add.js:
export default function add (a, b) {
return a + b
}
################################
modules/subtract.js
export default function subtract (a, b) {
return a - b
}
################################
modules/module.js
import add from './add'
import subtract from './subtract'
export default function () {
console.log(add(3, 4) + subtract(4, 3))
}
################################
entry/entry1.js:
import add from '../modules/module.js'
console.log('index', add(1, 2))
################################
entry/entry2.js:
import add from '../modules/add'
console.log('index', add(1, 0))
################################
entry/entry3.js:
import subtract from '../modules/subtract'
console.log('index', subtract(1, 0))
打包结果如下：
Hash: 968a9121c01a2943cab7
Version: webpack 4.41.5
Time: 80ms
Built at: 2020/01/26 下午8:43:08
Asset Size Chunks Chunk Names
default~entry1~entry2.bundle.js 152 bytes 0 [emitted] default~entry1~entry2
default~entry3.bundle.js 240 bytes 1 [emitted] default~entry3
entry1.bundle.js 1.69 KiB 2 [emitted] entry1
entry2.bundle.js 1.56 KiB 3 [emitted] entry2
entry3.bundle.js 1.47 KiB 4 [emitted] entry3
Entrypoint entry1 = default~entry1~entry2.bundle.js entry1.bundle.js
Entrypoint entry2 = default~entry1~entry2.bundle.js entry2.bundle.js
Entrypoint entry3 = default~entry3.bundle.js entry3.bundle.js
[0] ./src/modules/subtract.js 59 bytes {1} {2} [built]
[1] ./src/modules/add.js 1.09 KiB {0} [built]
[2] ./src/entry/entry2.js 66 bytes {3} [built]
[3] ./src/entry/entry1.js + 1 modules 212 bytes {2} [built]
| ./src/entry/entry1.js 71 bytes [built]
| ./src/modules/module.js 131 bytes [built]
[4] ./src/entry/entry3.js 81 bytes {1} [built]
咱设的是2，对于entry1.js来说，可能将add.js拆分出来，也可能将subtract.js拆分出来，经测试，将add.js拆分出来还是将subtract.js拆分出来，主要是根据这两个文件的大小来决定，优先拆分体积大的模块。
- demo6
################################
webpack.config.js:
splitChunks.maxInitialRequests设为2
设置3个入口点：
entry: {
entry1: './src/entry/entry1.js',
entry2: './src/entry/entry2.js',
entry3: './src/entry/entry3.js'
},
################################
modules/add.js:
export default function add (a, b) {
return a + b
}
################################
modules/subtract.js
export default function subtract (a, b) {
return a - b
}
################################
modules/module.js
import add from './add'
import subtract from './subtract'
export default function () {
console.log(add(3, 4) + subtract(4, 3))
}
################################
entry/entry1.js:
import add from '../modules/module.js'
console.log('index', add(1, 2))
################################
entry/entry2.js:
import add from '../modules/add'
import subtract from '../modules/subtract'
console.log('index', add(1, 0) + subtract(1, 0))
################################
entry/entry3.js:
import subtract from '../modules/subtract'
console.log('index', subtract(1, 0))
打包结果如下：
Hash: bc0494313737a69d1121
Version: webpack 4.41.5
Time: 217ms
Built at: 2020/01/26 下午8:51:08
Asset Size Chunks Chunk Names
default~entry1~entry2~entry3.bundle.js 151 bytes 0 [emitted] default~entry1~entry2~entry3
entry1.bundle.js 1.69 KiB 1 [emitted] entry1
entry2.bundle.js 1.67 KiB 2 [emitted] entry2
entry3.bundle.js 1.56 KiB 3 [emitted] entry3
Entrypoint entry1 = default~entry1~entry2~entry3.bundle.js entry1.bundle.js
Entrypoint entry2 = default~entry1~entry2~entry3.bundle.js entry2.bundle.js
Entrypoint entry3 = default~entry1~entry2~entry3.bundle.js entry3.bundle.js
[0] ./src/modules/subtract.js 59 bytes {0} [built]
[1] ./src/modules/add.js 1.09 KiB {1} {2} [built]
[2] ./src/entry/entry2.js 126 bytes {2} [built]
[3] ./src/entry/entry3.js 81 bytes {3} [built]
[4] ./src/entry/entry1.js + 1 modules 212 bytes {1} [built]
| ./src/entry/entry1.js 71 bytes [built]
| ./src/modules/module.js 131 bytes [built]
通过上面这个例子，我们知道，被拆分出来的包如果有两种情况，被引入多次的那个包会被优先打包出来，无论两个包的大小关系如何。
总结
- maxInitialRequests用来表示入口点能被拆分的最大数量；
- 如果对于单独打包出来的模块有两种可能，被多次引入的那个模块或模块集会被优先打包出来；
- 同样的情况，如果两种情况下模块被引用的次数相同，体积大的那个模块或模块集会被打包出来；
- 如果两种情况下，情况一只包含一个模块，情况二则包含两个模块，并且两种情况下被引入的次数也是相同的，前两条规则仍然有效。
- 该配置对于chunks为initial和all情况下均可行，对于async无效，同时对按需加载的模块也是无效的；
last（最后）
非常感谢您能阅读完这篇文章，您的阅读是我不断前进的动力。如果上述内容或许有些错误或者有些个人理解比较偏离实际，还望指出，谢谢！！！对于上面所述，有什么新的观点或发现有什么错误，希望您能指出。
最后，附上个人常逛的社交平台：
知乎：https://www.zhihu.com/people/bi-an-yao-91/activities
csdn：https://blog.csdn.net/YaoDeBiAn
github: https://github.com/yaodebian个人目前能力有限，并没有自主构建一个社区的能力，如有任何问题或想法与我沟通，请通过上述某个平台联系我，谢谢！！！
