Vite打包Vue3时如何正确禁用文件压缩？

Question

在使用 Vite 打包 Vue3 项目时，如何正确禁用输出文件的压缩？默认情况下，Vite 在生产构建时会自动启用压缩（如 Gzip、Brotli），但某些部署环境可能不支持或不需要压缩。开发者常误以为只需设置 `build.minify` 即可控制压缩行为，但实际上该配置仅影响 JavaScript 的压缩。要真正禁用资源文件的压缩输出，应修改 `build.compressIndex` 和 `build.assetsInlineLimit` 等相关配置。此外，还需结合插件如 `vite-plugin-compression` 进行精细控制。本文将详解如何通过调整 Vite 配置，精准禁用打包过程中的文件压缩行为，以满足特定部署需求。

Answer 1

一、Vite 打包压缩机制概览

Vite 在生产构建（vite build）时，默认会对输出资源进行压缩处理，包括 HTML 文件的 Gzip 和 Brotli 压缩。虽然 Vite 提供了 build.minify 配置项用于控制 JavaScript 的压缩行为，但这并不影响静态资源（如 CSS、HTML、图片等）的压缩。

因此，要真正禁用所有文件的压缩输出，需要深入理解 Vite 的构建流程，并调整多个配置参数。

1.1 核心压缩相关配置项

配置项	作用	默认值
build.minify	控制 JS 是否压缩（使用 esbuild 或 terser）	true
build.compressIndex	是否生成 .gz/.br 压缩版本的 HTML 文件	true
build.assetsInlineLimit	小于该大小的资源会被内联为 base64	4096

二、如何正确禁用压缩输出

要完全禁用 Vite 构建过程中的压缩输出，需从以下几个方面入手：

2.1 禁用 HTML 压缩输出

设置 build.compressIndex = false 可阻止 Vite 输出 .html.gz 或 .html.br 文件。

export default defineConfig({
  build: {
    compressIndex: false
  }
})

2.2 禁用 JavaScript 压缩

若同时希望保留 JS 源码可读性，可关闭 JS 压缩：

export default defineConfig({
  build: {
    minify: false
  }
})

2.3 控制静态资源压缩行为

某些插件（如 vite-plugin-compression）会在构建后对资源进行额外压缩。即使 Vite 本身未启用压缩，这些插件也可能引入压缩逻辑。

如果你使用了 vite-plugin-compression 插件，应显式禁用其功能：

import compression from 'vite-plugin-compression'

export default defineConfig({
  plugins: [
    compression({ verbose: false, disable: true }) // 显式禁用压缩插件
  ]
})

三、压缩流程解析与调试建议

为了更好地理解整个压缩流程，我们可以绘制一个简易的构建流程图：

graph TD
      A[启动 vite build] --> B{是否启用压缩?}
      B -->|是| C[生成 .gz / .br 文件]
      B -->|否| D[仅生成原始格式文件]
      A --> E[JS 文件是否压缩?]
      E -->|是| F[使用 terser/esbuild 压缩 JS]
      E -->|否| G[保留原始 JS 内容]
      A --> H[静态资源处理]
      H --> I{是否使用第三方压缩插件?}
      I -->|是| J[执行插件压缩逻辑]
      I -->|否| K[不压缩静态资源]

3.1 如何验证压缩是否生效

可以通过以下方式验证压缩是否被正确禁用：

• 检查 dist 目录下是否存在 .gz 或 .br 文件；
• 查看打包日志中是否有类似 [vite-plugin-compression] 的输出；
• 使用浏览器开发者工具查看网络面板加载的资源大小和类型。

四、高级场景与部署注意事项

在某些特定部署环境中（如传统 CDN 或老旧服务器），不仅需要禁用构建时的压缩，还需确保服务器不会自动对响应内容进行压缩。

4.1 Nginx 示例配置

如果部署环境是 Nginx，可以添加如下配置来防止服务端压缩：

gzip off;
brotli off;

4.2 多环境配置策略

对于不同部署环境（开发、测试、生产），推荐使用不同的 Vite 配置文件（如 vite.config.prod.js 和 vite.config.stage.js），以实现更灵活的压缩控制。

// vite.config.prod.js
export default defineConfig({
  build: {
    minify: false,
    compressIndex: false
  },
  plugins: [
    compression({ disable: true })
  ]
})