vue3 vite 对项目构建中图片优化处理

原创已于 2024-10-24 09:48:21 修改 · 404 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#1024程序员节

于 2024-10-24 09:39:22 首次发布

我们可以在config中使用这个 vite-plugin-imagemin 插件

引入： import viteImagemin from "vite-plugin-imagemin";

配置：

  return {
    plugins: [
      viteImagemin({
        gifsicle: {
          optimizationLevel: 5, // 3-7 数值越大处理的约精细
          interlaced: false,
        },
        optipng: {
          optimizationLevel: 5, // 3-7 数值越大处理的约精细
        },
        mozjpeg: {
          quality: 85, 
        },
        pngquant: {
          quality: [0.8, 0.9],
          speed: 4,
        },
        svgo: {
          plugins: [
            {
              name: "removeViewBox",
            },
            {
              name: "removeEmptyAttrs",
              active: false,
            },
          ],
        },
      }),
    ]
  }