一塊兒來燃燒 Bundle 的「卡路里」

原文做者：Houssein Djirdeh

譯者：UC 國際研發 Jothy

寫在最前：歡迎你來到「UC國際技術」公衆號，咱們將爲你們提供與客戶端、服務端、算法、測試、數據、前端等相關的高質量技術文章，不限於原創與翻譯。

編者按：npm 爲前端 er 帶來了諸多便利，咱們只需敲上一條安裝語句，便能用上別人精心開發的各類精品庫。但你有沒有發現，你的應用悄悄地吃成了個「大胖子」？今天，咱們請來 Google Web 的工程師 Djirdeh 帶你科學「瘦身」，去掉那些「多餘的熱量」🔥。

npm 使得 JavaScript 世界煥發生機，你能夠經過它輕鬆下載使用超過 50 萬個公共包。 但不少時候，咱們引入了庫卻沒能充分利用它們。 要解決這個問題，你得分析你的 bundle，檢測出未使用的代碼，而後刪除未使用及不須要的庫。

分析你的 bundle

最簡單的查看全部網絡請求大小的方法是，在 DevTools 中打開 Network 面板，選擇Disable cache(禁用緩存)，而後從新加載頁面。

DevTools 中的 Coverage 選項卡可顯示應用中有多少未使用的 CSS 和 JS 代碼。

經過 Lighthouse 的 Node CLI 爲其指定一份完整的配置，即可以使用「Unused JavaScript（未使用的 JavaScript）」審查來追蹤應用傳輸了多少未使用的代碼。

若是恰好你的 bundler 是 Webpack，那麼 Webpack Bundle Analyzer 插件將幫你分析 bundle 的組成（地址：github.com/webpack-con…

你只需像引入其它 Webpack 插件同樣，在配置文件中引入該插件：

雖然咱們比較常常使用 webpack 構建單頁應用，但其餘 bundler（如 Parcel 和 Rollup）也有分析 bundle 的可視化工具。

使用此插件從新加載應用後，你將看到整個包的可縮放樹形圖。

有了這個可視化功能，你就能夠看出 bundle 的哪些部分比較大，而且更好地瞭解你要導入的全部庫。 這能幫你確認你是否正在使用某些未使用或沒必要要的庫。

刪除未使用的庫

在上面的樹形圖中， @firebase 域中有至關多的包。 若是你只須要 firebase 數據庫組件，請將導入語句改成僅獲取該文件：

不過須要強調的是，應用越大，此過程越複雜。

對於那些你很是肯定其餘地方並未使用的神祕兮兮的包，請退一步看看哪些頂層依賴項正在使用它。 試着作到只引入你須要的組件。若是某個庫你再也不使用，請將其刪除。 若是初始頁面的加載不須要某個庫，考慮是否懶加載它。

刪除不須要的庫

不是全部的庫均可以輕鬆分解並選擇性地導入，在這些狀況下，你得想清楚是否能夠徹底刪除該庫。 構建定製解決方案或換用更輕量級的方案始終是值得考慮的。 可是，在從應用中徹底刪除某庫以前，你得權衡其中的複雜性和工做量。

好文推薦：

Redux做者從「UI工程要素」談如何成爲領域專家

「UC國際技術」致力於與你共享高質量的技術文章

歡迎關注咱們的公衆號、將文章分享給你的好友