乐趣区

关于webpack:项目优化之使用compressionwebpackplugin插件开启gzip压缩以vue为例

jiezi

问题形容

本文以 vue 为例，记录一下，应用 webpack 插件 compression-webpack-plugin 开启 gzip 压缩 的步骤流程，以及比照开启 gzip 压缩前后所须要的工夫，得出结论：** 这个插件确实可能做性能优化，缩小加载的工夫 **react 也是同一个情理，在此不赘述

前端配置之 vue.config.js 配置

第一步，下载 compression-webpack-plugin

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

留神，这里不能间接下载，须要下载低版本的。间接下载就是最新版的了，vue 脚手架临时不反对最新版的，所以就会报错：TypeError: Cannot read property 'tapPromise' of undefined。我这里下载是指定 @6.1.1 版本，是能够用的

第二步，vue.config.js 应用

下方代码，间接复制粘贴应用即可

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
                })
            ]
        }
    },
};

这里配置完当前，临时还不能应用，还须要后端做一下配置，这里后端以 nginx 为例

后端配置之 nginx 配置

下方代码，间接复制粘贴应用即可

    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，个别状况下倡议开启       
    }

未开启 gzip 压缩，加载工夫图示

我的项目没有应用 compression-webpack-plugin 插件没开启的时候，咱们发现工夫能有好几百毫秒，加载资源工夫是有点长了，未开启如下图：

开启 gzip 压缩，加载工夫图示

gizp 压缩多了一个.gz 文件

留神开启 gzip 压缩当前，对应压缩文件中就会多了 .gz 的文件，比方字体压缩文件夹中：

当然别的 js 文件夹中也有.gz css 文件夹中也有.gz 这里就不一一截图了，大家看本人的 dist 文件夹就能够看到了。接下来看开启了 gzip 压缩当前，到底优化了多少

看看最终性能优化如何

比照上方未开启 gzip 压缩当前，确实加载工夫优化了不少。另外，从首屏加载而言，直观感触，也是快了一些。

响应头多了 Content-Encoding: gzip

另外，如果开启 gzip 压缩，在 http 申请中，也能够看到响应头多了Content-Encoding: gzip，没开启 gzip 压缩是没这个的。如下图：

总结

好忘性不如烂笔头，记录一下吧，如果帮到了您给个赞呗 ^_^

退出移动版