vite-plugin-compression进行gzip压缩

介绍

vite-plugin-compression是一个基于Vite的插件,用于gzip或Brotli压缩你的资源，从而减少页面的加载时间和网络带宽，提高用户访问速度和体验。

前端：

yarn add vite-plugin-compression -D

image.png

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import viteCompression from "vite-plugin-compression";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(),
    viteCompression({
      verbose: true, // 默认即可
      disable: false, //开启压缩(不禁用)，默认即可
      deleteOriginFile: false, //删除源文件
      filter: /\.(js|mjs|json|css|html|ttf)$/I,
      threshold: 10240, //压缩前最小文件大小
      algorithm: "gzip", //压缩算法
      ext: ".gz", //文件类型
    }),],
  base: '/annotatepdf/',
  build:{
    assetsDir: 'annotatepdf/'
  }
})

nginx配置：

1、http下配置

http下配置

##
# `gzip` Settings
#
#
gzip on;
gzip_static on;
gzip_disable "msie6";

gzip_vary on;
gzip_proxied any;
gzip_comp_level 6;
gzip_buffers 16 8k;
gzip_http_version 1.1;
gzip_min_length 256;
gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript application/vnd.ms-fontobject application/x-font-ttf font/opentype image/svg+xml image/x-icon;

client_max_body_size 2048m; # 上传文件大小控制

# TimeOut
# 配置段: http, server, location
client_header_timeout 600s;

2、server配置

server配置

gzip_min_length 1k;
            gzip_comp_level 9;
            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;
            gzip_vary on;
            gzip_disable "MSIE [1-6]\.";

其他：

Nginx报错问题：

Nginx报错问题

解决方案：
https://www.jianshu.com/p/66f9e0739165
https://blog.csdn.net/weixin_44490222/article/details/109117545
https://zhuanlan.zhihu.com/p/649405923