還在摸黑 ThreeShaking 么？來試下 Chrome Devtools 的 Coverage 可視化
網頁的性能優化我們會分為兩部分來看：資源加載的性能優化、代碼運行的性能優化。
代碼運行的性能優化需要用 Performance 工具記錄某段時間的代碼運行情況，分析出 long task，定位到耗時高的代碼，針對性的優化它。
比如下圖中被標紅的就是 long task：
可以進一步定位到耗時高的代碼，然后對它進行優化。
(不會用 Performance 工具做性能分析的話，可以看這篇文章：快速掌握 Performance 性能分析：一個真實的優化案例)
還有一個方面就是資源加載的性能優化了。
我們會用 webpack、purgecss 做 js 和 css 的 treeshaking，會用 webpack 的 code spliting 做懶加載。目的都是為了把無用的代碼去掉或者延后加載來提升網頁性能。
但是，treeshaking 和 code spliting 很多情況下我們都是摸黑做的，可能用上了這個功能，但卻不知道效果怎么樣，不知道是否真的達到了優化加載性能的目的，把用不到的代碼給刪掉或者延后加載了。
如果能像 Performance 工具分析和可視化代碼耗時一樣，能把沒用到的代碼也給分析出來并可視化展示就好了，那樣就能針對性的去做 treeshaing 或懶加載，還能直觀的看到優化前后的效果。
其實，Chrome Devtools 是有這個功能的，只是很多人不知道。今天我們就來學下這個工具吧。
Coverage 工具分析無用代碼
Chrome Devtools 提供了 Coverage 工具用于分析運行時的代碼使用情況：
我們準備這樣一段代碼：
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <style type="text/css">
- #box {
- width: 300px;
- height: 300px;
- background: blue;
- }
- a {
- color: #fff;
- }
- .box {
- background: pink;
- }
- </style>
- </head>
- <body>
- <div id="box">
- </div>
- <script>
- function add(a, b) {
- return a + b;
- }
- function subtract(a, b) {
- return a - b;
- }
- function multiply(a, b) {
- return a * b;
- }
- function divide(a, b) {
- return a / b;
- }
- const res = add(3, 5);
- console.log(res);
- const res2 = multiply(2, 4);
- console.log(res2);
- </script>
- </body>
- </html>
很明顯，js 里面 subtract、divide 兩個函數沒有用到，css 里面 a、.box 的樣式沒有用到。
我們用 Coverage 工具分析下：
點擊 reload 按鈕
頁面會重新加載并記錄代碼使用情況，藍色是使用的，紅色是未使用的。
點擊會打開 Sources 面板展示詳情：
可以看到，正如我們分析的，js 和 css 的沒用到的代碼都被分析出來了。
優化目標有了，接下來的優化就很有針對性了。
我們會做這些優化：
- 從源碼中刪掉(如果代碼確實沒用的話)
- 用 webpack、purgecss 或其他工具的 treeshking 功能在產物中刪掉(如果這個網頁里用不到的話)
- 用 webpack 或其他工具的 code spliting 做懶加載(如果暫時用不到，之后可能用到的話)
這些優化的目標就是把分析出來的代碼刪掉或者懶加載，優化得很有針對性，而且優化完后可以直觀的看到優化的效果。
小結：資源加載的性能優化可以用 Coverage 工具記錄代碼使用情況，分析出沒用到的代碼，使用 treeshking、懶加載等方式，針對性的優化它。
一般網頁中都引入了多個文件，每個文件代碼使用情況的分析也是一樣 。
比如這樣一個 html，引入了外部 css 和 js 兩個文件
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <link rel="stylesheet" type="text/css" href="index.css" />
- </head>
- <body>
- <div id="box">
- </div>
- <script src="index.js"></script>
- </body>
- </html>
js：
- function add(a, b) {
- return a + b;
- }
- function subtract(a, b) {
- return a - b;
- }
- function multiply(a, b) {
- return a * b;
- }
- function divide(a, b) {
- return a / b;
- }
- const res = add(3, 5);
- console.log(res);
- const res2 = multiply(2, 4);
- console.log(res2);
css:
- #box {
- width: 300px;
- height: 300px;
- background: blue;
- }
- a {
- color: #fff;
- }
- .box {
- background: pink;
- }
也同樣可以分析出來：
總結
性能優化分為代碼運行的性能優化、資源加載的性能優化。
代碼運行的性能優化會用 Performance 工具記錄耗時數據，可以可視化的分析，然后針對性的優化。
同樣，資源加載的性能優化可以用 Coverage 工具記錄代碼使用情況，可視化的標記出沒用到的代碼，之后就可以針對性的優化了，用 treeshking 或者 code splinting 的懶加載等方式。
總之，別再摸黑做 treeshking 等性能優化了，學會了用 Coverage 工具，要優化啥，優化的效果怎么樣，一目了然!
