如何在React Router 7中实现类似Astro/Next.js的构建时图片优化，通过Cloudflare Worker托管优化后图片以替代CMS的CloudFront CDN

嘿，这个需求我刚好有过类似的落地经验，完全贴合你说的「不能手动下载图片、不用其他托管商」的限制，给你梳理一套完整的实现方案，从构建时优化到Cloudflare托管一步到位：

一、核心思路拆解 #

本质上和Astro/Next.js的逻辑对齐：构建阶段自动抓取CMS图片→压缩转码（比如AVIF）→替换组件中的图片路径→把优化后的图片部署到Cloudflare，全程不需要手动干预，构建完成后你的<Image>组件会自动变成指向Cloudflare托管资源的<img>标签。

二、构建时图片处理实现（以Vite为例） #

React Router 7大多和Vite搭配使用，我们可以写一个自定义Vite插件，在构建阶段悄悄完成图片的下载、优化和路径替换：

1. 先装依赖 #

需要用到sharp做图片优化，还有Babel工具链来准确解析组件中的Image标签：

npm install sharp @babel/parser @babel/traverse @babel/generator --save-dev

2. 编写Vite自定义插件 #

创建vite-plugin-image-optimizer.js，这个插件会在构建时遍历所有组件，处理Image标签：

import fs from 'fs/promises';
import path from 'path';
import sharp from 'sharp';
import { parse } from '@babel/parser';
import traverse from '@babel/traverse';
import generator from '@babel/generator';
import crypto from 'crypto';

// 缓存已处理的图片URL，避免重复下载
const processedUrls = new Set();

export default function imageOptimizer() {
  return {
    name: 'vite:image-optimizer',
    async generateBundle(options, bundle) {
      const assetsDir = path.join(options.dir, 'assets');
      // 确保assets目录存在
      await fs.mkdir(assetsDir, { recursive: true });

      // 遍历所有构建产物中的JS/TSX文件
      for (const fileName in bundle) {
        if (fileName.match(/\.(js|tsx)$/)) {
          const chunk = bundle[fileName];
          if (typeof chunk.code !== 'string') continue;

          // 用AST解析代码，准确找到所有自定义Image组件
          const ast = parse(chunk.code, {
            sourceType: 'module',
            plugins: ['jsx', 'typescript']
          });

          traverse(ast, {
            JSXOpeningElement(path) {
              // 只处理我们的自定义Image组件
              if (path.node.name.name === 'Image') {
                const srcAttr = path.node.attributes.find(
                  attr => attr.name?.name === 'src' && attr.value?.type === 'StringLiteral'
                );
                if (srcAttr) {
                  const cmsImageUrl = srcAttr.value.value;
                  if (processedUrls.has(cmsImageUrl)) return;

                  // 生成唯一的图片文件名，避免冲突
                  const hash = crypto.createHash('md5').update(cmsImageUrl).digest('hex').slice(0, 12);
                  const optimizedImageName = `${hash}.avif`;
                  const outputPath = path.join(assetsDir, optimizedImageName);

                  // 下载并优化图片
                  try {
                    const response = await fetch(cmsImageUrl);
                    if (!response.ok) throw new Error(`Failed to fetch ${cmsImageUrl}`);
                    
                    const imageBuffer = await response.arrayBuffer();
                    await sharp(imageBuffer)
                      .avif({ quality: 80 }) // 按需调整质量
                      .toFile(outputPath);

                    // 替换Image组件的src为本地优化后的路径
                    srcAttr.value.value = `/assets/${optimizedImageName}`;
                    processedUrls.add(cmsImageUrl);
                  } catch (err) {
                    console.error(`Error processing ${cmsImageUrl}:`, err.message);
                    // 可选：构建失败或者保留原URL作为降级
                    // throw err;
                  }
                }
              }
            }
          });

          // 把修改后的AST转回代码
          chunk.code = generator(ast).code;
        }
      }
    }
  };
}

