升級優化Webpack4，使你的打包速度提升200%以上！

摘要： 之前修改公司的運營系統，多年來積累下來的程式碼使得每次打包構建的時候時間異常漫長，非常難受，一氣之下將專案的Webpack從2.x升級到了4.x，原來在Jenkins上一套需要6分鐘的流程現在只需2分鐘，頓時感到身心舒暢(￣▽￣)／ 並且我順便把專案劃分成多入口專案，...

之前修改公司的運營系統，多年來積累下來的程式碼使得每次打包構建的時候時間異常漫長，非常難受，一氣之下將專案的Webpack從2.x升級到了4.x，原來在Jenkins上一套需要6分鐘的流程現在只需2分鐘，頓時感到身心舒暢(￣▽￣)／

並且我順便把專案劃分成多入口專案，實現增量更新，這樣就不用每次都打包這麼多檔案啦！

ps：以下配置基於React，可以自行根據實際專案用到的框架和庫修改

1. 配置中可優化的點

先說一下我在升級中發現的可以優化的點，大家有什麼建議和想法可以一併提出。

1.1 優化第三方庫

優化第三方庫最簡單粗暴並且及其有效的一個方式就是使用webpac k的DllPlugin 。它可以將我們經常使用但是修改頻率極低的第三方庫與自己的程式碼完全分離開， 每次打包的時候會根據索引判斷是否需要重新打包第三方庫，大大提高了打包速度。用法我就不細說了，網上有很多教程，感興趣的可以去了解下。

庫的索引一般儲存在一個manifest.json 檔案中。我們可以通過這個檔案看到自己專案對第三方庫的打包情況。

優化思路：

• 專案裡安裝的第三方庫的需要評估必要性，如果很少使用到庫的不要在webpack 的vendor 入口指定打包進來。
• 同時可以升級某些第三方庫，如react v16 對比react v15 ，加上react-dom ，體積上降低了30%，因此果斷升級。
• 分析manifest.json檔案後發現某些庫體積特別大，例如使用很廣泛的moment.js 庫。研究後發現webpack 把庫下面所有的locale 檔案打包了進來。這是一些支援多語言的檔案。即我們可以通過ContextReplacementPlugin 外掛來挑選我們需要的檔案。

plugins: [
new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /zh-cn/),
]
複製程式碼

• 有時候通過依賴分析會發現專案裡打包了兩份第三方庫，一份是es module 版的，另一份則是umd 版的。如moment 通過import 'moment'匯入的是es module 版的，locale 檔案中卻會用相對路徑匯入umd 版的。這時我們可以通過配置別名將庫指向同一個版本。

resolve: {
alias: {
'moment$': path.resolve('node_modules/moment/moment'),
},
}
複製程式碼

• 有時候專案裡並不需要某個庫的全部功能，這時候可以考慮用更輕量的庫來替代，或者使用定製閹割版（如Echarts, 官網上可定製），並且用import() 語法和react-loadable 這個庫將react元件包裝成非同步元件，在需要時才進行載入，這樣webpack就會將非同步元件抽取為非同步載入的chunk，就不會多次載入。下面就說如何抽取。

1.2 抽取非同步載入的chunk中的公共程式碼

在webpack4之前，我們使用CommonsChunkPlugin 來抽取非同步元件，但現在CommonsChunkPlugin 已經被廢棄了，取而代之的是SplitChunksPlugin
使用方法有兩種，一種是像Webpack3那樣在plugins 中配置，一種是在Webpack4中的optimization 屬性中的splitChunks 配置

optimization: {
splitChunks: { // 拆分程式碼規則（符合即單獨拆分到一個chunk中）
maxInitialRequests: 4, // 在初始化載入時，請求數量大於4
automaticNameDelimiter: '-',
name: true, // 程式碼塊的名字，設定為true則表示根據模組和快取組祕鑰自動生成, 實現固化 chunkId，保持快取的能力

/* 快取組，用於繼續細分程式碼。
快取組預設將node_modules中的模組拆分帶一個叫做vendors的程式碼塊, 將最少重複引用兩次的模組放入default中。
或者自定義將符合規則的模組單獨拆分進一個chunk中。*/

cacheGroups: {
default: false, // 禁用預設規則
vendors: false, // 禁用預設規則
polyfill: {
chunks: 'initial',
test: 'polyfill',
name: 'polyfill',
},
vendor: {
chunks: 'initial',
test: 'vendor',
name: 'vendor',
},
// 對非同步元件進行抽取
'async-vendor': {
name: 'async-vendor',
chunks: 'async',
test: (module) => { // 快取組的規則，表示符合條件的的放入當前快取組
if (/[\\/]node_modules[\\/](echarts|zrender)/.test(module.context)) {
return false;
}
return /[\\/]node_modules[\\/]/.test(module.context);
},
},
'async-biz': {
name: 'async-biz',
chunks: 'async',
minChunks: 2, // 被引用次數大於2時進行拆分
},
// css檔案單獨打包進一個檔案中
'styles': {
name: 'styles',
test: /\.css$/,
chunks: 'async',
enforce: true,
},
},
},
},
複製程式碼

當抽取非同步載入元件時，我們需要在業務程式碼中使用下面的寫法，webpack才能識別:

基於react-loadable 庫，簡介：React Loadable 簡介

import Loadable from 'react-loadable';
const loder1 = import(/* webpackChunkName: "chunkname2" */'path/to/module2')
const Component = Loadable({
loader,
loadingComponent, // loding時使用的元件
})
複製程式碼

1.3 合理使用非同步載入

若我們專案中的首屏也是使用非同步載入的方法，並且用到了async-vendor 裡的元件，首屏載入時就會同時載入async-vendor 並做快取，這樣之後的頁面使用到了async-vendor 裡面的元件之後就無需再次載入新的程式碼。但是這樣就會可能拖慢我們的的首屏速度。

解決辦法一是拆分async-vendor 的首屏部分；或是取消首屏頁面的非同步載入，將其打包到main 中，這樣就避免了載入async-vendor ，大大減少了首屏體積。

1.4 分離出webpack runtime程式碼

webpack在客戶端執行時會首先載入webpack相關的程式碼，例如require函式等，這部分程式碼會隨著每次修改業務程式碼後發生變化，原因是這裡面會包含chunk id等容易變化的資訊。如果不抽取出來將會被打包在vendor當中，導致vendor每次都要被使用者重新載入。抽離的配置寫在optimization 屬性中的runtimeChunk 配置中：

optimization: {
runtimeChunk: {
name: 'manifest',
},
}
複製程式碼

1.5 webpack內部優化

mode：'production',
optimization : {
moduleIds: 'hashed',
}
複製程式碼

1.6 babel-polyfill優化

目前本人專案裡用的方法是命名一個來源於babel-polyfill的polyfill的檔案，但是註釋掉了大部分的import，僅保留專案的基本需求，並在在專案入口檔案中引入。

// webpack 中配置
entry: {
polyfill: path.join(process.cwd(), 'path/to/your/polyfill'),
},
複製程式碼

參考下別人一些對polyfill優化的的優秀文章：

• ES6和Babel你不知道的事兒
• Polyfill.io
• 21 分鐘精通前端 Polyfill 方案