webpack4.x版本splitChunksPlugin的配置项详解与实际应用场景

在工程化地使用webpack时，公共代码抽离是不可或缺的，4.x版本以后，commonsChunkPlugin已经被去掉，splitChunksPlugins登上舞台，而且优化了不少配置选项，具体可见官方文档，这里不作过多说明。

在使用splitChunksPlugins以前，首先要知道splitChunksPlugins是webpack主模块中的一个细分模块，无需npm引入。功能上，splitChunksPlugins只能用于如何抽离公用的代码，也就是抽离公用代码的规则，要记住，除了这个功能以外，splitChunksPlugins再无其余功能（明白这点很重要，至少我本身在这点上被坑到过）。

首先先说每一个配置项的做用：

*在此说明下， 下文中说到的块即chunks，也就是js文件

1.  minSize 

 分离前的最小块文件大小，单位为字节

2. minChunks

分离前，该块被引入的次数

3.maxInitialRequests

一个入口文件能够并行加载的最大文件数量

4.maxAsyncRequests

内层文件（第二层）按需加载时最大的并行加载数量

5.name

用以控制分离后代码块的命名，当存在匹配的缓存组（后面会说到）时，命名使用缓存组中的name值，若不存在则为  [来源]~[入口的key值].js  的格式

6.automaticNameDelimiter

修改上文中的 “~” ,  若改成： “-” 则分离后的js默认命名规则为 [来源]-[入口的key值].js

7.test

用于规定缓存组匹配的文件位置，test: /node_modules/  即为匹配相应文件夹下的模块

8.cacheGroups

名字叫作缓存组，其实就是存放分离代码块的规则的对象，叫作cacheGroup的缘由是webpack会将规则放置在cache流中，为对应的块文件匹配对应的流，从而生成分离后的块。

cacheGroup中priority 为分离规则的优先级，优先级越高，则优先匹配。

9.chunks

匹配的块的类型：initial（初始块），async（按需加载的异步块），all（全部块）

10.priority

这个是最重要的，即使是全部配置项都写好了，优先级不够，或者优先级设置不正确，也得不到相应的结果。当须要优先匹配缓存组的规则时，priority须要设置为正数，当须要优先匹配默认设置时，缓存组需设置为负数，0为二者的分界点。

splitChunks的经常使用配置：

optimization: {
        splitChunks: {
            cacheGroups:{
                // 好比你要单独把jq之类的官方库文件打包到一块儿，就可使用这个缓存组，如想具体到库文件（jq）为例，就可把test写到具体目录下
                vendor: {
                    test: /node_modules/,
                    name: "vendor",
                    priority: 10,
                    enforce: true
                },
                // 这里定义的是在分离前被引用过两次的文件，将其一同打包到common.js中，最小为30K
                common: {
                    name: "common",
                    minChunks: 2,
                    minSize: 30000
                }
                
            },
            chunks:"all",
            minSize: 40000
        }
    }

4.x属于比较新的版本，官方文档有些细节说的不是很清楚，只能本身摸索。若有疑问，欢迎指教。