资源压缩

快速开始

前端配置

1. 安装

   npm install vite-plugin-compression --save-dev

2. 修改 Vite 配置

   import { defineConfig } from 'vite'
   import viteCompression from 'vite-plugin-compression'
   
   export default defineConfig({
     plugins: [
       // https://github.com/vbenjs/vite-plugin-compression#options
       // gzip
       viteCompression({
         algorithm: 'gzip',
         ext: '.gz',
         threshold: 10240,
         filter: file => /\.(js|mjs|json|css|html|svg)$/.test(file),
         deleteOriginFile: false,
       }),
       // brotli
       viteCompression({
         algorithm: 'brotliCompress',
         ext: '.br',
         threshold: 10240,
         filter: file => /\.(js|mjs|json|css|html|svg)$/.test(file),
         deleteOriginFile: false,
       }),
     ],
   })

服务器配置

Nginx 配置

1. 安装 brotli 模块

sudo apt install brotli

2. 修改 nginx 配置

server {
  listen 80;
  server_name example.com;

  location / {
    root /var/www/dist;
    index index.html;

    # ---- 手动优先 Brotli 静态资源 ----
    try_files $uri$br $uri$gz $uri =404;

    # ---- Gzip 配置 ----
    gzip on;
    gzip_static on; # 启用 Gzip 静态资源
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml image/svg+xml;
    gzip_vary on;
    gzip_min_length 10240;

    # ---- Brotli 配置 ----
    brotli on;
    brotli_static on; # 启用 Brotli 静态资源
    brotli_comp_level 6;
    brotli_types text/plain text/css application/json application/javascript text/xml application/xml image/svg+xml;
  }
}

如何选择？

gzip

兼容性好

• 请求头 Accept-Encoding: gzip
• 响应头 Content-Encoding: gzip

brotli

现代浏览器支持

• 请求头 Accept-Encoding: br
• 响应头 Content-Encoding: br