webpack学习之路(九)SplitChunksPlugin配置

2,637 阅读3分钟

webapck v4开始,移除了CommonsChunkPlugin,转而使用SplitChunksPlugin作为新的代码块分割插件。

CommonsChunkPlugin主要是用来提取第三方库和公共模块,优化加载。SplitChunksPlugin同样也是这个作用。

SplitChunksPlugin是开箱即用的,这对大多数开发者来说非常友好。

拆分条件

webpack将根据以下条件自动拆分块:

  • 可以共享的模块或来自node_modules文件夹的模块
  • 超过30kb的块(在min + gz之前)
  • 根据需要加载块时的并行请求数<=5
  • 初始页面加载时的最大并行请求数<=3

参数列表

SplitChunksPlugin的参数是非常多的

optimization: {
    splitChunks: {
      chunks: 'async',
      minSize: 30000,
      maxSize: 0,
      minChunks: 1,
      maxAsyncRequests: 5,
      maxInitialRequests: 3,
      automaticNameDelimiter: '~',
      automaticNameMaxLength: 30,
      name: true,
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true
        }
      }
    }
}
  • chunks: 打包的模块是异步、同步、还是全部,对应的值为async initial all,也可以写成函数形式,自定义打包
  • minSize: 抽离公共包的最小size
  • maxSize: 最大size
  • minChunks: 最少使用次数
  • maxAsyncRequests: 最大异步请求数
  • maxInitialRequests: 最大同步请求数
  • automaticNameDelimiter: 默认情况下,webpack将使用块的名称和原始文件名称生成文件名(例如vendors~main.js)。此选项允许您指定用于生成的名称的分隔符。
  • automaticNameMaxLength: 允许设置由SplitChunksPlugin生成的块的名称字符的最大值
  • maxAsyncRequests: 按需加载时最大并行请求数
  • maxAsyncRequests: 入口处最大请求并行数
  • name: 生成块的名称,为true时,将根据块和缓存组密钥自动生成名称
  • cacheGroups: 缓存组可以继承或者覆盖上面的选项,但是priority test reuseExistingChunk 只能在这里设置。如果不想使用缓存组,可以直接置为false
    • priority: 表示缓存的优先级;
    • test: 缓存组的规则,表示符合条件的的放入当前缓存组,值可以是functionbooleanstringRegExp,默认为空;
    • reuseExistingChunk: 表示可以使用已经存在的块,即如果满足条件的块已经存在就使用已有的,不再创建一个新的块。

示例

1.默认打包chunks: async

webpack.config.js

optimization: {
    splitChunks: {
        chunks: 'initial'
    }
}

a.js

import 'react'

b.js

import(/* webpackChunkName: "async-lodash" */ 'lodash')
import 'react-dom'

我们a.js同步引入了react,在b.js同步引入了react-dom,异步引入了lodash打包之后我们可以发现,同步引入原封不动都被打包到了main.js,而异步引入的lodash被单独独立成了一个模块。

所以SplitChunksPlugin的默认打包是异步打包。

2.chunks: initial

webpack.config.js

optimization: {
    splitChunks: {
        chunks: 'initial',
        filename: 'vendor.js'
    }
}

依然是上面文件

打包之后我们可以发现,reactreact-dom都单独打包进了vendor.js。异步依然是单独打包优化。

initial这个选项就是将所有来自node_modules的模块分配到一个叫vendors的缓存组。

3.chunks: all

webpack.config.js

optimization: {
    splitChunks: {
        chunks: 'all'
    }
}

all这个选项也会将所有来自node_modules的模块分配到一个叫vendors的缓存组。

这就很尴尬了,两个选项打包出来一样,不甚理解根本区别在哪?请精通的大佬赐教~

4.minChunks webpack.config.js

optimization: {
    splitChunks: {
        chunks: 'all',
        minChunks: 2
    }
}

a.js

import 'react'

b.js

import './a'

因为只被调用了一次,不符合要求,所以react并没有单独打包成文件

5.cacheGroup

webpack.config.js

optimization: {
    splitChunks: {
        chunks: 'all',
        cacheGroups: {
            test: /lodash/
          }
    }
}

a.js

import 'lodash'

b.js

import 'react'

因为test只匹配了lodash,所以react并没有抽离出来。


链接文章

webpack学习之路(八)压缩代码

webpack学习之路(七)source map

webpack学习之路(六)hash/chunkHash/contentHash

webpack学习之路(五)loader初识及常用loader介绍

webpack学习之路(四)webpack-hot-middleware实现热更新

webpack学习之路(三)webpack-dev-middleware

webpack学习之路(二)webpack-dev-server实现热更新

webpack学习之路(一)基础配置

I am moving forward.