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

个人维护的 webpack@latest 多页脚手架2.X已经发布，喜欢请给星，详见： https://github.com/pomelott/webpack-multi-page-cli

 

在工程化地使用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属于比较新的版本，官方文档有些细节说的不是很清楚，只能自己摸索。如有疑问，欢迎指教。