vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vite图片压缩

Vite实现图片压缩的四种有效方法

作者：前端赵哈哈

原主流插件 vite-plugin-imagemin 已不兼容 Vite5,会导致构建失败,本文整理了 4 种适用于 Vite5 及以下版本的图片压缩方案,涵盖插件化与自定义脚本,兼顾易用性与灵活性,需要的朋友可以参考下

重要提示：原主流插件 vite-plugin-imagemin 已不兼容 Vite5，会导致构建失败。本文整理了 4 种适用于 Vite5 及以下版本的图片压缩方案，涵盖插件化与自定义脚本，兼顾易用性与灵活性。

方法 1：vite-plugin-image-optimizer（推荐 Windows 环境）

支持 Vite >=3 和 Node >=14

核心特性

步骤 1：安装依赖

# npm
npm install vite-plugin-image-optimizer --save-dev
# yarn/pnpm
yarn add vite-plugin-image-optimizer -D
pnpm add vite-plugin-image-optimizer -D

步骤 2：Vite 配置（vite.config.js）

import { defineConfig } from 'vite';
import { ViteImageOptimizer } from 'vite-plugin-image-optimizer';

export default defineConfig({
  plugins: [
    ViteImageOptimizer({
       png: {
        quality: 80 // 质量（0-100，值越高越清晰，体积越大）
      },
      jpeg: { quality: 80 },
      webp: {
        quality: 80,
        lossless: false
      },
      avif: { quality: 75 }, // AVIF 压缩率比 WebP 更高，但兼容性稍弱
      include: /\.(png|jpe?g|svg)$/i, // 仅处理指定格式
      exclude: /node_modules/ // 排除 node_modules 目录
    }),
  ],
});

关键注意事项

方法 2：rollup-plugin-imagemin（兼容 Rollup 生态）

核心特性

步骤 1：安装依赖

需同时安装核心插件和对应图片格式的压缩插件：

# 核心插件 + 常用格式压缩插件
npm install rollup-plugin-imagemin imagemin-gifsicle imagemin-mozjpeg imagemin-pngquant imagemin-webp imagemin-avif --save-dev

步骤 2：Vite 配置（vite.config.js）

import { defineConfig } from 'vite';
import imagemin from 'rollup-plugin-imagemin';

export default defineConfig({
  plugins: [
    imagemin({
      // 压缩插件集合（按格式配置）
      plugins: [
        // GIF 压缩：optimizationLevel 1-3（3 最优）
        imagemin.gifsicle({ optimizationLevel: 3 }),
        // JPEG 压缩：quality 0-100，progressive 启用渐进式加载
        imagemin.mozjpeg({ quality: 80, progressive: true }),
        // PNG 压缩：quality [最小质量, 最大质量]，speed 压缩速度（1-11，1 最慢最优）
        imagemin.pngquant({ quality: [0.7, 0.8], speed: 4 }),
        // 自动转换 PNG/JPG 为 WebP
        imagemin.webp({ quality: 80 }),
        // 自动转换为 AVIF（压缩率更高）
        imagemin.avif({ quality: 75 }),
      ],

      // 高级配置：过滤文件
      include: /.(png|jpe?g|gif)$/i,
      exclude: /public/icons/, // 排除无需压缩的目录（如小图标）
    }),
  ],
});

关键注意事项

方法 3：vite-plugin-compress（一站式资源压缩）

核心特性

步骤 1：安装依赖

npm install vite-plugin-compress --save-dev

步骤 2：Vite 配置（vite.config.js）

import { defineConfig } from 'vite';
import compress from 'vite-plugin-compress';

export default defineConfig({
  plugins: [
    compress({
      // 1. 启用图片压缩（默认 false，需手动开启）
      image: true,

      // 2. 图片压缩参数（仅支持传统格式）
      imageOptions: {
        mozjpeg: { quality: 80 }, // JPEG 压缩
        pngquant: { quality: [0.7, 0.8] }, // PNG 压缩
        gifsicle: { optimizationLevel: 3 }, // GIF 压缩
      },

      // 3. 代码压缩配置（插件核心能力，可选）
      gzip: true, // 启用 GZIP 压缩 JS/CSS
      brotli: true, // 启用 Brotli 压缩（比 GZIP 压缩率更高）
    }),
  ],
});

关键注意事项

方法 4：自定义脚本（手动控制压缩逻辑）

核心特性

步骤 1：安装依赖

# imagemin 核心库 + 常用格式压缩插件
npm install imagemin imagemin-pngquant imagemin-mozjpeg imagemin-gifsicle --save-dev

步骤 2：Vite 配置（vite.config.js）

import { defineConfig } from 'vite';
import imagemin from 'imagemin';
import imageminPngquant from 'imagemin-pngquant';
import imageminMozjpeg from 'imagemin-mozjpeg';
import imageminGifsicle from 'imagemin-gifsicle';
import { resolve } from 'path'; // 路径处理工具

export default defineConfig({
  build: {
    // 构建完成后执行图片压缩（异步钩子）
    async onEnd() {
      try {
        // 1. 配置需要压缩的图片路径（glob 语法）
        const inputDir = resolve(__dirname, 'dist/assets/**/*.{png,jpg,jpeg,gif}');
        // 2. 压缩后的输出目录（此处与输入目录一致，即覆盖原文件）
        const outputDir = resolve(__dirname, 'dist/assets');

        // 3. 执行压缩
        await imagemin([inputDir], {
          destination: outputDir,
          plugins: [
            imageminPngquant({ quality: [0.7, 0.8] }),
            imageminMozjpeg({ quality: 80 }),
            imageminGifsicle({ optimizationLevel: 3 }),
          ],
        });

        console.log('✅ 图片压缩完成！');
      } catch (error) {
        console.error('❌ 图片压缩失败：', error);
      }
    },
  },
});

关键注意事项

通用注意事项（避坑指南）

压缩质量的平衡
质量参数（如 quality: 80）并非越高越好：过高会导致体积过大，过低会导致失真。建议根据场景调整：

现代格式（WebP/AVIF）的兼容方案
现代格式体积小，但部分旧浏览器（如 IE）不支持，需通过 <picture> 标签实现降级：

<picture>
  <!-- 优先加载 AVIF -->
  <source srcset="image.avif" type="image/avif">
  <!-- 其次加载 WebP -->
  <source srcset="image.webp" type="image/webp">
  <!-- 降级加载 PNG/JPG -->
  <img src="image.png" alt="示例图片">
</picture>

开发环境不建议压缩
图片压缩会消耗 CPU 资源，导致热更新速度变慢。所有插件默认在开发环境禁用压缩，若需预览效果，可临时开启（但不推荐长期使用）。

路径问题排查
压缩后若图片加载失败，需检查：

场景化选择建议

项目场景推荐方案核心原因
Windows 环境、新手用户vite-plugin-image-optimizer无二进制依赖，安装简单，支持现代格式转换
中大型项目、需深度定制rollup-plugin-imagemin生态成熟，可灵活扩展 imagemin 插件
小型项目、需压缩代码 + 图片vite-plugin-compress轻依赖，一站式处理所有静态资源压缩
特殊需求（如自定义压缩时机）自定义脚本（imagemin + build.onEnd）完全手动控制，避免插件配置冲突

所有方案的核心压缩能力均基于 imagemin 或 squoosh，最终压缩效果差异极小，选择时优先考虑 兼容性、易用性 与项目实际需求即可。

以上就是Vite实现图片压缩的四种有效方法的详细内容，更多关于Vite图片压缩的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:
阅读全文