详解webpack4之splitchunksPlugin代码包分拆 - 图1
splitChunks 按照引用频率，分包大小以及包请求数三个维度来进行分包。

splitChunks

chunks:

  • all: 不管文件是动态还是非动态载入，统一将文件分离。当页面首次载入会引入所有的包
  • async： 将异步加载的文件分离，首次一般不引入，到需要异步引入的组件才会引入。
  • initial：将异步和非异步的文件分离，如果一个文件被异步引入也被非异步引入，那它会被打包两次（注意和all区别），用于分离页面首次需要加载的包。

minSize: 文件最小打包体积，单位byte，默认30000
比如说某个项目下有三个入口文件，a.js和b.js和c.js都是100byte，当我们将minSize设置为301,那么webpack就会将他们打包成一个包，不会将他们拆分成为多个包。
比如说某个项目下有三个入口文件，a.js和b.js和c.js都是100byte，当我们将minSize设置为301,那么webpack就会将他们打包成一个包，不会将他们拆分成为多个包。
automaticNameDelimiter： 连接符
假设我们生成了一个公用文件名字叫vendor，a.js,和b.js都依赖他，并且我们设置的连接符是”~”那么，最终生成的就是 vendor~a~b.js
maxInitialRequests 入口点处的最大并行请求数，默认为3
如果我们设置为1，那么每个入口文件就只会打包成为一个文件
maxAsyncRequests 最大异步请求数量，默认5
如果我们设置为1，那么每个入口文件就只会打包成为一个文件
优先级关系

maxInitialRequest / maxAsyncRequests cacheGroups 定制分割包的规则
test可以配置正则和写入function作为打包规则。其他属性均可继承splitChunks，这里必须说一下 priority，设置包的打包优先级，非常重要！
minChunks
最少引入的次数

说明

  • 其实当我们进入网站，一般第一步都是进入一个登陆页面，需要的只是项目的基本框架代码，例如react,react-dom.antd等，我们可以用all(或者initial)将它们单独打包，作为首页必须载入的包
  • 我们打包的公共包，首次加载页面的时候，只想把同步加载的加载进来，所以需要一个同步的Common包

  • 像echarts,d3,以及一些src下面一些异步加载的包，将它们利用async将打包成一个独立异步加载包

    1. cacheGroups: {
    2. vendors: { // 项目基本框架等
    3.  chunks: 'all',
    4.  test: /(react|react-dom|react-dom-router|babel-polyfill|mobx)/,
    5.  priority: 100,
    6.  name: 'vendors',
    7. },
    8. 'async-commons': { // 异步加载公共包、组件等
    9.  chunks: 'async',
    10.  minChunks: 2,
    11.  name: 'async-commons',
    12.  priority: 90,
    13. },
    14. commons: { // 其他同步加载公共包
    15.  chunks: 'all',
    16.  minChunks: 2,
    17.  name: 'commons',
    18.  priority: 80,
    19. },
    20. }

    这次webpack帮我们打出来的包主要有：

  • async-common:是两个入口文件都异步加载的三方包和利用react-loader做的懒加载代码，有echarts,d3等

  • vendors: 包括react,react-dom,antd等
  • commons: 引用超过两次的同步代码

假如：

  • async-common中包含了自己写的src组件和第三方组件
  • async-common中比较大是echarts，zrender(echarts引入)和d3，结合项目来说，只有部分页面我们需要echarts（d3同），所以我们可以考虑将d3和echarts这两个比较大的包提取出来，等到某个页面需要的时候，再让其异步加载，这样就大大减小了async-common的体积了。
    1. cacheGroups: {
    2. vendors: { // 基本框架
    3.  chunks: 'all',
    4.  test: /(react|react-dom|react-dom-router|babel-polyfill|mobx)/,
    5.  priority: 100,
    6.  name: 'vendors',
    7. },
    8. d3Venodr: { // 将体积较大的d3单独提取包，指定页面需要的时候再异步加载
    9.  test: /d3/,
    10.  priority: 100, // 设置高于async-commons，避免打包到async-common中
    11.  name: 'd3Venodr',
    12.  chunks: 'async'
    13. },
    14. echartsVenodr: { // 异步加载echarts包
    15.  test: /(echarts|zrender)/,
    16.  priority: 100, // 高于async-commons优先级
    17.  name: 'echartsVenodr',
    18.  chunks: 'async'
    19. },
    20. 'async-commons': { // 其余异步加载包
    21.  chunks: 'async',
    22.  minChunks: 2,
    23.  name: 'async-commons',
    24.  priority: 90,
    25. },
    26. commons: { // 其余同步加载包
    27.  chunks: 'all',
    28.  minChunks: 2,
    29.  name: 'commons',
    30.  priority: 80,
    31. },
    32. }