官网

optimization.splitChunks

optimization.splitChunks 配置对象代表了 splitChunksPlugin 的默认行为。

  1. module.exports = {
  2.   //...
  3.   optimization: {
  4.     splitChunks: {
  5.       chunks: 'async', // 针对异步代码分割
  6.       minSize: 20000,  // 代码分割的阈值
  7.       minRemainingSize: 0,
  8.       minChunks: 1,
  9.       maxAsyncRequests: 30,
  10.       maxInitialRequests: 30,
  11.       enforceSizeThreshold: 50000,
  12.       cacheGroups: {
  13.         defaultVendors: {
  14.           test: /[\\/]node_modules[\\/]/,
  15.           priority: -10,
  16.           reuseExistingChunk: true,
  17.         },
  18.         default: {
  19.           minChunks: 2,
  20.           priority: -20,
  21.           reuseExistingChunk: true,
  22.         },
  23.       },
  24.     },
  25.   },
  26. };

配置参数详解

针对异步/同步代码分割 - chunks

作用： 这表明将选择哪些chunks进行优化。
用法：string = ‘async’ function (chunk)

  • 当提供一个字符串，值可以为 ‘all‘，’async‘（默认值）和 initial。

    1.  - 'async'（默认值）：仅针对**异步代码**分割；（针对异步引入的库进行分离）<br />       - 'initial'：仅对同步引入的库进行分离<br />       - 'all'：针对**所有的代码**分割，包括同步代码和异步代码（注意！！！如果是同步代码分割的话，还需要配置 cacheGroups配置项，把分割的部分分组打包，如下写法）（**推荐！**）
    1. module.exports = {
    2. // ...
    3. optimization: {
    4.   splitChunks: {
    5.     cacheGroups: {
    6.       vendors:{
    7.         test:/[\\/]node_modules[\\/]/,
    8.         priority:-10,
    9.         filename:'vendros.js'
    10.       },
    11.       default:false      
    12.     }
    13.   }
    14. }
    15. }

    解释：引入lodash库时，会先检测是否在node_modules中，如果在就会单独打包到vendors组中，同时bundle名统一为vendors.js

minSize

作用：当引入的包大于minSize值的时候，才会做代码分割；否则就不会做。

  1. minSize: 30000 // 引入的模块或库大于30KB才会做代码分割，如果小于就不做代码分割

minChunks

lodash库很大，所以会帮你做代码分割。一般这个配置项的大小不用变。

  1. minChunks：1 //至少被引入1次才会做代码分割

name

作用：设置拆包的名称。
name值

  • 可以设置一个名称；
  • 也可以设置为false。如果设置为 false 的话，需要在cacheGroups 中设置名称。

cacheGroups

作用：用于对拆分的包进行分组。比如一个lodash在拆分之后，并不会立即打包，而是会等到有没有其他符合规则的包一起来打包；
cacheGroups中的配置

  • test属性：匹配符合规则的包；
  • name属性：拆分包的name属性；

  • filename：拆分包的名称，可以自己试用placeholder属性。

    1. cacheGroups:{
    2.   vendors:{
    3.       test:/[\\/]node_modules[\\/]/,
    4.       priority:-10,
    5.       filename:'vendros.js'
    6.   },
    7.   default:{
    8.       priority:-20,
    9.       resueExistingChunk:true,
    10.       filename:common.js
    11.   }
    12. }

    决定分割代码放到哪个JS文件里面去，通过test进行索引，然后filename进行命名。
    这个缓存组的概念其实就是当你引入不同库，例如jquery和lodash时候，他们会根据规则选择打包到哪一个JS文件里面，形成一组。

  • priority：代码优先级，如果某一个模块执行test后同时符合多个组，那么谁的优先级高，就放到哪个组里面~

  • reuseExistingChunk: 会判断某一个模块是否已经加载到别的组了，如果是那么就会直接复用，不会再次引入