webpack優化之玩轉程式碼分割和公共程式碼提取
前言
開發多頁應用的時候，如果不對webpack打包進行優化，當某個模組被多個入口模組引用時，它就會被打包多次（在最終打包出來的某幾個檔案裡，它們都會有一份相同的程式碼）。當專案業務越來越複雜，打包出來的程式碼會非常冗餘，檔案體積會非常龐大。大體積檔案會增加編譯時間，影響開發效率；如果直接上線，還會拉長請求和載入時長，影響網站體驗。作為一個追求極致體驗的攻城獅，是不能忍的。所以在多頁應用中優化打包尤為必要。那麼如何優化webpack打包呢？
一、概念
在一切開始前，有必要先理清一下這三個概念：
- module: 模組，在webpack眼裡，任何可以被匯入匯出的檔案都是一個模組。
- chunk: chunk是webpack拆分出來的：
- 每個入口檔案都是一個chunk
- 通過 import、require 引入的程式碼也是
- 通過 splitChunks 拆分出來的程式碼也是
- bundle: webpack打包出來的檔案，也可以理解為就是對chunk編譯壓縮打包等處理後的產出。
二、問題分析
首先，簡單分析下，我們剛才提到的打包問題：
- 核心問題就是：多頁應用打包後代碼冗餘，檔案體積大。
- 究其原因就是：相同模組在不同入口之間沒有得到複用，bundle之間比較獨立。
弄明白了問題的原因，那麼大致的解決思路也就出來了：
- 我們在打包的時候，應該把不同入口之間，共同引用的模組，抽離出來，放到一個公共模組中。這樣不管這個模組被多少個入口引用，都只會在最終打包結果中出現一次。——解決程式碼冗餘。
- 另外，當我們把這些共同引用的模組都堆在一個模組中，這個檔案可能異常巨大，也是不利於網路請求和頁面載入的。所以我們需要把這個公共模組再按照一定規則進一步拆分成幾個模組檔案。——減小檔案體積。
- 至於如何拆分，方式因人而異，因專案而異。我個人的拆分原則是：
- 業務程式碼和第三方庫分離打包，實現程式碼分割；
- 業務程式碼中的公共業務模組提取打包到一個模組；
- 第三方庫最好也不要全部打包到一個檔案中，因為第三方庫加起來通常會很大，我會把一些特別大的庫分別獨立打包，剩下的加起來如果還很大，就把它按照一定大小切割成若干模組。
optimization.splitChunks
webpack提供了一個非常好的內建外掛幫我們實現這一需求：CommonsChunkPlugin
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的更多配置。
歡迎交流～
本文的完整webpack配置和demo原始碼可以在這裡獲取：
https://github.com/yc111/webpack-optimize-demo
--
歡迎轉載，轉載請註明出處：
https://champyin.com/2019/11/15/webpack%E4%BC%98%E5%8C%96%E4%B9%8B%E7%8E%A9%E8%BD%AC%E4%BB%A3%E7%A0%81%E5%88%86%E5%89%B2%E5%92%8C%E5%85%AC%E5%85%B1%E4%BB%A3%E7%A0%81%E6%8F%90%E5%8F%96/
本文同步發表於：
webpack優化之玩轉程式碼分割和公共程式碼提取 | 掘