前言：
前端性能优化方案有很多，本文尝试的是压缩方案——前端打包使用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：因为资源包太小，所以不压缩，大一点就会压缩：
总结完毕，有问题请留言。
服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net
