Rspack 实战：用 image-minimizer-webpack-plugin 做图片压缩，优化打包体积

作为基于 Rust 编写的下一代 JS 打包工具，Rspack 最核心的优势就是兼容 webpack 生态 + 10 倍级构建性能------ 这意味着我们能直接复用大量 webpack 成熟插件，无需担心生态适配成本。

而日常开发中，图片资源（PNG/JPG/GIF 等）往往是打包体积的 "大头"，合理的图片压缩能显著减少产物大小、提升线上加载速度。本文就带你实战：在 Rspack 项目中集成 image-minimizer-webpack-plugin，通过简单配置实现生产环境自动图片压缩。

一、为什么选 image-minimizer-webpack-plugin？

在 Rspack 中做图片处理，优先选这款插件的核心原因有两个：

生态兼容：作为 webpack 生态中主流的图片压缩插件，Rspack 可无缝复用（Rspack 设计目标之一就是兼容 webpack API 和插件）；
灵活高效：支持多种压缩工具（如 sharp、svgo），可针对不同图片格式（JPG/PNG/GIF/SVG）单独配置压缩参数，兼顾 "压缩率" 和 "图片质量"。

二、第一步：安装依赖

首先通过包管理器安装插件，这里提供 pnpm 和 npm 两种命令（按需选择，开发依赖需加 -D）：

bash

csharp 复制代码

# 方式1：pnpm（推荐，速度更快）
pnpm add image-minimizer-webpack-plugin -D

# 方式2：npm
npm i image-minimizer-webpack-plugin --save-dev

⚠️ 注意：如果使用 sharpMinify 进行压缩（下文配置会用到），需要确保项目中安装了 sharp 依赖。若未安装，需额外执行：pnpm add sharp -D 或 npm i sharp --save-dev（sharp 是高性能图片处理库，压缩效率比传统工具更高）。

三、第二步：配置 Rspack（核心步骤）

Rspack 的配置文件（通常是 rspack.config.js）与 webpack 结构相似。当前 image-minimizer-webpack-plugin 在 Rspack 中仅支持 Loader 模式 （暂不支持 Plugin 模式），因此直接在 module.rules 中针对图片资源配置即可。

完整配置代码

javascript 复制代码

// rspack.config.js
const path = require('path');
const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');

// 工具函数：统一处理资源输出路径（可选，也可直接写路径字符串）
const utils = {
  assetsPath: function (_path) {
    // 输出到 dist/static/img 目录
    return path.posix.join('static', 'img', _path);
  }
};

module.exports = {
  // 其他基础配置（入口、出口等）...
  module: {
    rules: [
      // 图片资源处理：匹配 png/jpg/jpeg/gif/svg 格式
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        // Rspack 内置 Asset 模块：替代 webpack 的 url-loader/file-loader
        type: 'asset',
        parser: {
          // 配置：小于 10KB 的图片转 base64（减少 HTTP 请求）
          dataUrlCondition: {
            maxSize: 10 * 1024 // 10KB
          }
        },
        generator: {
          // 图片输出路径和文件名：static/img/[name].[hash:7].[ext]
          // [name]：原文件名；[hash:7]：7位哈希（避免缓存问题）；[ext]：原后缀
          filename: utils.assetsPath('static/img/[name].[hash:7][ext]')
        },
        // 关键：生产环境才启用图片压缩（开发环境不压缩，提升构建速度）
        use: process.env.NODE_ENV === 'production' 
          ? [
              {
                loader: ImageMinimizerPlugin.loader,
                options: {
                  // 配置压缩器
                  minimizer: {
                    // 使用 sharp 进行图片压缩（高效、支持多格式）
                    implementation: ImageMinimizerPlugin.sharpMinify,
                    // 针对不同图片格式配置压缩参数
                    options: {
                      encodeOptions: {
                        // JPG 压缩：质量 80（0-100，越高越清晰，体积越大）
                        jpeg: { quality: 80 },
                        // PNG 压缩：质量 90（PNG 是无损压缩，quality 影响色彩深度）
                        png: { quality: 90 },
                        // GIF 压缩：默认配置（如需精细控制，可加 optimize: true 等）
                        gif: {},
                        // SVG 压缩：需额外安装 svgo（pnpm add svgo -D），配置示例：
                        // svg: { 
                        //   plugins: [{ name: 'removeViewBox', active: false }] 
                        // }
                      }
                    }
                  }
                }
              }
            ]
          : [] // 开发环境不添加压缩 loader
      }
    ]
  }
};

关键配置解读（避免踩坑）

type: 'asset' ：

Rspack 内置了 Asset 模块，无需额外安装 url-loader 或 file-loader，可直接通过 dataUrlCondition.maxSize 控制 "小图片转 base64" 的阈值（这里设 10KB，可根据项目调整）。
环境判断 process.env.NODE_ENV === 'production' ：

开发环境（development）不需要压缩图片 ------ 一是会拖慢构建速度，二是开发阶段无需关注产物体积，优先保证开发效率。
压缩参数 encodeOptions：
- JPG：quality: 80 是兼顾 "清晰度" 和 "体积" 的常用值，低于 70 可能会出现明显模糊；
- PNG：quality: 90（PNG 无损，此参数控制色彩位数，90 表示保留 90% 色彩信息，平衡体积和清晰度）；
- SVG：需额外安装 svgo 依赖，可通过 plugins 配置具体优化规则（如移除无用的 viewBox 属性）。

四、第三步：验证压缩效果

配置完成后，执行生产环境构建命令（通常是 pnpm run build 或 npm run build），通过两个维度验证：

体积对比 ：构建后查看 dist/static/img 目录下的图片，对比原始图片体积，通常能减少 30%-60%（视图片格式和原始质量而定）；
清晰度检查 ：用浏览器打开构建后的页面，观察图片是否有明显模糊 ------ 若有，可适当提高 encodeOptions 中的 quality 值（如 JPG 调整到 85）。