快捷導(dǎo)航

webpack優(yōu)化之代碼分割與公共代碼提取詳解

更新時(shí)間：2019年11月22日 16:17:33 作者：champyin

這篇文章主要給大家介紹了關(guān)于webpack優(yōu)化之代碼分割與公共代碼提取的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用webpack具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

前言

開(kāi)發(fā)多頁(yè)應(yīng)用的時(shí)候，如果不對(duì)webpack打包進(jìn)行優(yōu)化，當(dāng)某個(gè)模塊被多個(gè)入口模塊引用時(shí)，它就會(huì)被打包多次（在最終打包出來(lái)的某幾個(gè)文件里，它們都會(huì)有一份相同的代碼）。當(dāng)項(xiàng)目業(yè)務(wù)越來(lái)越復(fù)雜，打包出來(lái)的代碼會(huì)非常冗余，文件體積會(huì)非常龐大。大體積文件會(huì)增加編譯時(shí)間，影響開(kāi)發(fā)效率；如果直接上線，還會(huì)拉長(zhǎng)請(qǐng)求和加載時(shí)長(zhǎng)，影響網(wǎng)站體驗(yàn)。作為一個(gè)追求極致體驗(yàn)的攻城獅，是不能忍的。所以在多頁(yè)應(yīng)用中優(yōu)化打包尤為必要。那么如何優(yōu)化webpack打包呢？

一、概念

在一切開(kāi)始前，有必要先理清一下這三個(gè)概念：

module: 模塊，在webpack眼里，任何可以被導(dǎo)入導(dǎo)出的文件都是一個(gè)模塊。
chunk: chunk是webpack拆分出來(lái)的：
- 每個(gè)入口文件都是一個(gè)chunk
- 通過(guò) import、require 引入的代碼也是
- 通過(guò) splitChunks 拆分出來(lái)的代碼也是
bundle: webpack打包出來(lái)的文件，也可以理解為就是對(duì)chunk編譯壓縮打包等處理后的產(chǎn)出。

二、問(wèn)題分析

首先，簡(jiǎn)單分析下，我們剛才提到的打包問(wèn)題：

核心問(wèn)題就是：多頁(yè)應(yīng)用打包后代碼冗余，文件體積大。
究其原因就是：相同模塊在不同入口之間沒(méi)有得到復(fù)用，bundle之間比較獨(dú)立。

弄明白了問(wèn)題的原因，那么大致的解決思路也就出來(lái)了：

我們?cè)诖虬臅r(shí)候，應(yīng)該把不同入口之間，共同引用的模塊，抽離出來(lái)，放到一個(gè)公共模塊中。這樣不管這個(gè)模塊被多少個(gè)入口引用，都只會(huì)在最終打包結(jié)果中出現(xiàn)一次?！鉀Q代碼冗余。
另外，當(dāng)我們把這些共同引用的模塊都堆在一個(gè)模塊中，這個(gè)文件可能異常巨大，也是不利于網(wǎng)絡(luò)請(qǐng)求和頁(yè)面加載的。所以我們需要把這個(gè)公共模塊再按照一定規(guī)則進(jìn)一步拆分成幾個(gè)模塊文件?！獪p小文件體積。
至于如何拆分，方式因人而異，因項(xiàng)目而異。我個(gè)人的拆分原則是：
- 業(yè)務(wù)代碼和第三方庫(kù)分離打包，實(shí)現(xiàn)代碼分割；
- 業(yè)務(wù)代碼中的公共業(yè)務(wù)模塊提取打包到一個(gè)模塊；
- 第三方庫(kù)最好也不要全部打包到一個(gè)文件中，因?yàn)榈谌綆?kù)加起來(lái)通常會(huì)很大，我會(huì)把一些特別大的庫(kù)分別獨(dú)立打包，剩下的加起來(lái)如果還很大，就把它按照一定大小切割成若干模塊。

optimization.splitChunks

webpack提供了一個(gè)非常好的內(nèi)置插件幫我們實(shí)現(xiàn)這一需求：CommonsChunkPlugin。不過(guò)在 webpack4 中CommonsChunkPlugin被刪除，取而代之的是optimization.splitChunks, 所幸的是optimization.splitChunks更強(qiáng)大！

