webpack之SplitChunksPlugin

SplitChunksPlugin
代码分割生成的如2.js，是自动生成的名字，如何让代码分割能生成可以识别的自定义的名字呢

使用magic comment修改chunkname

这写法的意思是异步引入一个lodash库，当代码分割的时候，将这个打包分割出来的库起chunkName（文件名）为lodash

再次打包，发现并没有生效，这是因为我们之前使用了dynamic-import-webpack,这是非官方插件，非官方插件不支持magic comment写法，因此我们需要替换这个插件

因此我们需要替换这个插件为官方插件。
在package.json中去掉

在.babelrc中去掉

将dynamic-import-webpack使替换为官方的插件
npm i @babel/plugin-syntax-dynamic-import -D
修改.babelrc

重新打包，发现magic comment生效了，但是lodash打包却变成了，verders-lodash.js，如何让其就是叫lodash.js呢？

查看webpack官方文档，找到SplitChunksPlugin,发现关于splitChunk配置很多

我们先暂时将配置中的splitChunks这样配置，重新打包，发现代码分割打包的文件名变成lodash.js了

备注：splitChunks，各个配置项中，如果不配置，将会是默认配置

接下来我们将详细介绍splitChunks的各个配置属性
①splitChunks.chunks 其有async（只对异步代码生效），initial（只对同步代码生效），all（对异步代码和同步代码都生效）
测试：
将chunks设为async,同时CodeSplitting.js注释异步引入代码，放开同步引入代码

打包，发现无lodash.js，同步引入的代码没有做代码分割

我们再将chunks设为all （异步引入模块和同步引入模块都会代码分割）,再次打包

发现还是没有lodash.js，没有执行代码分割

这是因为cacheGroups需要配置一下

再次打包，出现了vendors~main.js，其将lodash打包进了这个文件中，说明执行了代码分割

叫verdors-main.js意思是代码分割，将lodash分到vendors这个组，同时它被引入的入口文件打包后的chunkName为main.js

我们还可以配置filename自由设置代码分割打包输出的文件名

备注：Chunks和cacheGroups是配合着用的

②minSize 大于多少字节，才会执行代码分割（代码分割太多会造成http请求次数过多，所以需要设置minSize）

③cacheGroups里的default组，如果设置false,那么非node_modules里的（不符合vendors组条件的）都不知道如何代码分割了，所以应该配置一下

再次打包，生成了default~main.js，意思是代码分割，将lodash分到default这个组，同时它被引入的入口文件打包后的chunkName为main.js
其也可以设置输出的文件名

④maxSize，如果超过这个大小，会对代码进行更细的代码分割

⑤minChunks，当一个模块被至少多少个chunk(打包生成 的js文件)使用过才会进行代码分割

⑥maxAsyncRequests，同时加载的模块数是多少个（即打包前5个模块会做代码分割，超过5个模块做了代码分割就不再做代码分割（减少http请求次数））

⑦maxInitialRequests,入口文件前多少个做代码分割，超过3个的入口文件就不再做代码分割（减少http请求次数））

⑧automaticNameDelimiter，文件生成的时候文件名连接符,如vendors~main.js

⑨name: true,即cacheGroups里的文件名有效

10)cacheGroups,（缓存组）碰到代码分割不急着打包，把符合vendors的统一打包到一起，符合default的统一打包到一起

11)priarity代表优先级，即如果一个模块同时符合default和vendors，vendors的优先级更高，就优先将模块打包到vendors里

12)reuseExistingChunk

如果a又使用了b,正常来说a打包进了vendors里，b也会打包进vendors里，但是打包b的时候发现b之前已经被引入过且被打包进了commin里，ReuseExistingChunk：true,b就不会再次打包进vendors里，而是直接使用
ReuseExistingChunk：true不重复打包，碰到已打包过的模块就直接使用