Compression of front-end performance (hands-on experience)

I. Introduction

In the process of working on a project recently, I found that the project is getting bigger and bigger. The compiled package is also getting bigger and bigger.

It can be found that there are a full 35M

After that, go to the js folder under static.

It is found that there are two files, one is 4M and the other is 13M, which are larger than the others.

So I searched for various ways to improve the response speed of the page and interface on the Internet. Unfortunately, most of the posts on the Internet are copied and pasted from others. In the end, you can only do it yourself.

2. compression-webpack-plugin

Closer to home. After querying, I found that there is a library in the front end. compression-webpack-plugin

The introduction method is also very simple

 yarn add compression-webpack-plugin --D

Note that the compression-webpack-plugin must match the webpack in your project, otherwise there will be problems.
The general corresponding diagram is

 compression-webpack-plugin是8.x，  则webpack需要5.x
compression-webpack-plugin是7.x，  则webpack需要5.x
compression-webpack-plugin是6.x，  则webpack需要4.x或者5.x
compression-webpack-plugin是5.x，  则webpack需要4.x或者5.x

For example, the webpack in your project is 4.x, then compression-webpack-plugin can only use 5 and 6. Versions 7 and 8 cannot be used.

Take vue-cli3.x as an example.

 const CompressionPlugin = require("compression-webpack-plugin");


...其他代码
configureWebpack:{
  plugins:[
    new CompressionWebpackPlugin({
      test: /\.(js|css)?$/i, // 哪些文件要压缩
      filename: "[path][base].gz", // 压缩后的文件名
      algorithm: "gzip", // 使用gzip压缩
      threshold: 10240, //大于 10240字节，既10k时
      minRatio: 0.8,  //压缩率
      deleteOriginalAssets: true, //是否删除原本的js
    });
  ]
}
...其他代码

Let's first explain the meaning of several parameters in the CompressionWebpackPlugin option.

1. test: It is a regular expression that indicates which files need to be compressed. Here we select files ending with .js and .css. In this case the following files are in scope.

2. filename: Indicates the compressed file name, the suffix must be .gz (gzip file format), path and base indicate that the name and path of the source file will be carried when compressing. for example

 index.9b65b390.js   //需要压缩的源文件
index.9b65b390.js.gz   //压缩之后的文件。

3. algorithm: compression method.

Generally, you can choose gzip and brotliCompress, and brotliCompress will be mentioned later.

4, threshold: compression threshold

Indicates that the size of the file exceeds the defined bytes, it will be compressed

threshold: 10240 means that more than 10240 bytes, that is, more than 10k is compressed.

5. The usage of minRatio has not been tried, and will be added later.

6. deleteOriginalAssets: Indicates whether to delete the source file.

90% of the online are all false.

So if we have two files

 index.9b65b390.js  
index.9b65b390.js.gz

If deleteOriginalAssets: true, only index.9b65b390.js.gz is left at the end

The effect is this

Finally check the dist, it has been reduced from the original 37M to 19M

And if deleteOriginalAssets is false, then both the final source file and the gz file are there.

Finally, I checked the dist and found that it was larger than the 37M before I compressed it. reached 41M

So what am I drawing? Is Figure 37M not big enough?

So if we want to make dist smaller, we must select deleteOriginalAssets as true.
But note that in development mode, this should be false, otherwise the browser will report an error and a blank page.

2. nginx

After the front-end is packaged with gz, the back-end needs to be configured. Take nginx as an example.
Just add one line of code.

Some friends will say. "gzip true" also works.

That's right, gzip true does. like this

But gzip is dynamic compression, such as your interface returns a lot of data or returns static large js files. The server will root out your gzip_min_length configuration, compress in real time, and return it to you. In this process, the server consumes performance and resources. The less you compress. The slower the server processes, the longer your http waits accordingly.

And gzip_static means to find the .gz file directly from the server. If there is, return directly. If not, the next best thing is to find the source files. In this process, the server response is very fast.

You can also configure both. gzip_static takes precedence over gzip

 location / {
       root   html;
       index  index.html; 
       gzip_static on; 
}


gzip  on;
gzip_min_length 10k;
gzip_comp_level 1;
gzip_types text/plain application/json application/javascript text/css;
gzip_vary on;

Open the browser and we can see that the content-encoding is gzip, and the file size is 4.2M, which is much smaller than the 13M we did not compress at the beginning.

Finally, after the gz file is returned, no explicit processing is required, and the browser will automatically decompress it.

Looking at the browser, we found that the acceptable compression formats defined by Accept-Encoding are gzip, deflate, and br. The format returned by the server to us is Content-Encoding: gzip, which is OK and the browser can handle it.

When you mouse over the position of 4.2M, there will be something similar to the title, indicating that only 4.2M is transmitted through the network. But actually the source file has 13.9M.

3. Brotli

When talking about algorithm in CompressionWebpackPlugin just now, in addition to gzip, there is another compression method, that is brotli.

It is a more efficient compression method. Moreover, all major browsers basically support it, but it is also strict. HTTPS is required. Brotli is not supported in http.

The following is the configuration of vue

 const CompressionPlugin = require("compression-webpack-plugin");
const zlib = require("zlib");

...其他代码
configureWebpack:{
  plugins:[
    new CompressionWebpackPlugin({
      test: /\.(js|css)?$/i, 
      filename: "[path][base].br",
      algorithm: "brotliCompress", 
      threshold: 10240, 
      minRatio: 0.8, 
      deleteOriginalAssets: true, //是否删除原本的js
      compressionOptions: {
          params: {
              [zlib.constants.BROTLI_PARAM_QUALITY]: 11,
          },
      },
    });
  ]
}
...其他代码

After compression, we find that it is smaller than the gzip compression just now

The size of the entire dist has been reduced from 19M in gzip to 16M

Then set the nginx configuration.

 location / {
       root   html;
       index  index.html; 
       brotli_static on; 
}


brotli on;  
brotli_comp_level 6;
brotli_buffers 16 8k;
brotli_min_length 20;
brotli_types *;

Note that nginx does not have the brotli module by default, it needs to be installed and compiled (the back end knows how to do it, the front end doesn't care)

Then open the browser and we will see