奇技淫巧：Chrome DevTools 代碼覆蓋率功能詳解

共 1812 字，讀完需 3 分鐘。工欲善其事必先利其器，前端週刊本週起每週會加餐 1 篇工具技巧，裏面輔以動圖，讓你們看完就能學會，並上手使用。本文會介紹 Chrome Canary 新增的代碼覆蓋率功能、如何收集數據、如何基於它收集的數據來改進 WEB 應用的性能。

Chrome Canary 開發者工具中本週新增了 Coverage 功能，該功能同時適用於 JS 和 CSS，並有望很快登錄 Chrome 正式版。

Coverage 顧名思義就是代碼覆蓋率的意思，本文會跟你們介紹 Coverage 功能是什麼、如何收集數據、及如何基於它收集的數據來改進 WEB 應用的性能。

Coverage 功能使用動態分析（Dynamic Analysis）法來收集代碼運行時的覆蓋率，讓開發者可以窺探他的代碼到底有多大比例在發光發熱。動態分析是指在應用運行狀態下收集代碼執行數據的過程，換句話說，覆蓋率數據就是在代碼執行過程當中經過標記收集到的。

Coverage 工具怎麼用？

在探討 Coverage 工具帶來的好處以前，先快速看下如何使用它來收集覆蓋率數據：

1. 調起 Coverage 面板

2. 錄製 Coverage 數據

與 Performance 面板相似，Coverage 面板左上角有 3 個按鈕，點擊錄製的時候會開始錄製，同時錄製按鈕變紅，再次點擊錄製按鈕會中止錄製並把錄製到的覆蓋率數據展現出來。此外，能夠點擊中間的快捷按鈕，「刷新並開始錄製」，待頁面加載完以後中止錄製。

Coverage 工具要求咱們手動錄製的緣由是：動態分析過程須要監控每行代碼的執行狀況，也就意味着錄製過程當中執行的代碼要比原始的應用的代碼要多，由於動態分析過程須要對你的代碼進行某種變換才知道哪些行被執行了。

3. 查看 Coverage 數據

如上圖所示，Coverage 錄製結果表格展現了錄製過程當中加載的全部 JS 和 CSS 文件，以及每一個文件的大小、運行時覆蓋率，彙總數據展現在頁面底部的狀態欄中（上面的截圖沒有展現）。單擊單個靜態資源能將其在 Sources 面板中打開，代碼行號的左邊用紅綠色的條來標識代碼是否在錄製過程當中被執行到。

Coverage 數據有啥用？

上面錄製的數據中，最大的文件是 vendor.js，其中 55% 的代碼都沒有執行過，約 80 KB，這已經至關於一張典型圖片的文件大小了。

若是某個文件覆蓋率低（即未使用代碼比例很高），一般意味着用戶加載了太多沒必要要的代碼（要麼真的是無用代碼，要麼是當前時點還沒執行到的代碼），有性能常識的同窗不難推斷出，這會致使頁面的徹底加載時間、或單頁應用的啓動時間變慢，在慢速網絡下的性能損耗會尤爲明顯；此外，更多代碼的解析、編譯也就意味着更多的硬件資源消耗，在低端設備上也會存在明顯的性能問題。

在筆者看來，Coverage 數據至少能從下面 2 個方面指導咱們進行 WEB 應用的優化：

除移死代碼

以 Coverage 數據爲參考，咱們能瞭解頁面重無用代碼的比例到底有多大。現實世界中，不少工程師多是在遺留代碼庫上工做，而且遺留代碼庫存在的時間還很長，那麼極可能這個代碼庫中存在大量的無用代碼，可是誰也不敢刪除他們，由於 JS 這門語言的動態性，你不能粗暴的把哪些看起來「沒有被使用」的代碼直接刪掉，除非你很清楚全部的代碼執行路徑，很顯然這對於大型應用或者遺留代碼庫來講是不現實的。

怎麼移除死代碼呢？咱們能夠依賴打包工具，好比 UglifyJS 在壓縮代碼時支持直接刪除死代碼的配置項。而 Webpack 2 中引入了 Tree Shaking 的特性，可以自動把項目中沒有用到的代碼從打包中去掉，可是這種優化僅限於被 export 的代碼。總而言之，死代碼要儘量想辦法去掉，Coverage 工具能提供一個判斷基準。

懶加載代碼

若是能刪的死代碼都刪了，可是 Coverage 數據仍是居高不下，那麼你應該換個角度思考。就像前文所說，JS 是動態語言，可能部分代碼在頁面加載時並無用到，可是用戶後來的操做會觸發這些代碼的執行，爲何不讓這些代碼在須要的時候再加載呢？聰明的你可能已經想到了，這就是懶加載的技術。

使用 Webpack 打包且沒有對配置作特別調優的話，它默認會把全部依賴打包成一個巨大的文件，很容易出現首次加載覆蓋率很低的狀況，在 Webpack 中實現懶加載能夠參考 Code Splitting 和 bundle-loader，具體的配置細節這裏不展開講。使用懶加載以後能夠極大的減小頁面初次下載的代碼，從而提升性能。須要注意的是，懶加載優化須要在模塊數量和模塊大小之間把握一個平衡，不然過多的模塊懶加載反而對性能不利，由於每一個 HTTP 請求也是有額外開銷的。

One More Thing

本文做者王仕軍，商業轉載請聯繫做者得到受權，非商業轉載請註明出處。若是你以爲本文對你有幫助，請點贊！若是對文中的內容有任何疑問，歡迎留言討論。想知道我接下來會寫些什麼？歡迎訂閱知乎專欄：《前端週刊：讓你在前端領域跟上時代的腳步》。