复习webpack4之splitChunksPlugin-优快云博客

本文重新整理webpack4知识点，重点介绍官方推荐的splitChunksPlugin插件。详细解读其配置项，如chunks决定代码分割对同步或异步代码的生效范围，minSize规定库/包大于30kb才分割等，还提及缓存组、优先级等内容，助于深入理解webpack4打包原理。

之前学习过webpack3的知识，但是webpack4升级后还是有很多变动的，所以这次重新整理一下webpack4的知识点，方便以后复习。

这次学习webpack4不仅仅要会配置，记住核心API，最好还要理解一下webpack更深层次的知识，比如打包原理等等，所以可能会省略一些比较基础的内容，但是希望我可以通过此次学习掌握webpack，更好地应对以后的工作。

1.splitChunksPlugin的配置项

上篇文章我们尝试了动态引入库进行代码分割，但是上篇文章的插件不是官方推荐的插件，我们现在改用官方推荐的插件。

cnpm install @babel/plugin-syntax-dynamic-import -D

.babelrc中增加插件

而且我们可以给打包出的0.js文件改名字。

这样打包出的文件名字就已经成功的修改了。

如果我们不想要vendor~这个前缀，需要去修改一个配置。

这样打包出的文件就只叫lodash了。

所以我们可以通过改变配置项来改变打包后的结果，而splitChunksPlugin还有很多不同的配置项，我们接下来研究一下各个配置项的意思。

2 解读配置项

optimization: {
    splitChunks: {
        chunks: "async",
        minSize: 30000,
        minChunks: 1,
        maxAsyncRequests: 5,
        maxInitialRequests: 3,
        automaticNameDelimiter: '~',
        name: true,
        cacheGroups: {
            vendors: {
                test: /[\\/]node_modules[\\/]/,
                priority: -10
            },
            default: {
                minChunks: 2,
                priority: -20,
                reuseExistingChunk: true
            }
    }
}
复制代码

我们依次解读配置项的含义：

2.1 chunks: "async"

chunks: "async"指的是做代码分割时，只对异步代码生效。

chunks: "initial"只对同步代码生效。

如果想对同步异步都生效，首先要把chunks配置成"all"，然后webpack会进行到cacheGroups的vendors中,检测引入的库是否在node_modules中，如果检测成功，就会单独把引入的代码打包到vendor中。之前的例子打包成功的文件是vendors~main.js，意思是分割的代码符合cacheGroups中vendors的配置，而他的入口文件是main.js，所以叫vendors~main.js。如果想改名字，就只vendors中加一个配置filename: "vendors.js"。

2.2 minSize: 30000

如果引入的库/包，大于30kb的话才会做代码分割，如果小于30kb就不会进行代码分割。

但是如果引入的库/包没有在node_modules，webpack就会用cacheGroups中default的配置，打包的文件名就叫default~main.js，也可以通过增加filename来改变文件名。

2.3 maxSize: 0

maxSize可配置也可以不用配置，现在配置成maxSize: 50000，如果打包的代码体积是1MB，webpack会尝试二次分割，把打包的文件尽量分成20份。（一般不配置，了解即可）

2.4 minChunks: 1

当一个模块被用了至少n次时才会进行代码分割。

2.5 maxAsyncRequests: 5

同时加载模块数最多是5个，webpack遇到这个参数时，代码分割到5个文件时，就不进行分割了，超过的代码也不进行代码分割。比如引了10个库，打包5个后，剩下5个不进行代码分割。（默认为5就可以）

2.6 maxInitialRequests: 3

入口文件进行加载的时候，最多分割三个文件。（默认为3就可以）

2.7 automaticNameDelimiter: '~'

默认文件名字的连接符。

2.8 name: true

使cacheGroups中文件名生效。（一般不会改变）

2.9 cacheGroups（缓存组）

在2.1中已经解读过了，当chunk和minChunks生效时进行匹配的规则。叫缓存组的原因，比如我们引入了jquery和lodash，打包jquery的时候先不着急生成文件，先放到cacheGroups中缓存着，打包lodash的时候，也缓存中cacheGroups中，当最后把符合文件都缓存好之后，再一起打包生成vendors文件。