Webpage performance optimization can be divided into two parts: resource loading performance optimization, code running performance optimization.

The Performance optimization of code operation requires the Performance tool to record the code operation in a certain period of time, analyze the long task, locate the time-consuming code, and optimize it accordingly.

For example, the long Task is highlighted in red:

You can further locate the time-consuming code and optimize it.

(For those who do not know how to use the Performance tool for Performance analysis, check out this article: Quick Performance Analysis: A Real-world Optimization Case study)

Another aspect is the performance optimization of resource loading.

We’ll use Webpack and Purgecss for treeshaking for JS and CSS, and webpack code spliting for lazy loading. The goal is to get rid of useless code or delay loading to improve the performance of the page.

But treeshaking and Code spliting a lot of times we’re doing itin the dark, and we’re probably using it, but we don’t know if we’re actually optimizing the loading performance, if we’re deleting code that we don’t need or loading it later.

It would be nice to be able to analyze and visualize unused code just as Performance tools analyze and visualize code time, so that you can target treeshaing or lazy loading, and also intuitively see the effect before and after optimization.

In fact, Chrome Devtools does have this feature, but many people don’t know it. Today we are going to learn this tool.

The Coverage tool analyzes useless code

Chrome Devtools provides the Coverage tool to analyze runtime code usage:

We prepare a code like this:

<! DOCTYPEhtml>
<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>
Copy the code

Subtract and divide functions are not used in JS, and a and.box styles are not used in CSS.

Let’s use the Coverage tool to analyze:

Hit the Reload button

The page reloads and records the code usage, blue for used and red for unused.

Click on Sources to open the details:

As you can see, unused js and CSS code has been analyzed as we analyzed it.

With the optimization goal, the next optimization is very targeted.

We do these optimizations:

  • Delete from the source (if the code is really useless)
  • Treeshking functionality with Webpack, Purgecss, or other tools is removed from production (if not used in this page)
  • Lazy loading with Webpack or code Spliting (if you don’t need it right now, but you may need it later)

The goal of these optimizations is to delete or lazily load the code analyzed. The optimization is very targeted, and after optimization, the effect of optimization can be seen intuitively.

Summary: The performance optimization of resource loading can use the Coverage tool to record the code usage, analyze the used code, and optimize it specifically by using treeshking, lazy loading and other methods.

The average web page introduces multiple files, so does the analysis of the code usage of each file.

An HTML, for example, introduces two external CSS and JS files

<! DOCTYPEhtml>
<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>
Copy the code

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);
Copy the code

css:

#box {
    width: 300px;
    height: 300px;
    background: blue;
}
a {
    color: #fff;
}
.box {
    background: pink;
}
Copy the code

It can also be analyzed:

conclusion

Performance optimization is divided into code running performance optimization and resource loading performance optimization.

Performance optimizations for code run will use the Performance tool to record time consuming data, which can be analyzed visually and then optimized for specific purposes.

Similarly, the performance optimization of resource loading can be achieved by using the Coverage tool to record the usage of the code, and the visualized marking of the used code can be used. After that, targeted optimization can be carried out, such as treeshking or code splinting lazy loading.

In summary, don’t do treeshking and other performance optimization in the dark, learn to use the Coverage tool, what to optimize, how the optimization effect is clear!