前言：

前端性能优化计划有很多，本文尝试的是压缩计划——前端打包应用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：因为资源包太小，所以不压缩，大一点就会压缩：

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