一个同时支持 React、Vue、Node、CLI、Vite、Webpack 的图片优化库：rv-image-optimize

做前端项目的时候，图片优化几乎是绕不过去的一件事。

比如这些需求，很多项目里都会遇到：

页面图片太大，首屏加载慢
想做懒加载、渐进式加载
想根据 CDN 自动拼接 WebP / AVIF / 尺寸参数
想在浏览器端先压缩，再上传后端
想在 Node 服务端、脚本、CLI 里批量压缩图片
想在构建阶段自动优化静态资源
想在 AI 工具、自动化脚本里直接复用图片压缩能力

问题是，这些能力通常分散在很多不同的库里：

懒加载一个库
压缩一个库
上传再自己写
Vite 插件一个方案
Webpack 再来一个方案
Node / CLI 又是另一套逻辑

最后项目越做越碎，维护成本越来越高。

所以我做了一个统一的图片优化工具包：rv-image-optimize。

它不是只解决某一个点，而是尽量把"图片优化链路"里常见的能力串起来：

React 图片组件
通用工具函数
浏览器无损压缩
Node 原生压缩
CLI 批处理
上传编排
Vite 构建期静态图压缩
Webpack 构建期静态图压缩
IndexedDB 缓存
AI / Agent 调用友好

这个库能做什么

1. React 图片组件

如果你是 React 项目，可以直接用现成组件：

LazyImage
ProgressiveImage

支持：

懒加载
渐进式加载
占位图
自动 URL 优化
浏览器压缩兜底
缓存能力

示例：

jsx 复制代码

import { LazyImage } from 'rv-image-optimize';
import 'rv-image-optimize/styles';

export default function App() {
  return (
    <LazyImage
      src="https://example.com/demo.jpg"
      width={800}
      height={600}
      optimize={{ width: 800, quality: 85, autoFormat: true }}
    />
  );
}

2. Vue / 原生 JS / 非 React 项目也能用

如果不是 React 项目，也不用担心。这个库专门提供了不带 React 的工具函数入口：

js 复制代码

import { optimizeImageUrl, loadImageWithCache } from 'rv-image-optimize/utils-only';

const optimized = optimizeImageUrl('https://example.com/demo.jpg', {
  width: 1200,
  quality: 82,
  autoFormat: true,
});

这意味着：

Vue 可以用
原生 JS 可以用
Webpack 项目可以用
只想拿工具函数也可以用

3. 浏览器端压缩后直接上传

很多后台系统、内容系统、文章系统都需要上传图片。

我在这个库里把"压缩后上传"这条链路也补上了，支持：

自定义上传接口地址
自定义请求方式
自定义 Authorization
自定义 form-data
JSON 模板占位符
批量文件 / 文件夹上传
压缩后自动上传

而且这部分能力我拆成了两层：

upload-core：无 UI 核心能力，适合 Node / 脚本 / SSR / Agent
upload：浏览器端压缩后上传编排

4. Node / CLI 压缩已经支持

如果你需要在服务端、脚本、自动化任务里处理图片，也可以直接用。

Node API：

js 复制代码

import { compressImageFile } from 'rv-image-optimize/node-compress';

const result = await compressImageFile('./images/demo.png', {
  outputDir: './compressed',
  format: 'webp',
  quality: 82,
});

CLI：

bash 复制代码

rv-image-optimize ./images --output-dir ./compressed --format webp --quality 82

支持：

单文件压缩
目录递归压缩
指定输出目录
指定格式 / 质量 / 尺寸
--delete-original
--replace-original
--json 结构化输出

5. Vite 构建期静态图片压缩

如果你是 Vite 项目，已经支持构建期静态图片压缩：

ts 复制代码

import { defineConfig } from 'vite';
import { rvImageOptimizeVitePlugin } from 'rv-image-optimize/vite-plugin';

export default defineConfig({
  plugins: [
    rvImageOptimizeVitePlugin({
      includeFormats: ['png', 'webp', 'avif', 'svg'],
    }),
  ],
});

默认特点：

只处理适合无损优化的格式
只有体积更小时才覆盖
不改资源路径
不影响开发模式

6. Webpack 构建期静态图片压缩也支持了

这次我重点补上的能力之一，就是 Webpack 4 / 5 的构建期静态图片压缩插件。

js 复制代码

import path from 'node:path';
import { rvImageOptimizeWebpackPlugin } from 'rv-image-optimize/webpack-plugin';

export default {
  mode: 'production',
  entry: './src/index.js',
  output: {
    path: path.resolve('dist'),
    filename: 'bundle.js',
  },
  plugins: [
    rvImageOptimizeWebpackPlugin({
      includeFormats: ['png', 'webp', 'avif', 'svg'],
    }),
  ],
};

这个插件的思路是：

直接处理 compilation assets
不走落盘后扫描
对齐 Vite 插件默认行为
只有更小才覆盖原资源
不改文件名，不改 publicPath

适合哪些项目

我自己把这个库的适用场景大概总结了一下：

React 图片展示项目
Vue / 原生 JS 图片优化项目
带 CDN 图片参数处理的业务系统
管理后台上传工具
需要浏览器压缩后上传的页面
Node 服务端图片处理
CLI 批量压缩工具
Vite 构建优化
Webpack 构建优化
AI / Agent 自动化压图流程

SSR / 服务端能不能用

很多人会问，既然 Node 层已经支持了，那 SSR 能不能用？

答案是：

服务端能力是支持的
但不是整个根入口所有能力都适合服务端执行

更准确地说，下面这些更适合服务端或构建端：

rv-image-optimize/node-compress
rv-image-optimize/upload-core
rv-image-optimize/webpack-plugin
一部分纯 URL 处理函数

而浏览器压缩、IndexedDB 缓存、渐进式加载、浏览器上传编排这些能力，依然更适合客户端。

安装方式

bash 复制代码

npm install rv-image-optimize

常用入口

rv-image-optimize
rv-image-optimize/utils-only
rv-image-optimize/node-compress
rv-image-optimize/vite-plugin
rv-image-optimize/webpack-plugin
rv-image-optimize/upload-core
rv-image-optimize/upload

项目地址

npm：rv-image-optimize
在线预览：https://imageoptimize.gitee.io/rv-image-optimize

结语

如果你项目里"图片优化"不是只停留在一个点，而是前后端、构建、上传、压缩都要串起来，那这个包会比较合适。

如果你正好在做这些事情：

图片懒加载
渐进式加载
CDN 图片 URL 优化
浏览器压缩
Node 批量压缩
CLI 自动化压缩
Vite / Webpack 构建期压图
上传前压缩和接口编排

可以试试 rv-image-optimize。