還在摸黑 ThreeShaking 么？來試下 Chrome Devtools 的 Coverage 可視化

作者：神說要有光zxg 2021-12-30 11:56:27

網(wǎng)頁的性能優(yōu)化我們會(huì)分為兩部分來看：資源加載的性能優(yōu)化、代碼運(yùn)行的性能優(yōu)化。代碼運(yùn)行的性能優(yōu)化需要用 Performance 工具記錄某段時(shí)間的代碼運(yùn)行情況，分析出 long task，定位到耗時(shí)高的代碼，針對(duì)性的優(yōu)化它。

[[443091]]

網(wǎng)頁的性能優(yōu)化我們會(huì)分為兩部分來看：資源加載的性能優(yōu)化、代碼運(yùn)行的性能優(yōu)化。

代碼運(yùn)行的性能優(yōu)化需要用 Performance 工具記錄某段時(shí)間的代碼運(yùn)行情況，分析出 long task，定位到耗時(shí)高的代碼，針對(duì)性的優(yōu)化它。

比如下圖中被標(biāo)紅的就是 long task：

可以進(jìn)一步定位到耗時(shí)高的代碼，然后對(duì)它進(jìn)行優(yōu)化。

(不會(huì)用 Performance 工具做性能分析的話，可以看這篇文章：快速掌握 Performance 性能分析：一個(gè)真實(shí)的優(yōu)化案例)

還有一個(gè)方面就是資源加載的性能優(yōu)化了。

我們會(huì)用 webpack、purgecss 做 js 和 css 的 treeshaking，會(huì)用 webpack 的 code spliting 做懶加載。目的都是為了把無用的代碼去掉或者延后加載來提升網(wǎng)頁性能。

但是，treeshaking 和 code spliting 很多情況下我們都是摸黑做的，可能用上了這個(gè)功能，但卻不知道效果怎么樣，不知道是否真的達(dá)到了優(yōu)化加載性能的目的，把用不到的代碼給刪掉或者延后加載了。

如果能像 Performance 工具分析和可視化代碼耗時(shí)一樣，能把沒用到的代碼也給分析出來并可視化展示就好了，那樣就能針對(duì)性的去做 treeshaing 或懶加載，還能直觀的看到優(yōu)化前后的效果。

其實(shí)，Chrome Devtools 是有這個(gè)功能的，只是很多人不知道。今天我們就來學(xué)下這個(gè)工具吧。

Coverage 工具分析無用代碼

Chrome Devtools 提供了 Coverage 工具用于分析運(yùn)行時(shí)的代碼使用情況：

我們準(zhǔn)備這樣一段代碼：

<!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 兩個(gè)函數(shù)沒有用到，css 里面 a、.box 的樣式?jīng)]有用到。

我們用 Coverage 工具分析下：

點(diǎn)擊 reload 按鈕

頁面會(huì)重新加載并記錄代碼使用情況，藍(lán)色是使用的，紅色是未使用的。

點(diǎn)擊會(huì)打開 Sources 面板展示詳情：

可以看到，正如我們分析的，js 和 css 的沒用到的代碼都被分析出來了。

優(yōu)化目標(biāo)有了，接下來的優(yōu)化就很有針對(duì)性了。

我們會(huì)做這些優(yōu)化：

從源碼中刪掉(如果代碼確實(shí)沒用的話)
用 webpack、purgecss 或其他工具的 treeshking 功能在產(chǎn)物中刪掉(如果這個(gè)網(wǎng)頁里用不到的話)
用 webpack 或其他工具的 code spliting 做懶加載(如果暫時(shí)用不到，之后可能用到的話)

這些優(yōu)化的目標(biāo)就是把分析出來的代碼刪掉或者懶加載，優(yōu)化得很有針對(duì)性，而且優(yōu)化完后可以直觀的看到優(yōu)化的效果。

小結(jié)：資源加載的性能優(yōu)化可以用 Coverage 工具記錄代碼使用情況，分析出沒用到的代碼，使用 treeshking、懶加載等方式，針對(duì)性的優(yōu)化它。

一般網(wǎng)頁中都引入了多個(gè)文件，每個(gè)文件代碼使用情況的分析也是一樣。

比如這樣一個(gè) html，引入了外部 css 和 js 兩個(gè)文件

<!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; 
}

也同樣可以分析出來：

總結(jié)

性能優(yōu)化分為代碼運(yùn)行的性能優(yōu)化、資源加載的性能優(yōu)化。

代碼運(yùn)行的性能優(yōu)化會(huì)用 Performance 工具記錄耗時(shí)數(shù)據(jù)，可以可視化的分析，然后針對(duì)性的優(yōu)化。

同樣，資源加載的性能優(yōu)化可以用 Coverage 工具記錄代碼使用情況，可視化的標(biāo)記出沒用到的代碼，之后就可以針對(duì)性的優(yōu)化了，用 treeshking 或者 code splinting 的懶加載等方式。

總之，別再摸黑做 treeshking 等性能優(yōu)化了，學(xué)會(huì)了用 Coverage 工具，要優(yōu)化啥，優(yōu)化的效果怎么樣，一目了然!

責(zé)任編輯：武曉燕來源：神光的編程秘籍