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

需求项目build后的文件过大，导致网站加载时间过长，所以需要尽量压缩文件的大小，之前的文章介绍过cdn加速方法进行优化(vue cdn加速解决vendor.js文件过大)，这次在介绍一个更加厉害的优化方法——gzip，可以在原先的基础上，再压缩50%以上
gzip压缩原理 【vue|前端性能优化之vue-cli3 开启gizp压缩及nginx配置】一般浏览器都已支持.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')module.exports = { configureWebpack: { plugins: [ //统一配置打包插件 new CompressionWebpackPlugin({ // asset: '[path].gz[query]',// 目标文件名 // algorithm: 'gzip',// 使用gzip压缩 test: new RegExp('\\.(js|css)$'), // 压缩 js 与 css threshold: 10240,//对10K以上的数据进行压缩 // minRatio: 0.8, // 最小压缩比达到0.8时才会被压缩 deleteOriginalAssets: false,//是否删除源文件 }) ] } }

这时执行npm run build进行打包

文章图片

可以看到压缩后的文件（生成的压缩文件以.gz为后缀）
配置nginx
原本：

location / { root/var/www/html/xxxytz/tz_admin/dist; try_files $uri $uri/ /index.html; indexindex.html; }

更新后：

location / { root/var/www/html/xxxytz/tz_admin/dist; gzip on; # 开启或关闭gzip on off gzip_static on; gzip_http_version 1.1; gzip_comp_level 3; # 压缩级别:1-10，数字越大压缩的越好，时间也越长 gzip_types text/plain application/json application/x-javascript application/css application/xml application/xml+rss text/javascript application/x-httpd-php image/jpeg image/gif image/png image/x-ms-bmp; # 压缩文件类型 indexindex.html index.htm; try_files $uri $uri/ /index.html; indexindex.html; }

gzip配置解释 gzip使用环境:http,server,location,if(x),一般把它定义在nginx.conf的http{…..}之间

gzip on
on为启用，off为关闭
gzip_min_length 1k
设置允许压缩的页面最小字节数，页面字节数从header头中的Content-Length中进行获取。默认值是0，不管页面多大都压缩。建议设置成大于1k的字节数，小于1k可能会越压越大。
gzip_buffers 4 16k
获取多少内存用于缓存压缩结果，‘4 16k’表示以16k*4为单位获得
gzip_comp_level 5
gzip压缩比（1~9），越小压缩效果越差，但是越大处理越慢，所以一般取中间值;
gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php
对特定的MIME类型生效,其中’text/html’被系统强制启用
gzip_http_version 1.1
识别http协议的版本,早起浏览器可能不支持gzip自解压,用户会看到乱码
gzip_vary on
启用应答头"Vary: Accept-Encoding"
gzip_proxied off
nginx做为反向代理时启用,off(关闭所有代理结果的数据的压缩),expired(启用压缩,如果header头中包括"Expires"头信息),no-cache(启用压缩,header头中包含"Cache-Control:no-cache"),no-store(启用压缩,header头中包含"Cache-Control:no-store"),private(启用压缩,header头中包含"Cache-Control:private"),no_last_modefied(启用压缩,header头中不包含"Last-Modified"),no_etag(启用压缩,如果header头中不包含"Etag"头信息),auth(启用压缩,如果header头中包含"Authorization"头信息)
gzip_disable msie6
(IE5.5和IE6 SP1使用msie6参数来禁止gzip压缩 )指定哪些不需要gzip压缩的浏览器(将和User-Agents进行匹配),依赖于PCRE库