前端性能优化：compression-webpack-plugin和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

4-安装有Warning,build报错：ValidationError: Invalid options object. Compression Plugin has been initialized using an options object that does not match the API schema.


解决方案：因为我的webpack版本是3.6.0，太低了.最少也需要4.0的webpack。建议升级webpack，这一块除了升级版本，还有修改一些配置文件。

其他问题

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

总结完毕，有问题请留言。