前端性能优化之vue-cli3 开启gizp压缩及nginx配置

需求

项目build后的文件过大，导致网站加载时间过长，所以需要尽量压缩文件的大小，之前的文章介绍过cdn加速方法进行优化(vue cdn加速 解决vendor.js文件过大)，这次在介绍一个更加厉害的优化方法——gzip，可以在原先的基础上，再压缩50%以上

gzip压缩原理

一般浏览器都已支持.gz的资源文件，在http请求的Request Headers中能看到 Accept-Encoding:gzip

客户端http请求头声明浏览器支持的压缩方式，服务端配置启用压缩，压缩的文件类型，压缩方式。当客户端请求到服务端的时候，服务器解析请求头，如果客户端支持gzip压缩，响应时对请求的资源进行压缩并返回给客户端，浏览器按照自己的方式解析，在http响应头，我们可以看到content-encoding:gzip，这是指服务端使用了gzip的压缩方式。

启用gzip

安装插件compression-webpack-plugin

npm i -D compression-webpack-plugin

配置vue.config.js

// 导入compression-webpack-plugin
const CompressionWebpackPlugin = require('compression-webpack-plugin')