Vite：性能优化-gzip压缩

gzip压缩

gzip压缩，在Vite/Webpack中核心目的就是，降低文件大小，在浏览器请求该文件的时候能快速响应。对文件进行压缩目前我知道的有两种方式：

1. 前端压缩（运维配置请求时优先请求压缩文件）
2. 运维配置（压缩文件 + 请求压缩文件）

Vite实现gzip压缩（方法一）

Vite 官方推荐使用 vite-plugin-compression 插件来实现 gzip 压缩。

该插件使用教程：

1. 安装插件
npm install vite-plugin-compression --save-dev

2. vite.config.js配置插件配置项
import { defineConfig } from 'vite';
import viteCompression from 'vite-plugin-compression';

export default defineConfig({
  plugins: [
    viteCompression({
      algorithm: 'gzip', // 使用 gzip 压缩
      ext: '.gz', // 生成的文件扩展名
      threshold: 10240, // 仅压缩大于 10KB 的文件
      deleteOriginFile: false, // 是否删除原始文件
      compressionOptions: { level: 9 }, // 压缩级别，1-9，越高压缩率越大
      filter: /.(js|css|json|html|ico|svg)(?.*)?$/i, // 过滤文件类型
    }),
  ],
});

3. 打包
npm run build

viteCompression插件 参数说明

• algorithm：压缩算法，支持 gzip 或 brotli。
• ext：生成文件的扩展名，默认为 .gz。
• threshold：仅压缩大于指定大小的文件（单位：字节）。
• deleteOriginFile：是否删除原始文件。建议设置为 false，以便服务器可以回退到原始文件。
• compressionOptions：压缩选项，如 level 表示压缩级别（1-9）。
• filter：指定哪些资源不压缩

在前端进行压缩之后我们需要知道一个点，即使前端打包时生成了 .gz 或 .br 压缩文件，浏览器默认也不会直接请求这些压缩文件。需要在服务器（如 Nginx - 运维）中进行配置，确保服务器能够正确识别并返回压缩文件。

运维配置（方法二）

1. 配置服务器动态压缩：运维会在服务器（如 Nginx、Apache）中启用动态压缩功能。当浏览器请求资源时，服务器会实时压缩文件并返回给客户端。
2. 配置客户端支持：运维需要确保服务器根据客户端的 Accept-Encoding 请求头动态返回压缩文件。

总结

• 熟悉插件 vite-plugin-compression，了解其api接口字段。
• 前端压缩后的文件浏览器不会默认请求压缩后的文件，需要运维配置（之前出现过这样的问题，通过查询请求头的Accept-Encoding字段解决问题）
• 压缩也可以通过运维配置Nginx实现
• 前端不压缩：适合服务器性能较好、运维团队统一管理压缩策略的场景。
• 前端压缩：适合服务器性能有限、需要减少服务器压力的场景。