如何在React+Vite构建时自动压缩图片且不破坏资源路径？

方法1：修复vite-plugin-imagemin的CI环境问题 #

你遇到的CI失效问题，本质是插件依赖的图片压缩工具（如pngquant、mozjpeg）在Linux runner上缺少二进制文件，可通过以下步骤解决：

• 在CI构建脚本中提前安装系统级依赖（针对Ubuntu/Debian系runner）：

  sudo apt-get update && sudo apt-get install -y pngquant libjpeg-turbo-progs
  

• 调整插件配置，只启用已安装依赖的压缩器：

  // vite.config.js
  import { defineConfig } from 'vite'
  import react from '@vitejs/plugin-react'
  import viteImagemin from 'vite-plugin-imagemin'
  
  export default defineConfig({
    plugins: [
      react(),
      viteImagemin({
        pngquant: {
          quality: [0.6, 0.8],
          speed: 4
        },
        mozjpeg: {
          quality: 75,
          progressive: true
        },
        // 禁用不需要的压缩器避免依赖缺失
        gifsicle: false,
        svgo: false
      })
    ]
  })
  

此方案完全保留原图片导入路径，同时解决CI环境运行问题。

方法2：自定义Vite插件结合Sharp实现压缩（无额外系统依赖） #

如果不想依赖系统二进制工具，可通过自定义插件在构建完成后用Sharp处理图片，直接覆盖原文件（不修改文件名和路径）：

1. 安装Sharp：

   npm install sharp --save-dev
   

2. 在vite.config.js中添加自定义插件：

   // vite.config.js
   import { defineConfig } from 'vite'
   import react from '@vitejs/plugin-react'
   import sharp from 'sharp'
   import fs from 'fs/promises'
   import path from 'path'
   
   const imageCompressPlugin = () => {
     return {
       name: 'vite-plugin-image-compress',
       async generateBundle(options, bundle) {
         // 遍历构建输出的所有文件
         for (const fileName in bundle) {
           const file = bundle[fileName]
           // 仅处理PNG和JPEG文件
           if (file.type === 'asset' && /\.(png|jpe?g)$/i.test(fileName)) {
             const outputPath = path.join(options.dir, fileName)
             try {
               const buffer = await fs.readFile(outputPath)
               let processedBuffer
               // 根据文件类型选择压缩参数
               if (fileName.endsWith('.png')) {
                 processedBuffer = await sharp(buffer)
                   .png({ quality: 70, compressionLevel: 6 })
                   .toBuffer()
               } else if (fileName.match(/\.jpe?g$/i)) {
                 processedBuffer = await sharp(buffer)
                   .jpeg({ quality: 75, progressive: true })
                   .toBuffer()
               }
               // 覆盖原文件
               if (processedBuffer) await fs.writeFile(outputPath, processedBuffer)
             } catch (err) {
               console.warn(`压缩图片失败: ${fileName}`, err)
             }
           }
         }
       }
     }
   }
   
   export default defineConfig({
     plugins: [react(), imageCompressPlugin()]
   })
   

Sharp会自动下载预编译的二进制包到node_modules，无需额外系统依赖，完全适配Linux CI环境，且压缩后保留原文件名和路径。

方法3：使用vite-plugin-image-optimizer轻量插件 #

这是基于Sharp封装的Vite插件，配置简单，无需额外系统依赖：

1. 安装插件：

   npm install vite-plugin-image-optimizer --save-dev
   

2. 配置vite.config.js：

   // vite.config.js
   import { defineConfig } from 'vite'
   import react from '@vitejs/plugin-react'
   import { imageOptimizer } from 'vite-plugin-image-optimizer'
   
   export default defineConfig({
     plugins: [
       react(),
       imageOptimizer({
         png: { quality: 70 },
         jpeg: { quality: 75 },
         // 强制输出文件名与原文件一致
         filename: (path) => path
       })
     ]
   })
   

插件会在构建过程中自动处理图片，压缩后保留原文件名和路径，适配所有Node.js环境。

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