注：本文翻譯自 https://web.dev/fast/remove-unused-code，Written by Houssein Djirdeh。如有翻譯錯誤請指正。

　　像 npm 這樣的包管理器通過允許任何人輕松地下載和使用超過50萬公共包來讓JavaScript世界變得更好。但我們經常引入一些沒有充分利用的庫。為了解決這個問題，可以通過分析你的bundle（即打包后得到的代碼包，下文簡稱為包）來檢測未使用的代碼。然后，移除未使用的和非必需的庫。

分析包

　　查看網絡請求大小的最簡單方法是打開谷歌瀏覽器的開發者工具中的 Network 面板，把 Disable Cache 勾上，然后刷新頁面。

　　開發者工具中的 Coverage 標簽頁能告訴你有多少你的應用中的CSS和JS代碼是未使用的。

　　通過 Node CLI 配置一個完整的 Lighthouse 配置，一個“未使用的JavaScript”檢查工具 Audits 同樣可以用來跟蹤你的應用程序附帶了多少未使用的代碼。

　　如果你使用 webpack 作為你的打包器，Webpack Bundle Analyzer 將幫助您研究是什么組成了這個包。像引入其它一些插件一樣在 webpack 配置中引入這個插件：

1 module.exports = { 2 //... 3 plugins: [ 4 //... 5 new BundleAnalyzerPlugin() 6 ] 7 }

　　盡管 webpack 通常用來構建單頁應用，但其他打包器，例如 Parcel 和 Rollup ，同樣有可以用來分析包的可視化工具。

　　引入這個插件后重新加載頁面將呈現整個包的可縮放矩形樹圖。

　　通過使用這種可視化工具，你可以查看包的哪些部分比其他部分大，并更好地了解導入的所有庫。這有助于識別你是否正在使用一些未使用或不必要的庫。

刪除未使用的庫

　　在上面的矩形樹圖中，在 @firebase 域中有相當多的包。如果你的網站只需要 firebase 的數據庫組件，更改獲取該庫的 imports：

1 //import firebase from 'firebase'; 2 import firebase from 'firebase/app'; 3 import 'firebase/database';

　　需要強調的是，對于較大的應用，這個過程要復雜得多。

　　對于你非常確定沒有在任何地方使用的看起來很神秘的包，請后退一步，查看哪些頂級依賴項正在使用它。試著找到一種方法，只從中導入你需要的組件。如果你沒有使用一個庫，則刪除它。如果初始頁面加載不需要這個庫，則考慮是否可以 lazy loaded（延遲加載）。

刪除非必需的庫

　　并不是所有的庫都可以容易地分解為多個部分并有選擇地導入。在這些場景中，考慮是否可以完全刪除這個庫。構建自定義解決方案或利用更輕量級的替代方案始終是值得考慮的選項。但是，在從應用程序中完全刪除一個庫之前，必須權衡這兩種工作的復雜性和工作量。

實戰

　　了解更多，并將本指南付諸行動：

　　https://web.dev/fast/remove-unused-code/codelab-remove-unused-code

轉載于:https://www.cnblogs.com/mr-nan/p/remove-unused-code.html

總結

以上是生活随笔為你收集整理的（译）删除未使用的前端代码的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。