【Chrome web.dev Live 2020總結】第一天第5集：如何分析JavaScript包

如何分析項目中編譯出的JS包

分析并優化項目編譯出的JS包是提升頁面性能重要一環。然而，項目在打包時，往往會采取一系列的優化措施，把多個js文件編譯成一個或幾個優化后的js文件。此時，我們便需要借助一些工具以分析這些優化后的文件。

下面的工具由簡單到復雜，各取所需

§ 5.1 Chrome瀏覽器開發工具

§ 5.1.1 工具介紹

Chrome瀏覽器自帶功能，可以查看頁面加載的JS信息

§ 5.1.2 使用方法

Windows: Ctrl+Shift+J(F12也行)

Mac: Cmd+Option+J

點擊Network->JS便能查看加載的JS文件，左下角的{}按鈕可以格式化JS文件，使文件更易讀

§ 5.1.3 使用示例

§ 5.2 Chrome瀏覽器開發工具的coverage功能

§ 5.2.1 工具介紹

查看JS代碼的覆蓋率，如果文件覆蓋率低，說明該文件未使用代碼比例很高。可以通過精簡無用代碼或者懶加載優化

§ 5.2.2 使用方法

在喚起Chrome開發工具的基礎上

Windows: Ctrl+Shift+P

Mac: Cmd+Shift+P

輸入coverage->選擇show coverage->點擊reload按鈕->選擇JavaScript 即可

§ 5.2.3 使用示例

§ 5.3 webpack自帶分析功能

§ 5.3.1 工具介紹

webpack作為常用的編譯工具，也自帶了編譯JS文件的分析功能

更多介紹可以參見webpack官方文檔

§ 5.3.2 使用方法

命令行輸入 webpack --profile --json > stats.json

可以在根目錄生成一個stats.json的文件，里面詳細的列出了編譯后的各JS文件信息

§ 5.3.3 使用示例

§ 5.4 webpack-bundle-analyzer

§ 5.4.1 工具介紹

此webpack插件可以生成可視化的代碼分析報告

§ 5.4.2 使用方法

詳見 https://segmentfault.com/a/1190000012220132

§ 5.4.3 使用示例

§ 5.5 source map

§ 5.5.1 工具介紹

編譯代碼時往往會經歷代碼混淆這一步，大幅減低代碼可讀性。通過source map可以保存代碼轉化關系，方便開發定位問題

§ 5.5.2 使用方法

詳見 https://juejin.im/post/58293502a0bb9f005767ba2f

§ 5.5.3 使用示例

§ 5.6 lighthouse

§ 5.6.1 工具介紹

https://developers.google.com/web/tools/lighthouse

§ 5.6.2 使用方法

詳見 https://zhuanlan.zhihu.com/p/33752746

視頻直播 JavaScript web前端

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。