第五十八章-Vite插件-vite-plugin-imagemin

1.说明

vite-plugin-imagemin的npm首页：一个压缩图片资源的 vite 插件。

2.配置镜像

package.json：

"resolutions": {
    "//": "用于安装imagemin的依赖关系，因为中国可能没有安装imagemin。",
    "bin-wrapper": "npm:bin-wrapper-china"
},

3.安装

yarn add vite-plugin-imagemin --dev

4.配置插件

build\vite\plugin\imagemin.ts：

// Image resource files used to compress the output of the production environment
// https://github.com/anncwb/vite-plugin-imagemin
import viteImagemin from 'vite-plugin-imagemin';

export function configImageminPlugin() {
  const plugin = viteImagemin({
    gifsicle: {
      optimizationLevel: 7,
      interlaced: false,
    },
    optipng: {
      optimizationLevel: 7,
    },
    webp: {
      quality: 75,
    },
    mozjpeg: {
      quality: 8,
    },
    pngquant: {
      quality: [0.8, 0.9],
      speed: 4,
    },
    svgo: {
      plugins: [
        {
          removeViewBox: false,
        },
        {
          removeEmptyAttrs: false,
        },
      ],
    },
  });
  return plugin;
}

5.配置Vite

build\vite\plugin\index.ts：

// ...
import { configImageminPlugin } from './imagemin';

export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean, pkg: any) {
  // ...
  if (isBuild) {
    //vite-plugin-imagemin
    VITE_USE_IMAGEMIN && vitePlugins.push(configImageminPlugin());
  }

  return vitePlugins;
}

上一章

第五十七章-Vite插件-vite-plugin-theme

下一章

第五十九章-Vite插件-vite-plugin-compression