Vite打包优化-压缩机制gzip,br显著优化打包体积和加载性能。

---

前言

在使用 Vite 构建项目时，通过自动化外链（CDN 加载）和压缩机制（如 Gzip 和 Brotli），可以显著优化打包体积和加载性能。以下是具体的配置方法和步骤：

---

一、通过 Gzip 和 Brotli 压缩的效果。

压缩效果对比
Gzip：

• 压缩率：30%-70%（取决于文件类型，文本类文件压缩率高，如 HTML、CSS、JS）。
• 优势：兼容性极佳，所有主流浏览器和服务器均支持。
• 缺点：压缩效率略低于 Brotli，解压速度稍慢。

Brotli：

• 压缩率：20%-25% 高于 Gzip（同等质量下文件更小）。
• 优势：更高效的压缩算法，适合静态资源（如字体、图片、JS）。
• 缺点：兼容性略差（IE 不支持，需服务器额外配置）。

实际效果
文件体积减小：

• 假设一个未压缩的 JS 文件大小为 1MB：
• 使用 Gzip 压缩后：300KB-700KB。
• 使用 Brotli 压缩后：250KB-500KB。

文件越小，用户下载时间越短，加载速度越快。加载速度提升，根据 HTTP Archive 数据，启用压缩后，页面加载时间可减少 50%-70%（尤其是移动端）。

二、使用步骤

1.配置 Gzip 和 Brotli 压缩

过插件对打包后的静态资源进行压缩，生成 .gz 和 .br 文件，进一步提升传输效率。
安装插件：

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

2.配置插件：

import { defineConfig } from 'vite';
import viteCompression from 'vite-plugin-compression';

export default defineConfig({
  plugins: [
    viteCompression({
      verbose: true, // 打印压缩日志
      disable: false, // 启用压缩
      threshold: 10240, // 仅对大于 10KB 的文件进行压缩
      algorithm: 'gzip', // 使用 gzip 压缩
      ext: '.gz', // 生成的文件后缀
    }),
    viteCompression({
      verbose: true,
      disable: false,
      threshold: 10240,
      algorithm: 'brotliCompress', // 使用 Brotli 压缩
      ext: '.br', // 生成的文件后缀
    }),
  ],
});

效果：

• 打包后的文件会同时生成 .gz 和 .br 压缩版本。
• 浏览器请求资源时，服务器会根据支持的压缩格式返回对应的文件（需服务器配置支持）。

3. 配置服务器支持 Gzip 和 Brotli

为了确保浏览器能够正确加载压缩文件，需要在服务器端配置支持 Gzip 和 Brotli。
Nginx 配置示例：

server {
    listen 80;
    server_name yourdomain.com;

    location / {
        root /path/to/your/dist;
        index index.html;

        # 启用 gzip 和 brotli 压缩文件的自动选择
        gzip_static on;
        brotli_static on;

        # 开启 gzip 动态压缩（可选，若未生成 .gz 文件时使用）
        gzip on;
        gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
        gzip_min_length 1024;

        # 开启 brotli 动态压缩（可选，若未生成 .br 文件时使用）
        brotli on;
        brotli_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
        brotli_min_length 1024;
    }
}

效果：

• 浏览器请求资源时，Nginx 会自动选择 .gz 或 .br 文件返回。
• 如果没有对应的压缩文件，Nginx 会使用动态压缩（如果启用）。

---

总结

根据项目需求选择合适的优化策略，可以显著提升页面加载速度和用户体验。