三、實(shí)現(xiàn)

通過(guò)一個(gè)多頁(yè)應(yīng)用的小demo，我們一步一步來(lái)實(shí)現(xiàn)上述思路的配置。

demo目錄結(jié)構(gòu)：

|--public/
|   |--a.html
|   |--index.html
|--src/
|   |--a.js
|   |--b.js
|   |--c.js
|   |--index.js
|--package.json
|--webpack.config.js

代碼邏輯很簡(jiǎn)單，index模塊中引用了 a 和 b 2個(gè)模塊，a 模塊中引用了 c 模塊和 jquery庫(kù)，b 模塊中也引用了 c 模塊和 jquery 庫(kù)，c 是一個(gè)獨(dú)立的模塊沒(méi)有其他依賴。

index.js代碼如下：

//index.js
import a from './a.js';
import b from './b.js';
function fn() {
 console.log('index-------');
}
fn();

a.js代碼如下：

//a.js
require('./c.js');
const $ = require('jquery')
function fn() {
 console.log('a-------');
}
module.exports = fn();

b.js代碼如下：

//b.js
require('./c.js');
const $ = require('jquery')
function fn() {
 console.log('b-------');
}
module.exports = fn();

c.js代碼如下：

//c.js
function fn() {
 console.log('c-------');
}
module.exports = fn();

1. 基本配置

webpack先不做優(yōu)化，只做基本配置，看看效果。項(xiàng)目配置了2個(gè)入口，搭配html-webpack-plugin實(shí)現(xiàn)多頁(yè)打包：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
 entry: {
 index: './src/index.js',
 a: './src/a.js'
 },
 output: {
 path: path.resolve(__dirname, 'dist'),
 filename: '[name].js'
 },
 plugins: [
 new HtmlWebpackPlugin({
  template: './public/index.html',
  filename: 'index.html'
 }),
 new HtmlWebpackPlugin({
  template: './public/a.html',
  filename: 'a.html'
 })
 ]
}

在開(kāi)發(fā)模式下運(yùn)行webpack：

可以看到，打包出兩個(gè)html和兩個(gè)體積很大的（300多K）的文件a.js,index.js。

進(jìn)入dist目錄檢查js文件：

a.js里包含c模塊代碼和jquery代碼
index.js里包含a模塊、b模塊、c模塊和jquery代碼

看，同樣的代碼c和jquery被打包了2遍。

2. 初步添加splitChunks優(yōu)化配置

首先解決相同代碼打包2次的問(wèn)題，我們需要讓webpack把c和jquery提取出來(lái)打包為公共模塊。

在webpack配置文件添加splitChunks：

//webpack.config.js

optimization: {
 splitChunks: {
 cacheGroups: {
  default: {
  name: 'common',
  chunks: 'initial'
  }
 }
 }
}

- cacheGroups

cacheGroups是splitChunks配置的核心，對(duì)代碼的拆分規(guī)則全在cacheGroups緩存組里配置。
緩存組的每一個(gè)屬性都是一個(gè)配置規(guī)則，我這里給他的default屬性進(jìn)行了配置，屬性名可以不叫default可以自己定。
屬性的值是一個(gè)對(duì)象，里面放的我們對(duì)一個(gè)代碼拆分規(guī)則的描述。

- name

name：提取出來(lái)的公共模塊將會(huì)以這個(gè)來(lái)命名，可以不配置，如果不配置，就會(huì)生成默認(rèn)的文件名，大致格式是index～a.js這樣的。

- chunks

chunks：指定哪些類型的chunk參與拆分，值可以是string可以是函數(shù)。如果是string，可以是這個(gè)三個(gè)值之一：all, async, initial，all 代表所有模塊，async代表只管異步加載的, initial代表初始化時(shí)就能獲取的模塊。如果是函數(shù)，則可以根據(jù)chunk參數(shù)的name等屬性進(jìn)行更細(xì)致的篩選。

再次打包：

可以看到a.js,index.js從300多K減少到6點(diǎn)幾K。同時(shí)增加了一個(gè)common.js文件，并且兩個(gè)打包入口都自動(dòng)添加了common.js這個(gè)公共模塊：

