Vue项目如何开启gzip
作者：&活在当下&
这篇文章主要介绍了Vue项目如何开启gzip的实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
随着项目的迭代，项目的打包体积会越来越多，项目性能就会逐渐变差，这时候可以开启 gzip 进行性能优化，提升访问速度，解决页面白屏时间长的问题。
下面介绍一下 Vue 开启 gzip 的方法：
gzip 压缩的方式有两种
1、在服务端开启压缩，当浏览器发起请求时，服务端对传输资源进行实时压缩，然后返回给浏览器
2、 对 webpack 配置打包压缩，并在服务端加上支持 gizp 的配置，当浏览器请求时，服务端直接将资源返回给浏览器
两种方法的区别
- 第一种是服务端进行实时压缩，对服务器的性能消耗较大
- 第二种则是打包后的 dist 文件包体积比较大（因为包含 .gz 文件和源文件）
综上，两种方法混合用比较合适，在 webpack 打包时，配置只对超过一定体积的文件进行压缩，然后配置 nginx ，当浏览器发起请求时，服务端对 .gz 文件进行直接传输给浏览器，对源文件先进行实时压缩，在返回给浏览器。
第一种方法
直接在 nginx 服务端配置开启 gzip。
配置如下：
# 开启服务器实时gzip gzip on; # 开启静态gz文件返回 gzip_static on; # 启用gzip压缩的最小文件，小于设置值的文件将不会压缩 gzip_min_length 1k; # 设置压缩所需要的缓冲区大小 gzip_buffers 32 4k; # 设置gzip压缩针对的HTTP协议版本 gzip_http_version 1.0; # gzip 压缩级别，1-9，数字越大压缩的越好，也越占用CPU时间 gzip_comp_level 7; # 进行压缩的文件类型。javascript有多种形式。其中的值可以在 mime.types 文件中找到。 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 application/vnd.ms-fontobject font/ttf font/opentype font/x-woff image/svg+xml; # 是否在http header中添加Vary: Accept-Encoding，建议开启 gzip_vary on; # 禁用IE 6 gzip gzip_disable "MSIE [1-6]\.";
添加后重启 nginx ./nginx -s reload ，如下图，看到响应头中出现 Content-Encoding:gzip 表示开启成功：
第二种方法
在 Vue 项目中，使用 webpack 来开启 gzip ，如下：
首先，安装 compression 插件
npm install compression-webpack-plugin
然后在 vue.config.js 中加上如下配置：
module.exports = {
chainWebpack: config => {
const CompressionWebpackPlugin = require('compression-webpack-plugin')
if (process.env.NODE_ENV === 'production') {
config.plugin('CompressionPlugin').use(
new CompressionWebpackPlugin({
filename: '[path][base].gz[query]', // 压缩后的文件名(保持原文件名，后缀加.gz)
algorithm: 'gzip', // 使用gzip压缩
test: /\.js$|\.css$/, // 匹配文件名
threshold: 10240, // 对超过10k的数据压缩
minRatio: 1, // 压缩率小于1才会压缩
deleteOriginalAssets: false // 是否删除未压缩的源文件，谨慎设置，如果希望提供非gzip的资源，可不设置或者设置为false（比如删除打包后的gz后还可以加载到原始资源文件）
})
)
}
}
}打包后，文件中会出现 .gz 文件，如图：
最后检查一下 nginx 服务端配置是否支持 gzip ，如果不支持，则需加上如下配置：
gzip on; gzip_static on; gzip_min_length 5k; gzip_buffers 4 16k; gzip_http_version 1.0; gzip_comp_level 7; gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png; gzip_vary on;
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。