共 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
本文作者王仕軍，商業轉載請聯絡作者獲得授權，非商業轉載請註明出處。如果你覺得本文對你有幫助，請點贊！如果對文中的內容有任何疑問，歡迎留言討論。想知道我接下來會寫些什麼？歡迎訂閱知乎專欄：《前端週刊：讓你在前端領域跟上時代的腳步》。