关于前端:前端性能优化compressionwebpackplugin和Nginx配置Gzip

前言：

前端性能优化计划有很多，本文尝试的是压缩计划——前端打包应用 compression-webpack-plugin 插件压缩动态资源，服务端在 Nginx 开启 Gzip 属性。这样 Nginx 在拜访资源时，如果该资源有 gz 文件，则会申请 gz 文件。
compression-webpack-plugin：是 webpack 压缩插件，在 webpack 搭建的 vue 我的项目中，引入该插件后，npm run build 除了会生成压缩后的动态资源（JS、css），还会生成 gz 模式的 JS、CSS。

前端配置：

首先装置插件 compression-webpack-plugin，

cnpm install compression-webpack-plugin@6.1.1

如果你是 vue init webpack xxx 创立的我的项目，则批改 config.js——
开启压缩性能：（这个性能默认为 false）：

如果你是 vue.config.js 文件，则在 chainWebpack 增加以下代码：

const CompressionWebpackPlugin = require('compression-webpack-plugin')
    if (process.env.NODE_ENV === 'production') {config.plugin('CompressionPlugin').use(
        new CompressionWebpackPlugin({test: /\.(js|css)$/,
          threshold: 10240, // 超过 10kb 的文件就压缩
          deleteOriginalAssets: false, // 不删除源文件
          minRatio: 0.8
        })
      )
    }

如下图：

如上操作，前端配置实现，打包试试看！！！

服务端 Nginx 配置：

我本人试验时应用的是本地 Nginx，批改了 nginx.conf，
具体就是在 HTTP{} 外面减少如下代码：

    gzip  on;
    # 开启动态 gz 文件返回
    gzip_static on;
    gzip_buffers 32 4K;
    gzip_comp_level 6;
    gzip_min_length 1k;
    gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png image/x-icon;
    gzip_disable "MSIE [1-6]\."; #配置禁用 gzip 条件，反对正则。此处示意 ie6 及以下不启用 gzip（因为 ie 低版本不反对）# 是否在 http header 中增加 Vary: Accept-Encoding，倡议开启
    gzip_vary on;

实际

将 dist 文件复制到本地 Nginx 的 html 文件中，在 Nginx 配置跳转：

    server {
        listen       3000;
        server_name  localhost;

        location / {
            root   html;
            index  /dist/index.html;
        }
        
        location /static {root    html/dist;}
    }

在 cmd 中启动 Nginx 即可拜访 localhost:3000.
察看 Network 能够发现区别（正文 Nginx 的 Gzip 即可查看区别）：

问题总结

其中遇到不少问题，而后网上也没有找到具体的解决方案，在这里分享一下：
1- 应用 vue init webpack xxx 创立完我的项目后，我依照网上的办法，在 webpack.config.js 中把 compression-webpack-plugin 插件退出 pluigins 中，而后 npm run build 后报错：

TypeError: Cannot read property 'thisCompilation' of undefined

这时候装置的 compression-webpack-plugin 插件版本是最新的 -7.1.2
网上全部都是删除 node-modules，而后重新安装，没有什么用。
解决方案：执行 npm install compression-webpack-plugin@1.1.12.，并且不要批改 plugins 数组，因为在 config/index.js 中曾经配置了入口了，见前端配置
2- 遇到报错：

ValidationError: Invalid options object. Compression Plugin has been initialized using an options object that does not match the API schema.

解决方案：
进入 webpack.prod.config.js，批改如下：

3- 打包后报错：Cannot read property ‘tapPromise’ of undefined

解决方案：升高版本，cnpm install compression-webpack-plugin@6.1.1

其余问题

Q: 为什么有些资源没有生成 gz 文件？
A：因为资源包太小，所以不压缩，大一点就会压缩：

总结结束，有问题请留言。