Vue3项目使用gzip技术

众所周知 ,在前端性能优化中有一项重要的优化是压缩资源大小; 在实际项目中这项技术又该怎么用呢? 从前端角度出发带你一步一步配置；

前端配置：

一、安装插件

yarn add vite-plugin-compression -D 

二、编辑 vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import compressPlugin from 'vite-plugin-compression'

// https://vitejs.dev/config/

export default defineConfig({
  plugins: [
    vue(),
    compressPlugin({
      /* 生成的压缩包后缀 */
      ext: '.gz',
      /* 体积大于threshold才会被压缩 1024 = 1KB */
      threshold: 10240,
      /* 默认压缩.js|mjs|json|css|html后缀文件，设置成true，压缩全部文件 */
      filter: /\.(js|mjs|css)$/i,
      /**
       * 压缩后是否删除原始文件 false:不删除 true:删除
       * 建议设为false, 如果Nginx服务没有配置gzip_static 还可以返回未被压缩的资源,不然会报404
       */
      deleteOriginFile: false
    })
  ]
})

压缩效果如下:

*  正在执行任务: yarn run build 

yarn run v1.22.19
$ vue-tsc && vite build
vite v4.4.9 building for production...
✓ 18 modules transformed.
dist/index.html                  0.45 kB │ gzip:  0.29 kB
dist/assets/vue-5532db34.svg     0.50 kB │ gzip:  0.31 kB
dist/assets/index-c322ae43.css   1.30 kB │ gzip:  0.67 kB
dist/assets/index-127f2da4.js   51.61 kB │ gzip: 20.93 kB
✓ built in 961ms

✨ [vite-plugin-compression]:algorithm=gzip - compressed file successfully: 
dist/E:/demo/vite-project1/assets/index-127f2da4.js.gz   50.40kb / gzip: 20.42kb

后端配置：

一、查看 nginx 版本信息

nginx -V

控制台输出：检查下有没有模块 --with-http_gzip_static_module 有的话进入步骤五

nginx version: nginx/1.22.1
built by gcc 4.8.5 20150623 (Red Hat 4.8.5-44) (GCC) 
built with OpenSSL 1.0.2k-fips  26 Jan 2017
TLS SNI support enabled
configure arguments: --prefix=/data/install/nginx --with-http_ssl_module --with-stream_ssl_module --with-stream --with-poll_module

二、nginx 安装 --with-http_gzip_static_module切换到nginx安装目录执行下面命令增加 --with-http_gzip_static_module 记得要带上之前输出的那些模块;

./configure --prefix=/usr/local/nginx --with-http_gzip_static_module --with-http_ssl_module --with-stream_ssl_module --with-stream --with-poll_module

三、重新编译

make

四、再次查看 nginx 版本信息

nginx -V

五、进入nginx/conf文件夹编辑nginx.conf 添加 gzip_static on;

worker_processes 1;
events {
    worker_connections 1024;
}
http {
    include mime.types;
    default_type application/octet-stream;
    # nginx对于静态文件的处理模块, 开启后会寻找以.gz结尾的文件;
    gzip_static on;
    sendfile on;
    keepalive_timeout 65;
    #gzip  on;
    server {
        listen 80;
        server_name localhost;
        location / {
            root html;
            index index.html index.htm;
        }
    }
}

六、重启nginx

nginx -s reload