前端性能优化三十九：花裤衩模板gzip的webpack配置

1. 配置:

(1). 安装插件:

①. 安装 compression-webpack-plugin:
    yarn add compression-webpack-plugin@6.1.1 -D

②. 新版本 7.x 会报错:
    a. Cannot read property 'tapPromise' of undefined

(2). 在 vue.config.js 中配置:

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

module.exports = {
    chainWebpack(config) {
        ...
        // 方式一:
        config
            .when(process.env.NODE_ENV === 'production',
                config => {
                    config
                        .plugin('compression')
                        .use(CompressionPlugin)
                        .tap(() => [{
                            test: /\.js$|\.html$|\.css$/, // 匹配文件名,开启js、css压缩
                            filename: '[path].gz[query]', // 压缩后的文件名(保持原文件名,后缀加.gz)
                            minRatio: 1, // 压缩率小于1才会压缩
                            threshold: 10240, // 对超过10k的数据压缩
                            deleteOriginalAssets: false // 是否删除未压缩的源文件(不设置或设置为false)
                            // 保留非gzip的资源,删除打包后的gz后还可以加载到原始资源文件,建议不要设置为true
                        }])
                }
            )
        // 方式二:
        if (process.env.NODE_ENV === 'production') {
            config.plugin('compression-webpack-plugin')
                .use(new CompressionPlugin({
                    test: /\.js$|\.html$|\.css/,
                    threshold: 10240,
                    deleteOriginalAssets: false
                }))
        }
    }
}

①. test 另种写法:
    const productionGzipExtensions = ['html', 'js', 'css']
    test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$')

②. 打包后目录会多出 .gz 文件:
    -rw-r--r--  1 xx  staff   42756  3 28 23:01 app.9c5d6e51.js
    -rw-r--r--  1 xx  staff   14495  3 28 23:01 app.9c5d6e51.js.gz
    -rw-r--r--  1 xx  staff   14072  3 28 23:01 chunk-19edcdf1.2e318185.js
    -rw-r--r--  1 xx  staff    4791  3 28 23:01 chunk-19edcdf1.2e318185.js.gz
    // 有些没有gz是因为大小没有超过设定的10k
    -rw-r--r--  1 xx  staff      11  3 28 23:01 chunk-47179b48.01af0134.js
    ...

③. 打包只有一个没有名称的 .gz 文件,并提示:
    warning
    Conflict: Multiple assets emit different content to the same filename static/js/.gz
    ...
    -rw-r--r--   1 xx  staff    48K  3 29 10:39 .gz     // 没有名字的gz文件
    -rw-r--r--   1 xx  staff    39K  3 29 10:39 app.3c690d0c.js
    a. 要修改 filename 的设置为 filename ,老版本为'[path].gz[query]'.

(3). 服务器开启 gzip:

server {
    // 表示静态加载本地的gz文件
    // 浏览器请求xx.js/css等文件时,服务器返回对应的xxx.js.gz文件
    // 服务器会根据Request Headers的Accept-Encoding标签进行鉴别,如果支持gzip就返回.gz文件.
    // gzip_static开启后,nginx就会读取预先压缩的gz文件,可以减少每次请求进行gzip压缩的CPU资源消耗
    gzip_static on;
    gzip_http_version 1.1;
}

(4). 检查是否开启Gzip成功:

curl -I -H "accept-encoding: gzip, deflate" "https://admin.chaidoudou.cn/static/css/chunk-elementUI.a8b08852.css"
HTTP/2 200
server: nginx/1.14.0 (Ubuntu)
date: Tue, 30 Mar 2021 15:59:15 GMT
content-type: text/css
content-length: 33216
last-modified: Tue, 30 Mar 2021 08:15:15 GMT
etag: "6062de13-81c0"
content-encoding: gzip

(4). 看Network:

如果发现两个大小不一样,表示Gzip压缩过

---

2. 分析:

(1). gzip 压缩比率:

①. 压缩前:
    a. 整个页面加载完是 8.89s.
    b. 最大的 js 文件加载是 8.31s ,大小为 593k.

②. 压缩后:
    a. 整个页面加载完是 2.21s.
    b. 最大的 js 文件加载是 1.75s,大小为 146k.

③. gzip 压缩比率在 4 倍左右.

压缩前:

压缩后:

(2). Request、Response 比对:

①. Request Headers:
    a. Accept-Encoding: gzip, deflate:
       (1). 表示用户浏览器支持二种压缩,包括 gzip 的压缩方式.
       (2). deflate 与 gzip 使用的压缩算法几乎相同.

压缩前的 request:

压缩后的 request:

(3). 其它:

②. nginx 配置了静态 gz 加载后,请求文件变小不会导致请求卡线程.

③. 保留了源文件,当删除 gz 后,浏览器会自动去请求原始文件,不会导致界面出现任何问题.

④. 静态加载 gz 文件的响应头:
    Content-Encoding: gzip