寫在前面

前面寫了一篇有關(guān)webpack4的不完全升級(jí)指南以及在webpack3.x遷移的時(shí)候遇到的問題，有興許可以看一下。

0. 參數(shù)介紹

先對(duì)參數(shù)有一個(gè)大概的認(rèn)識(shí)，雖然擼了很多遍官方的更新文檔，但是還是去參看了一下新的wbepack源碼，下面是各種參數(shù)及含義：

1. chunks: 表示顯示塊的范圍，有三個(gè)可選值：initial(初始?jí)K)、async(按需加載塊)、all(全部塊)，默認(rèn)為all;
2. minSize: 表示在壓縮前的最小模塊大小，默認(rèn)為0；
3. minChunks: 表示被引用次數(shù)，默認(rèn)為1；
4. maxAsyncRequests: 最大的按需(異步)加載次數(shù)，默認(rèn)為1；
5. maxInitialRequests: 最大的初始化加載次數(shù)，默認(rèn)為1；
6. name: 拆分出來塊的名字(Chunk Names)，默認(rèn)由塊名和hash值自動(dòng)生成；
7. cacheGroups: 緩存組。

對(duì)于緩存組是一個(gè)對(duì)象，處了可以有上面的chunks、minSize、minChunks、maxAsyncRequests、maxInitialRequests、name外，還有其他的一些參數(shù)：

如果不在緩存組中重新賦值，緩存組默認(rèn)繼承上面的選項(xiàng)，但是還有一些參數(shù)是必須在緩存組進(jìn)行配置的。

1. priority: 表示緩存的優(yōu)先級(jí)；
2. test: 緩存組的規(guī)則，表示符合條件的的放入當(dāng)前緩存組，值可以是function、boolean、string、RegExp，默認(rèn)為空；
3. reuseExistingChunk: 表示可以使用已經(jīng)存在的塊，即如果滿足條件的塊已經(jīng)存在就使用已有的，不再創(chuàng)建一個(gè)新的塊。

1. 基本使用

首先，在新版本的webpack會(huì)默認(rèn)對(duì)代碼進(jìn)行拆分，拆分的規(guī)則是：

1. 模塊被重復(fù)引用或者來自node_modules中的模塊
2. 在壓縮前最小為30kb
3. 在按需加載時(shí)，請(qǐng)求數(shù)量小于等于5
4. 在初始化加載時(shí)，請(qǐng)求數(shù)量小于等于3

小于30kb的模塊不值得再單獨(dú)發(fā)送一次請(qǐng)求，在很小的模塊的前提下，相比與多次打包，減少請(qǐng)求次數(shù)成本要低。

當(dāng)然也可以不使用默認(rèn)的配置，比如這樣：

new webpack.optimize.SplitChunksPlugin({
  chunks: "all",
  minSize: 20000,
  minChunks: 1,
  maxAsyncRequests: 5,
  maxInitialRequests: 3,
  name: true
)}

上面的代碼就表示，在所有代碼中，引用模塊大小最小為20kb，引用次數(shù)最少為1次，按需加載最大請(qǐng)求次數(shù)為5，初始化加載最大請(qǐng)求次數(shù)為3的所有模塊就行拆分到一個(gè)單獨(dú)的代碼塊中，name表示代碼的名字，設(shè)置為true則表示根據(jù)模塊和緩存組秘鑰自動(dòng)生成。

2. 使用緩存組(Cache Groups)

如果想繼續(xù)細(xì)分代碼，可以使用緩存組(Cache Groups)。同樣的，緩存組也有默認(rèn)的配置；緩存組默認(rèn)將node_modules中的模塊拆分帶一個(gè)叫做vendors的代碼塊中，將最少重復(fù)引用兩次的模塊放入default中。

這是一段官方里面的代碼：

splitChunks: {
  chunks: "async",
  minSize: 30000,
  minChunks: 1,
  maxAsyncRequests: 5,
  maxInitialRequests: 3,
  name: true,
  cacheGroups: {
    default: {
      minChunks: 2,
      priority: -20
      reuseExistingChunk: true,
    },
    vendors: {
      test: /[\\/]node_modules[\\/]/,
      priority: -10
    }
  }
}

上面是緩存組的默認(rèn)配置，可以通過default:false禁用默認(rèn)的緩存組，然后就可以自定義緩存組，將初始化加載時(shí)被重復(fù)引用的模塊進(jìn)行拆分，就像這樣：

cacheGroups: {
  commons: {
    name: "commons",
    chunks: "initial",
    minChunks: 2
  }
}

之后就隨心所欲，可以根據(jù)具體的需求，創(chuàng)建多個(gè)緩存組：

cacheGroups: {
  a: {
    // ...
  },
  b: {
    // ...
  }
  // ...
}

寫在后面

webpack更新已經(jīng)過了很多天了，最近算是把更新的基本都過了一遍，在此記錄以便日后查看，理解有問題的地方還請(qǐng)不吝賜教。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論