webpack優化之玩轉代碼分割和公共代碼提取

時間 2019-11-21

標籤 webpack 優化代碼分割公共提取简体版

原文原文鏈接

前言

開發多頁應用的時候，若是不對webpack打包進行優化，當某個模塊被多個入口模塊引用時，它就會被打包屢次（在最終打包出來的某幾個文件裏，它們都會有一份相同的代碼）。當項目業務愈來愈複雜，打包出來的代碼會很是冗餘，文件體積會很是龐大。大致積文件會增長編譯時間，影響開發效率；若是直接上線，還會拉長請求和加載時長，影響網站體驗。做爲一個追求極致體驗的攻城獅，是不能忍的。因此在多頁應用中優化打包尤其必要。那麼如何優化webpack打包呢？html

1、概念

在一切開始前，有必要先理清一下這三個概念：node

module: 模塊，在webpack眼裏，任何能夠被導入導出的文件都是一個模塊。
chunk: chunk是webpack拆分出來的：
- 每一個入口文件都是一個chunk
- 經過 import、require 引入的代碼也是
- 經過 splitChunks 拆分出來的代碼也是
bundle: webpack打包出來的文件，也能夠理解爲就是對chunk編譯壓縮打包等處理後的產出。

2、問題分析

首先，簡單分析下，咱們剛纔提到的打包問題：jquery

核心問題就是：多頁應用打包後代碼冗餘，文件體積大。
究其緣由就是：相同模塊在不一樣入口之間沒有獲得複用，bundle之間比較獨立。

弄明白了問題的緣由，那麼大體的解決思路也就出來了：webpack

咱們在打包的時候，應該把不一樣入口之間，共同引用的模塊，抽離出來，放到一個公共模塊中。這樣無論這個模塊被多少個入口引用，都只會在最終打包結果中出現一次。————解決代碼冗餘。
另外，當咱們把這些共同引用的模塊都堆在一個模塊中，這個文件可能異常巨大，也是不利於網絡請求和頁面加載的。因此咱們須要把這個公共模塊再按照必定規則進一步拆分紅幾個模塊文件。————減少文件體積。
至於如何拆分，方式因人而異，因項目而異。我我的的拆分原則是：
- 業務代碼和第三方庫分離打包，實現代碼分割；
- 業務代碼中的公共業務模塊提取打包到一個模塊；
- 第三方庫最好也不要所有打包到一個文件中，由於第三方庫加起來一般會很大，我會把一些特別大的庫分別獨立打包，剩下的加起來若是還很大，就把它按照必定大小切割成若干模塊。

optimization.splitChunks

webpack提供了一個很是好的內置插件幫咱們實現這一需求：CommonsChunkPlugin。不過在 webpack4 中CommonsChunkPlugin被刪除，取而代之的是optimization.splitChunks, 所幸的是optimization.splitChunks更強大！git

3、實現

經過一個多頁應用的小demo，咱們一步一步來實現上述思路的配置。github

demo目錄結構：web

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

代碼邏輯很簡單，index模塊中引用了 a 和 b 2個模塊，a 模塊中引用了 c 模塊和 jquery庫，b 模塊中也引用了 c 模塊和 jquery 庫，c 是一個獨立的模塊沒有其餘依賴。正則表達式

index.js代碼以下：npm

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

a.js代碼以下：json

//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先不作優化，只作基本配置，看看效果。項目配置了2個入口，搭配html-webpack-plugin實現多頁打包：

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'
        })
    ]
}
複製代碼

在開發模式下運行webpack：

能夠看到，打包出兩個html和兩個體積很大的（300多K）的文件a.js,index.js。

進入dist目錄檢查js文件：

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

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

2. 初步添加splitChunks優化配置

首先解決相同代碼打包2次的問題，咱們須要讓webpack把c和jquery提取出來打包爲公共模塊。

在webpack配置文件添加splitChunks：

//webpack.config.js

optimization: {
    splitChunks: {
        cacheGroups: {
            default: {
                name: 'common',
                chunks: 'initial'
            }
        }
    }
}
複製代碼

- cacheGroups

cacheGroups是splitChunks配置的核心，對代碼的拆分規則全在cacheGroups緩存組裏配置。
緩存組的每個屬性都是一個配置規則，我這裏給他的default屬性進行了配置，屬性名能夠不叫default能夠本身定。
屬性的值是一個對象，裏面放的咱們對一個代碼拆分規則的描述。

- name

name：提取出來的公共模塊將會以這個來命名，能夠不配置，若是不配置，就會生成默認的文件名，大體格式是index～a.js這樣的。

- chunks

chunks：指定哪些類型的chunk參與拆分，值能夠是string能夠是函數。若是是string，能夠是這個三個值之一：all, async, initial，all 表明全部模塊，async表明只管異步加載的, initial表明初始化時就能獲取的模塊。若是是函數，則能夠根據chunk參數的name等屬性進行更細緻的篩選。

再次打包：

能夠看到a.js,index.js從300多K減小到6點幾K。同時增長了一個common.js文件，而且兩個打包入口都自動添加了common.js這個公共模塊：

進入dist目錄，依次查看這3個js文件：

