我如何將 Webpack 包大小縮減一半

本文為譯文，原文地址：http://jmduke.com/posts/how-i-cut-my-webpack-bundle-size-in-half/，作者，@Justin Duke

當我最初建立 Buttondown 的時候，我專註於兩個方面：

1. 它構建快速。

2. 它能很好的運行。

值得注意的是，不在列表中的是性能。Buttondown 並不是一個緩慢的應用程序，但是它很笨重：開發中的包文件以兆為單位，首次載入時間很長。

現在它的核心功能已經穩定下來了，沒有什麼特別緊急的需求了，我想把項目重心轉向維護工作，其中一大部分是看看我能做些什麼來減少包文件。

恩，是的，4M 大小，當然是未壓縮的，但是對於 Buttondown 應用來說還是太大了。我決定將該大小減少一半，這就是我們從一開始就應用採取的結合最佳實踐和常識的前端原則。

0. 分析包文件

我知道包文件很大，但我不知道為什麼這麼大。幸運的是，有一個工具webpack-bundle-analyzer 可以分析你的 webpack 數據，並且繪製出一幅可視化的樹形圖來查看佔用空間比。

看起來如下圖：

1. 拋棄 jQuery

「你真的需要 jQuery」 這是一個常見的問題，它有自己的網站，在這種情況下，答案是否定的。特別是因為 Vue 非常容易地捕獲事件並引用 DOM，這是我實際使用它的唯一的兩件事情。這是對比的樣子：

包文件看起來是這樣的：

這清除了大約 250k 位元組，將包文件降低到 3.5M。不是很大的數據，但也不錯。

2. 排除 moment locales

Moment 是處理時間的一個很重的解決方案。它擁有強大的 locales 支持，這是非常好的，但是目前我只是使用它來格式化某些 UTC 日期時間，所有包括所有這些 locales 設置似乎是不必要的。幸運的是，我發現了一種將它們從 webpack 中完全排除的方法。

現在包文件看起這樣：

這清除了大約 250k 位元組，將包文件降低到了 3.25M。

3. 懶載入 zxcvbn

zxcvbn 是 Dropbox 處理密碼驗證的一個非常重要的庫。 Buttondown 使用它來驗證密碼。

然而，它附帶了一個 600KB 的經常使用的密碼列表，這是非常重的密碼。我本來想的是克隆該倉庫並減少這個列表，就像其他人做的一樣，但是這似乎並太理想。所以我決定嘗試懶載入來推遲載入時間 — 實現 Webpack 懶載入。

對於延遲載入的一些配置要求（特別是正確的 publicPath 值）來說，這是非常煩人的，但最終的差異變得很好很緊湊。實際的代碼改的有點笨拙，我不太喜歡實際的實現與 webpack 如何強耦合，但是結果卻難以爭辯。

現在包文件看起這樣：

這清除了大約 750k 位元組，將包文件降低到 2.5M，我們快要完成任務了！

4. 選擇性的導出 lodash

最後，我將以最典型的例子作為結束，使用選定的內容來全面替換完整的 lodash 導入。

這很簡單（也很無聊），導致一個非常無聊的差異，所以我只顯示它的一個例子。放心，其餘的看起來也差不多：

現在包文件看起這樣：

這清除了大約 450k 位元組，將包文件降低到了 2.08M，沒到一半，但是很接近了。

下一步

2M 仍然很大（即使它未被壓縮），它比我想的要大，但我對結果已經非常高興了。我要了解更多關於 Webpack 的知識，提供代碼庫的質量，而較小的包文件對於跳出率有著重要的影響。

絕對有一些我可以做的事情來縮小代碼空間：

1. 刪除額外的字體。

2. 徹底擺脫 moment，並寫一個定製的日期管理工具。

3. 懶載入 flatpickr（它只在幾個地方使用）

這些都是後續改進內容。

擴展閱讀

1. Paul Irish』s perf audit of Reddit

2. The Critical Request

3.Why our website is faster than yours

4. Optimizing your bundle size

推薦閱讀：