進(jìn)入dist目錄，依次查看這3個(gè)js文件：

a.js里不包含任何模塊的代碼了，只有webpack生成的默認(rèn)代碼。
index.js里同樣不包含任何模塊的代碼了，只有webpack生成的默認(rèn)代碼。
common.js里有a,b,c,index,jquery代碼。

發(fā)現(xiàn)，提是提取了，但是似乎跟我們預(yù)料的不太一樣，所有的模塊都跑到common.js里去了。

這是因?yàn)槲覀儧](méi)有告訴webpack（splitChunks）什么樣的代碼為公共代碼，splitChunks默認(rèn)任何模塊都會(huì)被提取。

- minChunks

splitChunks是自帶默認(rèn)配置的，而緩存組默認(rèn)會(huì)繼承這些配置，其中有個(gè)minChunks屬性：

它控制的是每個(gè)模塊什么時(shí)候被抽離出去：當(dāng)模塊被不同entry引用的次數(shù)大于等于這個(gè)配置值時(shí)，才會(huì)被抽離出去。
它的默認(rèn)值是1。也就是任何模塊都會(huì)被抽離出去（入口模塊其實(shí)也會(huì)被webpack引入一次）。

我們上面沒(méi)有配置minChunks，只配置了name和chunk兩個(gè)屬性，所以minChunks的默認(rèn)值 1 生效。也難怪所有的模塊都被抽離到common.js中了。

優(yōu)化一下，在緩存組里配置minChunks覆蓋默認(rèn)值：

//webpack.config.js

optimization: {
 splitChunks: {
  cacheGroups: {
   default: {
    name: 'common',
    chunks: 'initial',
    minChunks: 2 //模塊被引用2次以上的才抽離
   }
  }
 }
}

然后運(yùn)行webpack

可以看到有2個(gè)文件的大小發(fā)生了變化：common.js由314K減小到311K，index.js由6.22K增大到7.56K。

進(jìn)入dist目錄查看：

a.js里依然不包含任何模塊的代碼（正常，因?yàn)閍作為模塊被index引入了一次，又作為入口被webpack引入了一次，所以a是有2次引用的）。

index.js里出現(xiàn)了b和index模塊的代碼了。
common.js里只剩a,c,和jquery模塊的代碼。
現(xiàn)在我們把共同引用的模塊a, c, jquery，從a和index這兩個(gè)入口模塊里抽取到common.js里了。有點(diǎn)符合我們的預(yù)期了。

3. 配置多個(gè)拆分規(guī)則

3.1 實(shí)現(xiàn)代碼分離，拆分第三方庫(kù)

接下來(lái)，我希望公共模塊common.js中，業(yè)務(wù)代碼和第三方模塊jquery能夠剝離開(kāi)來(lái)。

我們需要再添加一個(gè)拆分規(guī)則。

//webpack.config.js

optimization: {
 splitChunks: {
  minSize: 30, //提取出的chunk的最小大小
  cacheGroups: {
   default: {
    name: 'common',
    chunks: 'initial',
    minChunks: 2, //模塊被引用2次以上的才抽離
    priority: -20
   },
   vendors: { //拆分第三方庫(kù)（通過(guò)npm|yarn安裝的庫(kù)）
    test: /[\\/]node_modules[\\/]/,
    name: 'vendor',
    chunks: 'initial',
    priority: -10
   }
  }
 }
}

我給cacheGroups添加了一個(gè)vendors屬性（屬性名可以自己取，只要不跟緩存組下其他定義過(guò)的屬性同名就行，否則后面的拆分規(guī)則會(huì)把前面的配置覆蓋掉）。

- minSize

minSize設(shè)置的是生成文件的最小大小，單位是字節(jié)。如果一個(gè)模塊符合之前所說(shuō)的拆分規(guī)則，但是如果提取出來(lái)最后生成文件大小比minSize要小，那它仍然不會(huì)被提取出來(lái)。這個(gè)屬性可以在每個(gè)緩存組屬性中設(shè)置，也可以在splitChunks屬性中設(shè)置，這樣在每個(gè)緩存組都會(huì)繼承這個(gè)配置。這里由于我的demo中文件非常小，為了演示效果，我把minSize設(shè)置為30字節(jié)，好讓公共模塊可以被提取出來(lái)，正常項(xiàng)目中不用設(shè)這么小。

