分析JavaScript打包產(chǎn)物的工具和方法是怎樣的

今天就跟大家聊聊有關(guān)分析JavaScript 打包產(chǎn)物的工具和方法是怎樣的，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

按需設(shè)計(jì)可以根據(jù)自己的需求進(jìn)行定制，成都網(wǎng)站設(shè)計(jì)、做網(wǎng)站、成都外貿(mào)網(wǎng)站建設(shè)公司構(gòu)思過程中功能建設(shè)理應(yīng)排到主要部位公司成都網(wǎng)站設(shè)計(jì)、做網(wǎng)站、成都外貿(mào)網(wǎng)站建設(shè)公司的運(yùn)用實(shí)際效果公司網(wǎng)站制作網(wǎng)站建立與制做的實(shí)際意義

分析你網(wǎng)頁中的 JavaScript Bundles 大小，并限制網(wǎng)頁中的 JavaScript 數(shù)量，可以減少瀏覽器花費(fèi)在解析、編譯和執(zhí)行  JavaScript 的時(shí)間。這可以加快瀏覽器可以開始響應(yīng)用戶交互行為的速度，從而改善 First Input Delay、Largest Contentful  Paint 等幾個(gè)重要的性能指標(biāo)。

查看 JavaScript 文件

使用 Chrome Devtools 中的 Network 看板是查看頁面上下載所有 JavaScript  最簡單的方法。

按 Ctrl+Shift+J 或在Mac上 Command+Options+J 打開 Devtools：

然后打開 Network 看板，在看板處于打開狀態(tài)下重新刷新頁面，并點(diǎn)擊 JS 篩選項(xiàng)篩選出所有 JavaScript 文件。

可以看到，這是一個(gè)很簡單的網(wǎng)頁，里面的代碼執(zhí)行邏輯也很簡單，但是如果是一個(gè)把所有依賴和代碼邏輯都打包在一起的JS文件就不會(huì)這么容易分析了，里面的邏輯會(huì)非?；靵y，你會(huì)很難看出里面的代碼邏輯。

下面是一個(gè)將許多第三方庫和本身站點(diǎn)的js模塊打包到一起的網(wǎng)站：

下面我們來看看分析這種代碼的方法：

Show Coverage

按 Ctrl+Shift+P 或在Mac上 Command+Options+PP 打開命令菜單，搜索 Coverage然后選擇  Show Coverage 命令：

然后重新加載網(wǎng)頁，在下拉菜單中選擇 JavaScript：

在表格中，我們可以很明確的看到每個(gè)文件有多少未使用的 JavaScript，你還可以單擊任何 URL 進(jìn)行逐行查看分析。

Webpack

盡管上面的方法能讓我們看到有多少未使用的 JavaScript 但是要分析組成 Bundles的模塊仍然不容易。

如果你已經(jīng)在你的網(wǎng)站上打包JS了，那么你肯定使用了 webpack、rpllup  等模塊打包器，其中很多的工具都為我們提供了分析模塊的非常好的方式。

讓我們看一個(gè)例子，如果你在用 Webpack，那么你可以生成一個(gè) stats.json 的文件，其中包含所有打包模塊的統(tǒng)計(jì)信息。

雖然直接看這個(gè)文件也能看出有哪些模塊，但是社區(qū)的一些工具能夠幫我們更好的對(duì)模塊信息進(jìn)行可視化分析：

比如 webpack-bundle-analyzer，它通過分析 Webpack 打包后的產(chǎn)物，將其映射到 stats.json  的模塊名稱，然后就創(chuàng)建出了打包產(chǎn)物的交互式樹形可視化。顯示了每個(gè)模塊的大小、Gzip解析大小以及彼此之間的關(guān)系。

SourceMap

這些打包器提供的可視化工具很棒，但是它們都屬于打包器特定的工具，對(duì)于任何網(wǎng)站，無論使用任何打包器，都可以用  SourceMap 將打包后的代碼還原成原始代碼。這非常有用，因?yàn)樗梢允刮覀冊跇?gòu)建過程中經(jīng)過混淆和轉(zhuǎn)換的代碼仍然可以被還原。

在壓縮或打包后的 JavaScript 文件中，通過注釋指向 SourceMap 文件的位置。

所有比較新的瀏覽器都支持源映射，使用 Chrome，你可以在 Devtools 中啟用它：

當(dāng) Chrome 檢測到可用的 SourceMap 時(shí)，可以還原源代碼：

source-map-expoler

source-map-expoler 可以通過 SourceMap 生成打包產(chǎn)物的樹形可視化關(guān)系，通過查看這些模塊關(guān)系，我們可以發(fā)現(xiàn)一些問題：

比如上面的 moment、lodash 兩個(gè)庫，占整個(gè)文件的比重非常大，它們的大小遠(yuǎn)遠(yuǎn)超出它們的使用價(jià)值，我們可以將它們都轉(zhuǎn)換成 ES  模塊，則它們可以變的更小更優(yōu)化。

Lighthouse

使用 Lighthouse，同樣可以通過 SourceMap 分析我們打包產(chǎn)物中未使用的 JavaScript 代碼。

另外還有一個(gè)正在探索中的功能，可以利用 SourceMap 分析打包產(chǎn)物中在新瀏覽器不需要的 polifill 代碼。

看完上述內(nèi)容，你們對(duì)分析JavaScript 打包產(chǎn)物的工具和方法是怎樣的有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝大家的支持。

分享題目：分析JavaScript打包產(chǎn)物的工具和方法是怎樣的
文章源于：http://muchs.cn/article32/pjjgpc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信公眾號(hào)、網(wǎng)站維護(hù)、網(wǎng)站收錄、品牌網(wǎng)站設(shè)計(jì)、域名注冊、服務(wù)器托管

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)