webpack - rendering optimization blocking css

随着浏览器的日新月异，网页的性能和速度越来越好，并且对于用户体验来说也越来越重要。
现在有很多优化页面的办法，比如：静态资源的合并和压缩，code splitting，DNS预读取等等。
本文介绍的是另一种优化方法：首屏阻塞css优化

principle:

First, we look at the basic rendering process (the page reference ): webkit rendering process:

Gecko rendering process:

So why do this optimization it? Is a flowchart of the above reasons: firstly generating dom html parsing tree generated while parsing css css tree, then a combination of both to generate the render tree, and then rendered to the screen. Not only that, if there are other behind css javascript, css and loading time is too long, will be blocked behind js execution because js might operate dom node or css styles, it is necessary to wait for the render tree is complete. So, if we can optimize css, it can greatly reduce page render time, so as to enhance pv, increased viscosity, to the pinnacle of coding. . .

How to do it:

Currently I know of more practical approach is to integrate webpack Critical , Critical extract is a key css, html inline to, and use of preload and non-critical load css noscript compatible tools. So, we come to the point, the configuration directly from the webpack start:

const HtmlWebpackPlugin = The require ( ' html-WebPACK-plugin ' ); // create html to serve your resources 
const MiniCssExtractPlugin = The require ( ' Mini-plugin-css-Extract ' ); // extract to a separate css file, you need webpack4 
const HtmlCriticalWebpackPlugin the require = ( ' HTML-critical-WebPACK-plugin ' ); // integration of critical html-webpack-plugin version 
const path = the require ( ' path ' ); 

// for setting Chromium, as used npm or yarn Chromium often have problems 
process.env [ ' PUPPETEER_EXECUTABLE_PATH '] =
     ' Your computer's address Chromium ' ; 

module.exports = { 
    MODE: ' none ' , 
    Module1: { 
        the rules: [ 
            { 
                Test: /\.css$/ ,
                 // used in place MiniCssExtractPlugin.loader Loader-style 
                use: [MiniCssExtractPlugin.loader, ' CSS-Loader ' ] 
            }, 
            { 
                Test: /\.js$/ , 
                use: { 
                    Loader: ' Babel-Loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({ template: './index.html' }),
        new MiniCssExtractPlugin({}),
        new HtmlCriticalWebpackPlugin({
            base: path.resolve(__dirname, 'dist'),
            src: 'index.html',
            dest: ' index.html ' , 
            inline: to true , 
            Minify: to true , 
            Extract: to true , 
            width: 375 , 
            height: 565 ,
             // make sure the JS file after the call packaged 
            Penthouse: { 
                blockJSRequests: to false 
            } 
        }) 
    ] 
};

Then the html file:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>Document</title>
    </head>
    <body>
        <div class="div"></div>
        <H2> Hello World </ H2>
        <div class = " mask " > This is a pop </ div> 
    </ body> 
</ HTML>

Followed css file:

.div {
    width: 200px;
    height: 100vh;
    background-color: red;
}
h2 {
    color: blue;
}
.mask {
    width: 500px;
    height: 500px;
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    background-color: yellowgreen;
}

After running webpack, after viewing package html file:

// 省略...
<style>
    .div {
        width: 200px;
        height: 100vh;
        background-color: red;
    }
    .mask {
        width: 500px;
        height: 500px;
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        margin: auto;
        background-color: #9acd32;
    }
</style>
<link
    href="main.80dc2a9c.css"
    rel="preload"
    as="style"
    onload="this.onload=null;this.rel='stylesheet'"
/>
<noscript><link href="main.80dc2a9c.css" rel="stylesheet"/></noscript>
// 省略...

In this code repository, click the fork actual combat exercises

You can see, css styles h2 tag does not appear inline style, but rather appear in the main. [Hash] .css because it is no longer within the range set by the first screen, which is called the first screen css optimization.

related information

Html file in the package above, we have seen there is a link within the rel="preload" as="style"field, immediately below there is a noscriptlabel, is what these two do it? - rel="preload" as="style": for preloading pages, rel="preload"tells the browser to start getting non-critical CSS for later use. The key is, preloaddo not block rendering, regardless of whether the resource is loaded, the browser will then draw page. And, as with the use, you can specify the type of content that will be pre-loaded, you can let the browser: 1. More precisely optimize resource load priority. 2. Matching the future load demand, in appropriate cases, re-use the same resources. 3. In order to apply the correct resources, content security policy. 4. Set the correct resource Accept request header. - noscript: If the script on the page type is currently not supported or turned off script in the browser, then the HTML <noscript> define alternate content when a script is not executed element. In other words, when the browser does not support js script or the user take the initiative to close the script, it will display noscriptthe contents, while critical is to use it to do a backwards compatible

to sum up

Use critical can greatly improve the page rendering speed, but because of its use puppeteer, so download and install more trouble, above webpack method used to set env puppeteer in the position to solve this problem.

Original link: https://zhuanlan.zhihu.com/p/93876841