当前位置：首页 > news >正文

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

news 来源：原创 2024/4/29 23:05:23

需求

项目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')

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;
   index  index.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; # 压缩文件类型
        index  index.html index.htm;
   try_files $uri $uri/ /index.html;
   index  index.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库