目标：
应用gz资源升高动态资源包大小，晋升前端加载性能与速度。
计划：
前端性能优化计划有很多，本文尝试的是压缩计划——前端打包应用compression-webpack-plugin插件压缩动态资源，服务端在Nginx开启Gzip属性。这样Nginx在拜访资源时，如果该资源有gz文件，则会申请gz文件。
compression-webpack-plugin：
是webpack压缩插件，在webpack搭建的vue我的项目中，引入该插件后，npm run build除了会生成压缩后的动态资源（JS、css），还会生成gz模式的JS、CSS。
前端配置：
我应用了vue init webpack xxx创立我的项目。首先装置插件，
npm install compression-webpack-plugin --save-dev在config.js中开启压缩性能：（这个性能默认为false）：
前端配置实现！！！
服务端Nginx配置：
我本人试验时应用的是本地Nginx，批改了nginx.conf，
具体就是在HTTP{}外面减少如下代码：
gzip on; gzip_min_length 1100; gzip_buffers 4 8k; gzip_types text/plain; gzip_static 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，批改如下：
遗留问题
我看dist文件中生成了app.js/manifest.js/vendor.js，然而生成gz的只有app.js和vendor.js；另外配置了JS和CSS文件启用Gzip，然而css没有gz文件。有没有大神能够解决我的纳闷，非常感谢！
总结结束，有问题请留言。