前言

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

一、概念

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

• module: 模塊，在webpack眼里，任何可以被導入導出的文件都是一個模塊。
• chunk: chunk是webpack拆分出來的：
  • 每個入口文件都是一個chunk
  • 通過 import、require 引入的代碼也是
  • 通過 splitChunks 拆分出來的代碼也是
• bundle: webpack打包出來的文件，也可以理解為就是對chunk編譯壓縮打包等處理后的產出。

二、問題分析

首先，簡單分析下，我們剛才提到的打包問題：

• 核心問題就是：多頁應用打包后代碼冗余，文件體積大。
• 究其原因就是：相同模塊在不同入口之間沒有得到復用，bundle之間比較獨立。

弄明白了問題的原因，那么大致的解決思路也就出來了：

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

optimization.splitChunks

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

三、 實現

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

demo目錄結構：

|--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代碼如下：

//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先不做優化，只做基本配置，看看效果。項目配置了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打包后：

可以看到新產生了一個locallib.js文件。進入dist目錄查看：

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

現在我們又在上一步的基礎上獨立打包了一個指定的模塊locallib.js。

至此，我們就成功實現了抽離公共模塊、業務代碼和第三方代碼剝離、獨立打包指定模塊。

對比一下，優化前，打包出來js一共有633KB：

優化后，打包出來js一共不到330KB：

優化打包后的文件分類清晰，體積比優化前縮小了幾乎50%，有點小完美是不是！擊掌！這還只是我舉的一個簡單例子，在實際多頁應用中，優化力度說不定還不止這么多。

小結

webpack很強大，以上只是冰山一角，但是只要掌握了上述optimization.splitChunks的核心配置，我們就可以幾乎隨心所欲地按照自己的想法來拆分優化代碼控制打包文件了，是不是很酷？玩轉代碼拆分，你也可以！

如果覺得這些依然不能滿足你的需求，還想更精(bian)細(tai)地定制打包規則，可以到webpack官網查看optimization.splitChunks的更多配置。