- priority

priority屬性的值為數(shù)字，可以為負(fù)數(shù)。作用是當(dāng)緩存組中設(shè)置有多個(gè)拆分規(guī)則，而某個(gè)模塊同時(shí)符合好幾個(gè)規(guī)則的時(shí)候，則需要通過(guò)優(yōu)先級(jí)屬性priority來(lái)決定使用哪個(gè)拆分規(guī)則。優(yōu)先級(jí)高者執(zhí)行。我這里給業(yè)務(wù)代碼組設(shè)置的優(yōu)先級(jí)為-20，給第三方庫(kù)組設(shè)置的優(yōu)先級(jí)為-10，這樣當(dāng)一個(gè)第三方庫(kù)被引用超過(guò)2次的時(shí)候，就不會(huì)打包到業(yè)務(wù)模塊里了。

- test

test屬性用于進(jìn)一步控制緩存組選擇的模塊，與chunks屬性的作用有一點(diǎn)像，但是維度不一樣。test的值可以是一個(gè)正則表達(dá)式，也可以是一個(gè)函數(shù)。它可以匹配模塊的絕對(duì)資源路徑或chunk名稱，匹配chunk名稱時(shí)，將選擇chunk中的所有模塊。我這里用了一個(gè)正則/[\\/]node_modules[\\/]/來(lái)匹配第三方模塊的絕對(duì)路徑，因?yàn)橥ㄟ^(guò)npm或者yarn安裝的模塊，都會(huì)存放在node_modules目錄下。

運(yùn)行一下webpack：

可以看到新產(chǎn)生了一個(gè)叫vendor.js的文件（name屬性的值），同時(shí)common.js文件體積由原來(lái)的311k減少到了861bytes！

進(jìn)入dist目錄，檢查js文件：

a.js里不包含任何模塊代碼。
common.js只包含a和c模塊的代碼。
index.js只包含b和index模塊的代碼。
vendor.js只包含jquery模塊的代碼。

現(xiàn)在，我們?cè)谏弦徊降幕A(chǔ)上，成功從common.js里把第三方庫(kù)jquery抽離出來(lái)放到了vendor.js里。

3.2 拆分指定文件

如果我們還想把項(xiàng)目中的某一些文件單獨(dú)拎出來(lái)打包（比如工程本地開(kāi)發(fā)的組件庫(kù)），可以繼續(xù)添加拆分規(guī)則。比如我的src下有個(gè)locallib.js文件要單獨(dú)打包，假設(shè)a.js中引入了它。

//a.js
require('./c.js');
require('./locallib.js'); //引入自己本地的庫(kù)
const $ = require('jquery')
function fn() {
 console.log('a-------');
}
module.exports = fn();

可以這么配置：

//webpack.config.js

optimization: {
 splitChunks: {
  minSize: 30, //提取出的chunk的最小大小
  cacheGroups: {
   default: {
    name: 'common',
    chunks: 'initial',
    minChunks: 2, //模塊被引用2次以上的才抽離
    priority: -20
   },
   vendors: { //拆分第三方庫(kù)（通過(guò)npm|yarn安裝的庫(kù)）
    test: /[\\/]node_modules[\\/]/,
    name: 'vendor',
    chunks: 'initial',
    priority: -10
   },
   locallib: { //拆分指定文件
    test: /(src\/locallib\.js)$/,
    name: 'locallib',
    chunks: 'initial',
    priority: -9
   }
  }
 }
}

我在緩存組下又新增了一個(gè)拆分規(guī)則，通過(guò)test正則指定我就要單獨(dú)打包src/locallib.js文件，并且把優(yōu)先級(jí)設(shè)置為-9，這樣當(dāng)它被多次引用時(shí)，不會(huì)進(jìn)入其他拆分規(guī)則組，因?yàn)榱硗鈨蓚€(gè)規(guī)則的優(yōu)先級(jí)都比它要低。

運(yùn)行webpack打包后：