复习webpack4之splitChunksPlugin

以前学习过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文件。

2.10 cacheGroups中的priority （优先级）

打包lodash的时候，既符合vendors又符合default，就要看哪个priority的值更大，哪个值大就打包到哪个文件中。

2.11 reuseExistingChunk: true

打包过程当中，若是一个模块已经被打包过了，就会忽略这个模块，去使用以前已经打包过的代码。

除了这些配置项，其实还有不少配置项，若是须要就去查阅文档就能够了。