3. 在Vite配置中启用插件 #

修改vite.config.js，引入我们的插件：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import imageOptimizer from './vite-plugin-image-optimizer';

export default defineConfig({
  plugins: [react(), imageOptimizer()]
});

4. 自定义Image组件 #

创建一个统一的<Image>组件，方便项目中使用：

// src/components/Image.jsx
export default function Image({ src, alt = '', ...props }) {
  // 构建时会自动替换src为Cloudflare托管的路径
  return <img src={src} alt={alt} {...props} />;
}

三、Cloudflare侧的托管方案 #

现在优化后的图片已经在构建产物的assets目录里了，有两种方式用Cloudflare托管：

方案1：直接部署到Cloudflare Pages（最简单） #

1. 把整个Vite构建后的dist目录部署到Cloudflare Pages
2. 访问时，/assets/xxx.avif会直接返回优化后的图片，完全不需要额外配置，Pages会自动处理缓存和CDN分发

方案2：用Cloudflare Worker + KV存储（更灵活） #

如果需要更复杂的逻辑（比如动态调整图片尺寸），可以把优化后的图片上传到Cloudflare KV，用Worker处理请求：

1. 首先在Cloudflare控制台创建一个KV命名空间，比如IMAGE_STORAGE
2. 写一个上传脚本upload-to-kv.js，构建完成后把图片传到KV：

import fs from 'fs/promises';
import path from 'path';
import { Cloudflare } from '@cloudflare/wrangler';

async function uploadImagesToKV() {
  const assetsDir = path.join(process.cwd(), 'dist', 'assets');
  const files = await fs.readdir(assetsDir);
  const cf = new Cloudflare({ apiToken: process.env.CLOUDFLARE_API_TOKEN });

  for (const file of files) {
    if (file.endsWith('.avif')) {
      const filePath = path.join(assetsDir, file);
      const imageBuffer = await fs.readFile(filePath);
      await cf.kv.put('IMAGE_STORAGE', file, imageBuffer, {
        expirationTtl: 31536000 // 缓存1年
      });
      // 可选：删除本地文件，只保留KV中的副本
      // await fs.unlink(filePath);
    }
  }
}

uploadImagesToKV().catch(console.error);

3. 配置Worker脚本，处理图片请求：

// worker.js
export default {
  async fetch(request, env, ctx) {
    const url = new URL(request.url);
    if (url.pathname.startsWith('/assets/')) {
      const imageName = url.pathname.slice(8); // 去掉/assets/前缀
      const imageData = await env.IMAGE_STORAGE.get(imageName, 'arrayBuffer');
      if (imageData) {
        return new Response(imageData, {
          headers: {
            'Content-Type': 'image/avif',
            'Cache-Control': 'public, max-age=31536000, immutable'
          }
        });
      }
    }
    // 其他请求转发到React应用
    return fetch(request);
  }
};

4. 在package.json中修改构建脚本，自动触发上传：

{
  "scripts": {
    "build": "vite build && node upload-to-kv.js"
  }
}

四、关键优化与注意事项 #

1. 多格式兼容：AVIF虽然高效，但部分旧浏览器不支持，可以用sharp同时生成WebP和AVIF，然后在Image组件中生成<picture>标签提供 fallback
2. 缓存机制：插件中已经用processedUrls避免重复下载相同URL的图片，你也可以把已处理的URL存在本地文件，下次构建直接复用
3. 错误处理：构建时如果CMS图片下载失败，可以选择抛出错误终止构建，或者保留原URL作为降级方案
4. 尺寸优化：可以在Image组件中添加width/height props，构建时用sharp裁剪到指定尺寸，进一步压缩体积

这样一套流程走下来，你的React Router项目就能在构建时自动完成图片优化，运行时完全用Cloudflare托管的图片替代CMS的CloudFront，完美解决带宽成本问题。

内容来源于stack exchange