The compression-webpack-plugin plugin for project performance optimization enables gzip compression, taking vue as an example

Problem Description

This article takes vue as an example, record it, use the webpack plugin compression-webpack-plugin open gzip压缩 the steps and process, and compare the time required before and after turning on gzip compression, and get Conclusion: **这个插件的确能够做性能优化，减少加载的时间** react is also the same reason, so I won't repeat it here

Vue.config.js configuration of front-end configuration

The first step, download compression-webpack-plugin

cnpm i compression-webpack-plugin@6.1.1 --save

Note that you cannot download directly here, you need to download a lower version. Direct download is the latest version. Vue scaffolding does not support the latest version for the time being, so an error will be reported: TypeError: Cannot read property 'tapPromise' of undefined . My download here is to specify the @6.1.1 version, which is available

The second step, vue.config.js use

Just copy and paste the code below

 const CompressionPlugin = require('compression-webpack-plugin');//引入gzip压缩插件

// 暴露配置项，会被合并到webpack中去
module.exports = {
    chainWebpack(config) {
        // ......
    },
    configureWebpack: config => {
        // 开发环境不配置
        if (process.env.NODE_ENV !== 'production') return
        // 生产环境才去配置
        return {
            plugins: [
                new CompressionPlugin({ //此插件不能使用太高的版本，否则报错：TypeError: Cannot read property 'tapPromise' of undefined
                    // filename: "[path][base].gz", // 这种方式是默认的，多个文件压缩就有多个.gz文件，建议使用下方的写法
                    filename: '[path].gz[query]', //  使得多个.gz文件合并成一个文件，这种方式压缩后的文件少，建议使用
                    algorithm: 'gzip', // 官方默认压缩算法也是gzip
                    test: /\.js$|\.css$|\.html$|\.ttf$|\.eot$|\.woff$/, // 使用正则给匹配到的文件做压缩，这里是给html、css、js以及字体（.ttf和.woff和.eot）做压缩
                    threshold: 10240, //以字节为单位压缩超过此大小的文件，使用默认值10240吧
                    minRatio: 0.8, // 最小压缩比率，官方默认0.8
                    //是否删除原有静态资源文件，即只保留压缩后的.gz文件，建议这个置为false，还保留源文件。以防：
                    // 假如出现访问.gz文件访问不到的时候，还可以访问源文件双重保障
                    deleteOriginalAssets: false
                })
            ]
        }
    },
};

After the configuration is completed, it cannot be used for the time being, and the back-end needs to be configured. Here, the back-end takes nginx as an example.

nginx configuration of backend configuration

Just copy and paste the code below

 server {
        listen       80;
        server_name  localhost;
        location / {
            try_files $uri $uri/ /index.html;
            root C:/nginx-1.18.0/html/gzip/dist;
            index  index.html index.htm;
        }
        location /api/ {
            proxy_pass http://localhost:6666/;
        }
        
        # 主要是下方的gizp配置哦，直接复制粘贴就可以使用啦，亲测有效哦
        gzip on; # 开启gzip压缩
        gzip_min_length 4k; # 小于4k的文件不会被压缩，大于4k的文件才会去压缩
        gzip_buffers 16 8k; # 处理请求压缩的缓冲区数量和大小，比如8k为单位申请16倍内存空间；使用默认即可，不用修改
        gzip_http_version 1.1; # 早期版本http不支持，指定默认兼容，不用修改
        gzip_comp_level 2; # gzip 压缩级别，1-9，理论上数字越大压缩的越好，也越占用CPU时间。实际上超过2的再压缩，只能压缩一点点了，但是cpu确是有点浪费。因为2就够用了
                 # 压缩的文件类型 MIME类型，百度一下，一大把                                    # css             # xml             # 识别php     # 图片
        gzip_types text/plain application/x-javascript application/javascript text/javascript text/css application/xml application/x-httpd-php image/jpeg image/gif image/png application/vnd.ms-fontobject font/x-woff font/ttf;
                 # text                   # 早期js                 # js        # js的另一种写法                                                                                 # .eot字体                   # woff字体  # ttf字体
        gzip_vary on; # 是否在http header中添加Vary: Accept-Encoding，一般情况下建议开启       
    }

Loading time icon without gzip compression turned on

When the project does not use the compression-webpack-plugin plug-in and is not enabled, we find that the time can be hundreds of milliseconds, and the loading time of resources is a bit long. The following figure is not enabled:

Turn on gzip compression, load time icon

gizp compresses one more .gz file

Note that after turning on gzip compression, there will be more .gz files in the corresponding compressed files, such as in the font compression folder:

Of course, there are also .gz 7acf21e7f48f41cbfe90d6eb2673fd29--- in other js folders, and .gz in css folders. Next, let's see how much is optimized after gzip compression is turned on

See how the final performance optimization looks like

Compared with the above without gzip compression, the loading time is indeed optimized a lot. In addition, in terms of loading on the first screen, the intuitive feeling is also faster.

The response header has more Content-Encoding: gzip

In addition, if gzip compression is enabled, in the http request, you can also see that there are more response headers Content-Encoding: gzip , which is not possible without gzip compression. As shown below:

Summarize

Good memory is not as good as bad writing, record it, if it helps you give a like ^_^