webpack学习之路（九）SplitChunksPlugin配置

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: 缓存组的规则，表示符合条件的的放入当前缓存组，值能够是function、boolean、string、RegExp，默认为空；
  • 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'
    }
}
复制代码

依然是上面文件

打包以后咱们能够发现， react和 react-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.