Webpack4分包插件splitChunks简析

webpack4移除了commonChunksPlugin，改用splitChunksPlugin,在升级的过程中踩了一些小坑，在此记录下。

基本配置

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

这是官网提供的基本配置，一些参数的含义如下：

• chunks: webapck的splitChunks默认只对按需加载的模块起作用,可通过改变该属性修改默认行为，可选的值：'async': 异步，即按需加载的模块。'all': 所有的模块，包括同步和异步。'initial': 初始加载的模块即同步模块。
• minSize: module超过该大小才会被split，默认30000。
• maxSize: 默认值0，代表不限制。
• minChunks: module至少被多少chunk引用才会生成新chunk。
• priority: 优先级，一个module可能被多个chunk引用，会被打包到优先级高的chunk里。
  

其中主要是minChunks的概念困扰了我好久，下面是踩坑流程。

一个demo

主要文件如下：
main.js

import a from './a.js'
import b from './b.js'
复制代码

a.js

import c from './other/c.js'
export  const a = 'a'
复制代码

b.js

import c from './other/c.js'
export  const b = 'b'
复制代码

c.js

export  const c = 'c'
复制代码

webpack.config.js

module.exports = {
  //...
  optimization: {
        splitChunks: {
            chunks: 'all',
            minSize: 10,
            minChunks: 2,
            automaticNameDelimiter: '~',
            name: true,
            cacheGroups: {
                common: {
                    priority: 0,
                    minChunks: 2,
                    minSize: 10,
                }
            }
        },
        minimize: false
    },
};
复制代码

这里我预期的结果是会打出两个包，c.js会被单独打出来放在common中，因为他被a和b同时引用而且设置了minChunks=2,实际上的结果是介样滴：

只生成了一个包，所有的module都包含在内，想不出原因的我决定试试动态引用，修改main.js

import(/* webpackChunkName: 'a' */'./a.js')
import(/* webpackChunkName: 'b' */'./b.js')
复制代码

再看下打包结果：

可以看到a、b、c都被单独打包了，这里其实可以看出一些问题了，我也就不卖关子了，主要就是对 minChunks的理解，记住，是 minChunks不是 minModules,c被a和b同时引用是被两个module同时引用，不是chunk，可以看第一次打包结果，最终c也就是只被main这一个chunk引用，所以不会单独分包。可以做一个测试，将a和b放在同一个chunk里，修改main.js

import(/* webpackChunkName: 'same' */'./a.js')
import(/* webpackChunkName: 'same' */'./b.js')
复制代码

可以看到，因为a和b在同一个chunk中，所以c也就是只被 same这一个chunk引用，不会单独分包，直接放在了 same这个chunk里。有人可能说：我不想把a、b单独分包，就放在main这个包里，只将c单独打出来。这也是可以做到的，配置如下：

splitChunks: {
            chunks: 'all',
            minSize: 10,
            minChunks: 2,
            automaticNameDelimiter: '~',
            name: true,
            cacheGroups: {
                common: {
                    test: /src\/other/,
                    enforce: true
                }
            }
        },
复制代码

这个test是限制范围，enforce就是告诉webpack强制分包，官网描述：

打包结果如下：

最后说两句

webpack还是很重要的，前端想要进阶是逃不了这个坎的，自己接触webpack也有段时间了，但是目前也仅仅是会一些配置，谈不上掌握。关于webpack的学习资料也看过一些，但是感觉有些杂乱，大部分也只是介绍一些配置，很少看到质量特别高的文章（也许是我搜索的姿势不对？），如果大家有特别棒的教程欢迎评论区留言哦！我先带个头：

• 慕课网webpack教程，这应该是我看过的质量最高的webpack实战教程了。
• 滴滴出的webpack系列教程，滴滴的美女大佬出的教程，文章质量特别高，目前已更两篇。