如何针对Ionic React不同构建类型在Vite中条件性应用压缩插件？

你可以利用Ionic构建不同平台时自动注入的CAPACITOR_PLATFORM环境变量，条件性加载压缩插件，避免Android构建时出现重复资源错误。具体实现如下：

1. 识别平台环境变量：Ionic执行构建命令时会自动设置CAPACITOR_PLATFORM变量——执行ionic build android时值为android，ionic build ios时值为ios，直接ionic build（对应PWA）时值为web。

2. 修改Vite配置：在vite.config.ts中根据该变量判断是否启用压缩插件，仅在iOS或PWA构建时加载插件。

完整配置代码示例：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import eslint from 'vite-plugin-eslint';
import compression from 'vite-plugin-compression2';

// 获取当前构建平台，默认设为web（对应PWA）
const currentPlatform = process.env.CAPACITOR_PLATFORM || 'web';

export default defineConfig({
  plugins: [
    eslint(),
    // 仅在非Android构建时注入压缩插件
    ...(currentPlatform !== 'android' ? [
      compression({
        algorithm: 'gzip',
        exclude: [/\.(br)$/, /\.(gz)$/],
      }),
      compression({
        algorithm: 'brotliCompress',
        exclude: [/\.(br)$/, /\.(gz)$/],
        deleteOriginalAssets: false,
      })
    ] : [])
  ]
});

3. 验证构建行为：
   • 构建PWA：执行ionic build，压缩插件正常生效
   • 构建iOS：执行ionic build ios，压缩插件正常生效
   • 构建Android：执行ionic build android，压缩插件不会被加载，避免Gradle重复压缩触发错误

如果环境变量未自动生效，可手动指定后构建，例如：CAPACITOR_PLATFORM=android ionic build android。

内容的提问来源于stack exchange，提问作者Patrick Kenny