幾個月前，我的任務是將我們組的 Vue.js 項目構建配置升級到 Webpack 4。我們的主要目標之一是利用 tree-shaking 的優勢，即 Webpack 去掉了實際上并沒有使用的代碼來減少包的大小。現在，tree-shaking 的好處將根據你的代碼庫而有所不同。由于我們的幾個架構決策，我們從公司內部的其他庫中提取了大量代碼，而我們只使用了其中的一小部分。

我寫這篇文章是因為恰當地優化 Webpack 并不簡單。一開始我以為這是一種簡單的魔法，但后來我花了一個月的時間在網上搜索我遇到的一系列問題的答案。我希望通過這篇文章，其他人會更容易地處理類似問題。

先說好處

在討論技術細節之前，讓我先總結一下好處。不同的應用程序將看到不同程度的好處。主要的決定因素是應用程序中死代碼的數量。如果你沒有多少死代碼，那么你就看不到 tree-shaking 的多少好處。我們項目里有很多死代碼。

在我們部門，最大的問題是共享庫的數量。從簡單的自定義組件庫，到企業標準組件庫，再到莫名其妙地塞到一個庫中的大量代碼。很多都是技術債務，但一個大問題是我們所有的應用程序都在導入所有這些庫，而實際上每個應用程序都只需要其中的一小部分

總的來說，一旦實現了 tree-shaking，我們的應用程序就會根據應用程序的不同，縮減率從25%到75%。平均縮減率為52%，主要是由這些龐大的共享庫驅動的，它們是小型應用程序中的主要代碼。

同樣，具體情況會有所不同，但是如果你覺得你打的包中可能有很多不需要的代碼，這就是如何消除它們的方法。

沒有示例代碼倉庫

對不住了各位老鐵，我做的項目是公司的財產，所以我不能分享代碼到 GitHub 倉庫了。但是，我將在本文中提供簡化的代碼示例來說明我的觀點。

因此，廢話少說，讓我們來看看如何編寫可實現 tree-shaking 的最佳 webpack 4 配置。

什么是死代碼

很簡單：就是 Webpack 沒看到你使用的代碼。Webpack 跟蹤整個應用程序的 import/export 語句，因此，如果它看到導入的東西最終沒有被使用，它會認為那是“死代碼”，并會對其進行 tree-shaking 。

死代碼并不總是那么明確的。下面是一些死代碼和“活”代碼的例子，希望能讓你更明白。請記住，在某些情況下，Webpack 會將某些東西視為死代碼，盡管它實際上并不是。請參閱《副作用》一節，了解如何處理。

// 導入并賦值給 JavaScript 對象，然后在下面的代碼中被用到// 這會被看作“活”代碼，不會做 tree-shakingimport Stuff from './stuff';doSomething(Stuff);// 導入并賦值給 JavaScript 對象，但在接下來的代碼里沒有用到// 這就會被當做“死”代碼，會被 tree-shakingimport Stuff from './stuff';doSomething();// 導入但沒有賦值給 JavaScript 對象，也沒有在代碼里用到// 這會被當做“死”代碼，會被 tree-shakingimport './stuff';doSomething();// 導入整個庫，但是沒有賦值給 JavaScript 對象，也沒有在代碼里用到// 非常奇怪，這竟然被當做“活”代碼，因為 Webpack 對庫的導入和本地代碼導入的處理方式不同。import 'my-lib';doSomething();