a.js裏不包含任何模塊的代碼了，只有webpack生成的默認代碼。
index.js裏一樣不包含任何模塊的代碼了，只有webpack生成的默認代碼。
common.js裏有a,b,c,index,jquery代碼。

發現，提是提取了，可是彷佛跟咱們預料的不太同樣，全部的模塊都跑到common.js裏去了。

這是由於咱們沒有告訴webpack（splitChunks）什麼樣的代碼爲公共代碼，splitChunks默認任何模塊都會被提取。

- minChunks

splitChunks是自帶默認配置的，而緩存組默認會繼承這些配置，其中有個minChunks屬性：

它控制的是每一個模塊何時被抽離出去：當模塊被不一樣entry引用的次數大於等於這個配置值時，纔會被抽離出去。
它的默認值是1。也就是任何模塊都會被抽離出去（入口模塊其實也會被webpack引入一次）。

咱們上面沒有配置minChunks，只配置了name和chunk兩個屬性，因此minChunks的默認值 1 生效。也難怪全部的模塊都被抽離到common.js中了。

優化一下，在緩存組裏配置minChunks覆蓋默認值：

//webpack.config.js

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

而後運行webpack

能夠看到有2個文件的大小發生了變化：common.js由314K減少到311K，index.js由6.22K增大到7.56K。

進入dist目錄查看：

a.js裏依然不包含任何模塊的代碼（正常，由於a做爲模塊被index引入了一次，又做爲入口被webpack引入了一次，因此a是有2次引用的）。
index.js裏出現了b和index模塊的代碼了。
common.js裏只剩a,c,和jquery模塊的代碼。

如今咱們把共同引用的模塊a, c, jquery，從a和index這兩個入口模塊裏抽取到common.js裏了。有點符合咱們的預期了。

3. 配置多個拆分規則

3.1 實現代碼分離，拆分第三方庫

接下來，我但願公共模塊common.js中，業務代碼和第三方模塊jquery可以剝離開來。

咱們須要再添加一個拆分規則。

//webpack.config.js

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

我給cacheGroups添加了一個vendors屬性（屬性名能夠本身取，只要不跟緩存組下其餘定義過的屬性同名就行，不然後面的拆分規則會把前面的配置覆蓋掉）。

- minSize

minSize設置的是生成文件的最小大小，單位是字節。若是一個模塊符合以前所說的拆分規則，可是若是提取出來最後生成文件大小比minSize要小，那它仍然不會被提取出來。這個屬性能夠在每一個緩存組屬性中設置，也能夠在splitChunks屬性中設置，這樣在每一個緩存組都會繼承這個配置。這裏因爲個人demo中文件很是小，爲了演示效果，我把minSize設置爲30字節，好讓公共模塊能夠被提取出來，正常項目中不用設這麼小。

- priority

priority屬性的值爲數字，能夠爲負數。做用是當緩存組中設置有多個拆分規則，而某個模塊同時符合好幾個規則的時候，則須要經過優先級屬性priority來決定使用哪一個拆分規則。優先級高者執行。我這裏給業務代碼組設置的優先級爲-20，給第三方庫組設置的優先級爲-10，這樣當一個第三方庫被引用超過2次的時候，就不會打包到業務模塊裏了。

- test

test屬性用於進一步控制緩存組選擇的模塊，與chunks屬性的做用有一點像，可是維度不同。test的值能夠是一個正則表達式，也能夠是一個函數。它能夠匹配模塊的絕對資源路徑或chunk名稱，匹配chunk名稱時，將選擇chunk中的全部模塊。我這裏用了一個正則/[\\/]node_modules[\\/]/來匹配第三方模塊的絕對路徑，由於經過npm或者yarn安裝的模塊，都會存放在node_modules目錄下。

運行一下webpack：

能夠看到新產生了一個叫vendor.js的文件（name屬性的值），同時common.js文件體積由原來的311k減小到了861bytes！

進入dist目錄，檢查js文件：

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

如今，咱們在上一步的基礎上，成功從common.js裏把第三方庫jquery抽離出來放到了vendor.js裏。

3.2 拆分指定文件

若是咱們還想把項目中的某一些文件單獨拎出來打包（好比工程本地開發的組件庫），能夠繼續添加拆分規則。好比個人src下有個locallib.js文件要單獨打包，假設a.js中引入了它。

//a.js
require('./c.js');
require('./locallib.js');  //引入本身本地的庫
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: {  //拆分第三方庫（經過npm|yarn安裝的庫）
            	test: /[\\/]node_modules[\\/]/,
                name: 'vendor',
                chunks: 'initial',
                priority: -10
            },
            locallib: {  //拆分指定文件
            	test: /(src\/locallib\.js)$/,
                name: 'locallib',
                chunks: 'initial',
                priority: -9
            }
        }
    }
}
複製代碼

我在緩存組下又新增了一個拆分規則，經過test正則指定我就要單獨打包src/locallib.js文件，而且把優先級設置爲-9，這樣當它被屢次引用時，不會進入其餘拆分規則組，由於另外兩個規則的優先級都比它要低。

運行webpack打包後：