webpack4之简单分析splitChunk.chunks几种情况：initial、async、all，以及function (chunk)
2024-06-18 10:05:56
webpack的这个属性被用来指定项目中哪些部分将会被优化。
准备工作
- 目录
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',maxAsyncRequests: 3,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"}
}initial
这个值表示项目中被直接引入的模块将会被用于优化。
1. initial_demo1:
################################
webpack.config.js:splitChunks.chunks设为'initial'################################
modules/add.js:export default function add (a, b) {return a + b
}################################
modules/subtract.jsexport 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（个人目前主要使用yarn或npm来进行管理，cnpm不建议使用，有时候会有问题）之后，打包如下：
Hash: 2b419949ee0e8b5f82f1
Version: webpack 4.41.4
Time: 153ms
Built at: 2019/12/22 下午3:04:56Asset Size Chunks Chunk Names
default~entry1.bundle.js 122 bytes 0 [emitted] default~entry1
default~entry2.bundle.js 123 bytes 1 [emitted] default~entry2entry1.bundle.js 1.47 KiB 2 [emitted] entry1entry2.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。
注意，这里之所以这两个块能够被split分割出来，是因为我为了方便，将默认的cacheGroups.default.minChunks设置成了1，只要并行请求次数大于等于1就会被拆分出来。
另外，这里仅仅是拆分出来了入口点中的模块，那么如果在引入的模块中又引入了模块呢，会被拆分出来吗。
2. initial_demo2:
################################
webpack.config.js:splitChunks.chunks设为'initial'################################
modules/add.js:export default function add (a, b) {return a + b
}################################
modules/subtract.jsexport 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'console.log('index', subtract(1, 2))npm run build的打包结果为：
Hash: 2d11c0e1c95c35c0182c
Version: webpack 4.41.4
Time: 178ms
Built at: 2019/12/23 下午5:30:41Asset Size Chunks Chunk Names
default~entry1.bundle.js 139 bytes 0 [emitted] default~entry1
default~entry2.bundle.js 123 bytes 1 [emitted] default~entry2entry1.bundle.js 1.47 KiB 2 [emitted] entry1entry2.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 + 2 modules 210 bytes {0} [built]| ./src/entry/entry1.js 71 bytes [built]| ./src/modules/module.js 85 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]
分析一下，entry1中引入了module:
- entry1.bundle.js与entry2.bundle.js分别是两个入口点entry1和entry2的主体部分；
- default~entry1.bundle.js是入口点entry1.js中引入的module.js，我们会发现，尽管我们的minChunks设为了1，同时我们的module.js中也引入了add.js，webpack也会把它当作是一个被直接引入的module进行解析。所以我们如果打开这个文件查看，我们能看到如下的代码块：
console.log("index",void console.log(17));
也就是webpack已经将module文件完全解析出来了。
- default~entry2.bundle.js和demo1中一样，也是将entry2中直接引入的subtract打包后的结果；
3. initial_demo3
################################
webpack.config.js:splitChunks.chunks设为'initial'################################
modules/add.js:export default function add (a, b) {return a + b
}################################
modules/subtract.jsexport 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))基于demo2，我们在entry2中新增一句对add.js的引用。在打包之前，思考这样一个问题，这个add.js会不会被单独被打包出来呢？
npm run build打包之后，结果如下：
Hash: 8f215c580657b26dd448
Version: webpack 4.41.5
Time: 208ms
Built at: 2020/01/01 上午8:59:55Asset Size Chunks Chunk Namesdefault~entry1.bundle.js 168 bytes 1 [emitted] default~entry1
default~entry1~entry2.bundle.js 151 bytes 0 [emitted] default~entry1~entry2default~entry2.bundle.js 152 bytes 2 [emitted] default~entry2entry1.bundle.js 1.47 KiB 3 [emitted] entry1entry2.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.bundle.js和entry2.bundle.js与之前的demo相同；
- default~entry2.bundle.js是对subtract.js打包后的结果；
- default~entry1.bundle.js是对module.js打包后的结果（当然，这里面没有包含add.js的代码）；
- default~entry1~entry2.bundle.js是对add.js打包后的结果；
所以，对于上面的问题，当然是ok的啦。
4. initial_demo4
################################
webpack.config.js:splitChunks.chunks设为'initial'################################
modules/add.js:export default function add (a, b) {return a + b
}################################
modules/subtract.jsexport default function subtract (a, b) {return a - b
}################################
modules/module.js:import add from './add'export default function () {console.log(add(3, 4) + 10)
}################################
modules/module2.js:import add from './add'export default function () {console.log(add(5, 6) + 11)
}################################
entry/entry1.js:import add from '../modules/module.js'console.log('index', add(1, 2))################################
entry/entry2.js:import add from '../modules/module2'console.log('index', add(0, 1))npm run build打包之后如下：
Hash: 28bb1439ac0caa0c0f7f
Version: webpack 4.41.5
Time: 168ms
Built at: 2020/01/01 上午9:27:48Asset Size Chunks Chunk Namesdefault~entry1.bundle.js 168 bytes 1 [emitted] default~entry1
default~entry1~entry2.bundle.js 151 bytes 0 [emitted] default~entry1~entry2default~entry2.bundle.js 169 bytes 2 [emitted] default~entry2entry1.bundle.js 1.47 KiB 3 [emitted] entry1entry2.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 160 bytes {2} [built]| ./src/entry/entry2.js 70 bytes [built]| ./src/modules/module2.js 85 bytes [built]
和demo3相似，default～entry1～entry2.bundle.js将module1和module2中直接引入的add.js模块进行抽离并打包的结果。
initial：基于上面的demo，我们知道当将chunks配置设为initial，即将入口点中直接引入的模块、模块中引入的模块进行拆解并单独打包。（注：这里提到的模块均指直接引入的模块）
async
async这个值表示按需引入的模块将会被用于优化。
上面，我们通过几个demo基本了解了initial配置值的打包规则，接下来，同样通过几个demo的方式，希望借此来掌握async的使用。
1. demo_async1
################################
webpack.config.js:splitChunks.chunks设为'async'################################
modules/add.js:export default function add (a, b) {return a + b
}################################
modules/subtract.jsexport default function subtract (a, b) {return a - b
}################################
entry/entry1.js:import('../modules/add.js').then(add => {console.log('index', add(1, 2))
})################################
entry/entry2.js:import('../modules/subtract').then(subtract => {console.log('index', subtract(2, 1))
})npm run build，结果如下：
Hash: 68e0920fceede599eec9
Version: webpack 4.41.5
Time: 72ms
Built at: 2020/01/01 下午4:44:10Asset Size Chunks Chunk Names2.bundle.js 166 bytes 2 [emitted] 3.bundle.js 166 bytes 3 [emitted]
entry1.bundle.js 2.1 KiB 0 [emitted] entry1
entry2.bundle.js 2.1 KiB 1 [emitted] entry2
Entrypoint entry1 = entry1.bundle.js
Entrypoint entry2 = entry2.bundle.js
[0] ./src/entry/entry1.js 78 bytes {0} [built]
[1] ./src/entry/entry2.js 90 bytes {1} [built]
[2] ./src/modules/add.js 54 bytes {2} [built]
[3] ./src/modules/subtract.js 59 bytes {3} [built]
分析一下其中的打包结果：
- 2.bundle.js和3.bundle.js分别对应入口点entry1.js和entry2.js中的add.js和subtract.js。
2. demo_async2
################################
webpack.config.js:splitChunks.chunks设为'async'################################
modules/add.js:export default function add (a, b) {return a + b
}################################
modules/subtract.jsexport default function subtract (a, b) {return a - b
}################################
modules/module.jsimport add from './add'export default function () {console.log(add(3, 4) + 10)
}################################
entry/entry1.js:import('../modules/module.js').then(add => {console.log('index', add(1, 2))
})################################
entry/entry2.js:import('../modules/subtract').then(subtract => {console.log('index', subtract(2, 1))
})基于demo1，我们在entry1中按需引入module.js，module中引入了add.js。
npm run build，打包结果如下：
Hash: d291a90e6547b20a55e9
Version: webpack 4.41.5
Time: 83ms
Built at: 2020/01/01 下午4:49:23Asset Size Chunks Chunk Names2.bundle.js 141 bytes 2 [emitted] 3.bundle.js 166 bytes 3 [emitted]
entry1.bundle.js 2.1 KiB 0 [emitted] entry1
entry2.bundle.js 2.1 KiB 1 [emitted] entry2
Entrypoint entry1 = entry1.bundle.js
Entrypoint entry2 = entry2.bundle.js
[0] ./src/entry/entry1.js 78 bytes {0} [built]
[1] ./src/entry/entry2.js 90 bytes {1} [built]
[2] ./src/modules/subtract.js 59 bytes {3} [built]
[3] ./src/modules/module.js + 1 modules 139 bytes {2} [built]| ./src/modules/module.js 85 bytes [built]| ./src/modules/add.js 54 bytes [built]
打包后，我们可以在2.bundle.js中找到以下的这句：
console.log(3+4+10)
这跟initial场景下的demo2很像，即将module.js完全解析了出来。
3. demo_async3
################################
webpack.config.js:splitChunks.chunks设为'async'################################
modules/add.js:export default function add (a, b) {return a + b
}################################
modules/subtract.jsexport default function subtract (a, b) {return a - b
}################################
modules/module.jsimport add from './add'export default function () {console.log(add(3, 4) + 10)
}################################
entry/entry1.js:import('../modules/module.js').then(add => {console.log('index', add(1, 2))
})################################
entry/entry2.js:import('../modules/subtract').then(subtract => {console.log('index', subtract(2, 1))
})import('../modules/add').then(add => {console.log('add', add(10, 11))
})npm run build打包结果如下：
Hash: c66566e81e276d0faccb
Version: webpack 4.41.5
Time: 76ms
Built at: 2020/01/01 下午4:50:38Asset Size Chunks Chunk Names0.bundle.js 166 bytes 0 [emitted] 3.bundle.js 171 bytes 3 [emitted] 4.bundle.js 166 bytes 4 [emitted]
entry1.bundle.js 2.12 KiB 1 [emitted] entry1
entry2.bundle.js 2.17 KiB 2 [emitted] entry2
Entrypoint entry1 = entry1.bundle.js
Entrypoint entry2 = entry2.bundle.js
[0] ./src/entry/entry1.js 78 bytes {1} [built]
[1] ./src/entry/entry2.js 168 bytes {2} [built]
[2] ./src/modules/add.js 54 bytes {0} [built]
[3] ./src/modules/module.js 85 bytes {3} [built]
[4] ./src/modules/subtract.js 59 bytes {4} [built]
module.js被拆分成0.bundle.js（add.js部分）和3.bundle.js，4.bundle.js对应subtract.js。
4. demo_async4
################################
webpack.config.js:splitChunks.chunks设为'async'################################
modules/add.js:export default function add (a, b) {return a + b
}################################
modules/subtract.jsexport default function subtract (a, b) {return a - b
}################################
modules/module.jsimport add from './add'export default function () {console.log(add(3, 4) + 10)
}################################
modules/module2.jsimport add from './add'export default function () {console.log(add(5, 6) + 11)
}################################
entry/entry1.js:import('../modules/module.js').then(add => {console.log('index', add(1, 2))
})################################
entry/entry2.js:import('../modules/module2').then(add => {console.log('index', add(2, 1))
})npm run build打包后的结果如下：
Hash: b48649b8fd43369ca09d
Version: webpack 4.41.5
Time: 80ms
Built at: 2020/01/01 下午4:53:11Asset Size Chunks Chunk Names0.bundle.js 153 bytes 0 [emitted] 3.bundle.js 165 bytes 3 [emitted] 4.bundle.js 165 bytes 4 [emitted]
entry1.bundle.js 2.12 KiB 1 [emitted] entry1
entry2.bundle.js 2.12 KiB 2 [emitted] entry2
Entrypoint entry1 = entry1.bundle.js
Entrypoint entry2 = entry2.bundle.js
[0] ./src/entry/entry1.js 78 bytes {1} [built]
[1] ./src/entry/entry2.js 80 bytes {2} [built]
[2] ./src/modules/module.js 85 bytes {3} [built]
[3] ./src/modules/module2.js 85 bytes {4} [built]
[4] ./src/modules/add.js 54 bytes {0} [built]
3.bundle.js和4.bundle.js分别对应module.js和module2.js，两个模块中的add.js被单独打包为0.bundle.js。
5. async_demo5
################################
webpack.config.js:splitChunks.chunks设为'async'################################
modules/add.js:export default function add (a, b) {return a + b
}################################
modules/subtract.jsexport default function subtract (a, b) {return a - b
}################################
modules/module.jsimport add from './add'export default function () {console.log(add(3, 4) + 10)
}################################
modules/module2.jsexport default function () {import('../modules/add.js').then(add => {console.log('add', add(1, 2))})
}################################
entry/entry1.js:import('../modules/module.js').then(add => {console.log('index', add(1, 2))
})################################
entry/entry2.js:import('../modules/module2').then(add => {console.log(111)
})我们将add.js通过按需引入的方式在module.js中引入，打包后结果如下：
Hash: 48720b9b74d7e799b22d
Version: webpack 4.41.5
Time: 77ms
Built at: 2020/01/01 下午5:06:17Asset Size Chunks Chunk Names0.bundle.js 166 bytes 0 [emitted] 3.bundle.js 171 bytes 3 [emitted] 4.bundle.js 186 bytes 4 [emitted]
entry1.bundle.js 2.12 KiB 1 [emitted] entry1
entry2.bundle.js 2.09 KiB 2 [emitted] entry2
Entrypoint entry1 = entry1.bundle.js
Entrypoint entry2 = entry2.bundle.js
[0] ./src/entry/entry1.js 78 bytes {1} [built]
[1] ./src/entry/entry2.js 65 bytes {2} [built]
[2] ./src/modules/module.js 85 bytes {3} [built]
[3] ./src/modules/module2.js 113 bytes {4} [built]
0.bundle.js、3.bundle.js、4.bundle.js分别对应add.js、module.js、module2.js。
async: 基于上面的几个demo，我们发现在async场景下，webpack会对那些按需引入的模块进行优化。
all
all这个场景表示无论是按需引入的模块，还是直接引入的模块，都会被用于优化。
在给出这个场景的案例之前，我们先来看一个initial场景下混用按需引入的案例：
################################
webpack.config.js:splitChunks.chunks设为'initial'################################
modules/add.js:export default function add (a, b) {return a + b
}################################
modules/subtract.jsexport 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('../modules/subtract').then(subtract => {console.log('index', subtract(2, 1))
})npm run build打包后结果为：
Hash: f80258369b1c1e4ed339
Version: webpack 4.41.5
Time: 218ms
Built at: 2020/01/01 下午4:24:45Asset Size Chunks Chunk Names4.bundle.js 164 bytes 4 [emitted]
default~entry1.bundle.js 124 bytes 0 [emitted] default~entry1
default~entry2.bundle.js 145 bytes 1 [emitted] default~entry2entry1.bundle.js 1.47 KiB 2 [emitted] entry1entry2.bundle.js 2.22 KiB 3 [emitted] entry2
Entrypoint entry1 = default~entry1.bundle.js entry1.bundle.js
Entrypoint entry2 = default~entry2.bundle.js entry2.bundle.js
[0] ./src/modules/subtract.js 59 bytes {4} [built]
[1] ./src/entry/entry2.js 90 bytes {1} [built]
[2] ./src/entry/entry1.js + 1 modules 122 bytes {0} [built]| ./src/entry/entry1.js 68 bytes [built]| ./src/modules/add.js 54 bytes [built]
我们会发现entry2.js中按需引入的subtract被拆分为4.bundle.js和default~entry2.bundle.js，与async场景下不同的是，按需引入后执行的函数（.then的参数）会被单独打包进default~entry2.bundle.js。
然后我们将上述的代码场景改成all，再重新进行打包，结果为：
Hash: f80258369b1c1e4ed339
Version: webpack 4.41.5
Time: 237ms
Built at: 2020/01/01 下午5:20:48Asset Size Chunks Chunk Names4.bundle.js 164 bytes 4 [emitted]
default~entry1.bundle.js 124 bytes 0 [emitted] default~entry1
default~entry2.bundle.js 145 bytes 1 [emitted] default~entry2entry1.bundle.js 1.47 KiB 2 [emitted] entry1entry2.bundle.js 2.22 KiB 3 [emitted] entry2
Entrypoint entry1 = default~entry1.bundle.js entry1.bundle.js
Entrypoint entry2 = default~entry2.bundle.js entry2.bundle.js
[0] ./src/modules/subtract.js 59 bytes {4} [built]
[1] ./src/entry/entry2.js 90 bytes {1} [built]
[2] ./src/entry/entry1.js + 1 modules 122 bytes {0} [built]| ./src/entry/entry1.js 68 bytes [built]| ./src/modules/add.js 54 bytes [built]
按理来说，initial管理直接引入的包，async管理按需引入的包。但是，目前initial场景下，按需引入的包被拆分并单独打包出来，那么也就是说，不管怎样，按需加载的包一定会被单独打包出来（事实确实是这样，尽管项目中只按需加载了一次，并且minChunks设置大于1，也是如此）。
另外，我们发现上面的两种场景下，同样的代码，打包出来的配置是一样，这不仅会让我们有一个疑问，就是，initial和all到底有什么区别？
我们根据以下的步骤来分析一波：
- 我们以前面async的场景中的demo4的代码作为基础；
- 将chunks改为initial，打包结果如下：
Hash: f700f00520384eac7fc4
Version: webpack 4.41.5
Time: 82ms
Built at: 2020/01/01 下午8:02:09Asset Size Chunks Chunk Names4.bundle.js 257 bytes 4 [emitted] 5.bundle.js 257 bytes 5 [emitted]
default~entry1.bundle.js 146 bytes 0 [emitted] default~entry1
default~entry2.bundle.js 146 bytes 1 [emitted] default~entry2entry1.bundle.js 2.22 KiB 2 [emitted] entry1entry2.bundle.js 2.22 KiB 3 [emitted] entry2
Entrypoint entry1 = default~entry1.bundle.js entry1.bundle.js
Entrypoint entry2 = default~entry2.bundle.js entry2.bundle.js
[0] ./src/modules/module.js 85 bytes {4} [built]
[1] ./src/modules/module2.js 85 bytes {5} [built]
[2] ./src/entry/entry1.js 78 bytes {0} [built]
[3] ./src/entry/entry2.js 80 bytes {1} [built]
[4] ./src/modules/add.js 54 bytes {4} {5} [built]
4.bundle.js和5.bundle.js分别对应module.js和module2.js，两个模块中的add.js在4.bundle.js和5.bundle.js都被完全解析，没有被分离出去。而default~entry1.bundle.js和default~entry2.bundle.js则分别对应module.js和module2.js两个模块加载完后调用的方法（.then中的参数，这个在前面也提到过）。
所以，这里已经很明显了，针对initial和async两种场景，initial场景下不能将按需引入的模块中引入的模块进行拆解，而async场景下是可以的。而同样的，其实async场景不能拆分直接引入的模块。
你也可以尝试在initial场景下对某个模块引入两次，一次为按需引入，一次为直接引入，你会发现，这个模块将会被打包两次，而不是单独打包一次作为共享块。
- 接着我们将chunks改成all试试，看看会有怎样的打包结果：
Hash: 02fe278419997010e22d
Version: webpack 4.41.5
Time: 228ms
Built at: 2020/01/01 下午8:24:56Asset Size Chunks Chunk Names0.bundle.js 153 bytes 0 [emitted] 5.bundle.js 163 bytes 5 [emitted] 6.bundle.js 164 bytes 6 [emitted]
default~entry1.bundle.js 168 bytes 1 [emitted] default~entry1
default~entry2.bundle.js 168 bytes 2 [emitted] default~entry2entry1.bundle.js 2.22 KiB 3 [emitted] entry1entry2.bundle.js 2.22 KiB 4 [emitted] entry2
Entrypoint entry1 = default~entry1.bundle.js entry1.bundle.js
Entrypoint entry2 = default~entry2.bundle.js entry2.bundle.js
[0] ./src/modules/module.js 85 bytes {5} [built]
[1] ./src/modules/module2.js 85 bytes {6} [built]
[2] ./src/entry/entry1.js 78 bytes {1} [built]
[3] ./src/entry/entry2.js 80 bytes {2} [built]
[4] ./src/modules/add.js 54 bytes {0} [built]
我们会发现，结果是结合initial和async两种场景的特点，即：按需加载后执行的方法被单独打包、按需加载的模块中引入的模块会被单独打包出来。
到目前为止，想必三种场景下的理解已经差不多了。
Function
最后，splitChunk.chunks还可以是一个函数，这个函数返回一个Boolean型，用来标识chunk是否可以被打包出来。（关于chunk是什么，或者怎样理解，请浏览我的另一篇文章：https://blog.csdn.net/YaoDeBiAn/article/details/103570693）
比如：
module.exports = {//...optimization: {splitChunks: {chunks (chunk) {// exclude `my-excluded-chunk`return chunk.name !== 'my-excluded-chunk'}}}
}
上述函数表示webpack的所有chunk中，除了chunk名为my-excluded-chunk的，其他的chunk都会被打包出来。
last（最后）
非常感谢您能阅读完这篇文章，您的阅读是我不断前进的动力。如果上述内容或许有些错误或者有些个人理解比较偏离实际，还望指出，谢谢！！！对于上面所述，有什么新的观点或发现有什么错误，希望您能指出。
最后，附上个人常逛的社交平台：
知乎：https://www.zhihu.com/people/bi-an-yao-91/activities
csdn：https://blog.csdn.net/YaoDeBiAn
github: https://github.com/yaodebian个人目前能力有限，并没有自主构建一个社区的能力，如有任何问题或想法与我沟通，请通过上述某个平台联系我，谢谢！！！
webpack4之简单分析splitChunk.chunks几种情况：initial、async、all，以及function (chunk)相关推荐
- 简单分析几十个游戏案例
文章目录 一. 介绍 二. 影响游戏体验的因素 三. 游戏能爆火的因素 1.影响游戏爆火因素的排名 2.玩游戏的两种经典心理 3.经典案例分析 Qq农场 植物大战僵尸 水果忍者 召唤神龙 羊了个羊 4 ...
- 几十款游戏的简单分析
文章目录 一. 介绍 二. 影响游戏体验的因素 三. 游戏能爆火的因素 1.影响游戏爆火因素的排名 2.玩游戏的两种经典心理 3.经典案例分析 Qq农场 植物大战僵尸 水果忍者 召唤神龙 羊了个羊 4 ...
- 即日起，公转私这8种情况是合法的！
你知道公户转私户,哪些是被允许的吗? 现在线上支付方式已十分普及,有些企业图方便,在购物.交易等方面不通过对公账户转账,直接把合同价款通过微信.支付宝转账的形式转给实际负责人,这种行为存在较大的风险, ...
- 直立车模控制中三种滤波算法简单分析（清华卓晴）
摘自:https://mp.weixin.qq.com/s/WbCh0NFAnsf9y2blQenf7g 让我想起余义的一篇文章也是说到平衡车有三种滤波,我想和卓晴说的是一样的吧. https://b ...
- 万用表怎么测量电池容量_电工知识：用万用表怎么测量电车电池的好坏？简单分析5种耗电...
有朋友私信问我,万用表怎么测量电动车的电池的好坏,首先我们要确定是不是电池的问题. 要确定电池是否失效也就是损坏,在这里我们要排除目测的几种情况,比如说鼓包了,外壳烂了导致漏液等, 1,充满电后很快就 ...
- x264源代码简单分析：编码器主干部分-2
===================================================== H.264源代码分析文章列表: [编码 - x264] x264源代码简单分析:概述 x26 ...
- FFmpeg的H.264解码器源代码简单分析：解码器主干部分
===================================================== H.264源代码分析文章列表: [编码 - x264] x264源代码简单分析:概述 x26 ...
- FFmpeg源代码简单分析：结构体成员管理系统-AVClass
===================================================== FFmpeg的库函数源代码分析文章列表: [架构图] FFmpeg源代码结构图 - 解码 F ...
- FFmpeg源代码简单分析-其他-AVClass和AVoption
参考链接 FFmpeg源代码简单分析:结构体成员管理系统-AVClass_雷霄骅的博客-CSDN博客 FFmpeg源代码简单分析:结构体成员管理系统-AVOption_雷霄骅的博客-CSDN博客 概述 ...
最新文章
- mysql事务处理用法与实例详解
- linux中awd的详细使用方法,求教awdflash的使用方法,详细些,我是初學者。
- 3----结构体中使用柔性数组
- 隔壁大爷都会网络布线啦、搞起来搞起来
- beta冲刺总结那周余嘉熊掌将得队
- SqlServer与.NET的数据类型映射关系图
- (笔记)Mysql命令drop database：删除数据库
- pd调节规律_pid算法原理及调整规律解析
- NOI入门级：算法之动态规划
- Python报错can only concatenate str (not “int“) to str
- [转]Microsoft SQL Server Management Studio Express 使用SQL验证登录sa
- mac音频剪辑合并软件哪款比较好用，求推荐
- Python实现繁体字和简体字的相互转换
- [HTML]北京邮电大学信息与通信工程学院选课参考指南
- RTI DDS 01
- jQuery UI框架
- 清空数据库所有表中的数据
- 如何恢复误删除的微信聊天记录？看完这个技巧分享保证你一清二楚！
- jQuery过滤、遍历同级元素、向上遍历、向下遍历
- 使用conda安装python包