Vite图片压缩(vite-plugin-imagemin) imagemin error: XXXX解决办法

1 安装 vite-plugin-imagemin（yarn or npm）

node version:  >= 12.0.0

vite version:  >=2.0.0

yarn add vite-plugin-imagemin -D

or

npm i vite-plugin-imagemin -D

2 imagemin error:XXXXX

因为imagemin在国内不好安装，所以提供几个解决方案

1）使用yarn在package.json内配置（推荐）

"resolutions": {
    "bin-wrapper": "npm:bin-wrapper-china"
}

2）使用npm，在电脑host文件加上以下配置

199.232.4.133 raw.githubusercontent.com

3）使用cnpm （不推荐）

3 使用方法

• vite.config.ts 配置

import viteImagemin from 'vite-plugin-imagemin'
import { join, resolve } from 'path'
import vue from '@vitejs/plugin-vue'

export default ({ mode }: ConfigEnv): UserConfigExport => {
  return defineConfig({
    plugins: [
      vue(),
      viteCompression({
        ext: '.gz',
        algorithm: 'gzip',
        deleteOriginFile: false
      })
      viteImagemin({
        gifsicle: {
          optimizationLevel: 7,
          interlaced: false
        },
        optipng: {
          optimizationLevel: 7
        },
        mozjpeg: {
          quality: 20
        },
        pngquant: {
          quality: [0.8, 0.9],
          speed: 4
        },
        svgo: {
          plugins: [
            {
              name: 'removeViewBox'
            },
            {
              name: 'removeEmptyAttrs',
              active: false
            }
          ]
        }
      })
    ],
    resolve: {
      alias: [{ find: '@', replacement: resolve(__dirname, './src') }]
    },
    build: {
      target: 'es2015',
      outDir: 'dist',
      rollupOptions: {
        output: {
          manualChunks: {
            echarts: ['echarts']
          }
        }
      }
      // assetsDir: 'assets'
    }
  })
}

4 优化方案

每次打包都会走一遍图片压缩的流程，在你改动很小的时候进行npm run build的时候，都会再次压缩，需要长时间等待

如果每次压缩都需要708s，无疑是非常耗费时间的。

优化方案

在打包前运行脚本图片压缩npm run build:img，压缩一次后记录图片，然后记录时间戳，压缩后修改原文件，再进行build。当你你二次打包的时候

进行对比，在范围内跳过图片压缩

第二次打包时间⬇️

秒过 nice 图片大小不变

原本 dist -> 35m

打包 dist -> 12m