如何在Vite React SSR中获取context.modules？相关支持插件有哪些？

关键结论 #

• @vitejs/plugin-react 目前没有原生支持 Vue 插件中那种 context.modules 功能。
• 社区里暂时没有专门实现该功能的成熟插件，但可以通过自定义代码实现类似效果。

自定义实现思路 #

要在 React SSR 中追踪服务端渲染时用到的模块，进而关联 ssr-manifest.json 里的资源映射，可按以下步骤操作：

1. 注入模块追踪逻辑：在 Vite 的 SSR 构建钩子或入口文件中，给模块加载过程添加追踪代码，记录被服务端渲染调用的模块 ID。
2. 收集模块信息：在 SSR 渲染上下文里维护一个集合，存储所有被访问到的模块 ID。
3. 关联清单文件：渲染完成后，把收集到的模块 ID 和 ssr-manifest.json 中的映射对应起来，提取出对应的代码块和资源文件。

简易实现示例 #

// SSR 入口文件中添加追踪逻辑
import { renderToString } from 'react-dom/server';
import App from './App';

// 用于存储渲染过程中用到的模块 ID
const renderedModules = new Set();

// 劫持模块解析逻辑，记录已加载的模块
const originalResolve = require.resolve;
require.resolve = function (id) {
  const resolvedId = originalResolve(id);
  renderedModules.add(resolvedId);
  return resolvedId;
};

export async function render() {
  const appHtml = await renderToString(<App />);
  // 读取 ssr-manifest 并匹配关联资源
  const manifest = require('./dist/ssr-manifest.json');
  const associatedAssets = Array.from(renderedModules)
    .map(moduleId => manifest[moduleId] || [])
    .flat();

  return {
    appHtml,
    // 返回收集到的资源，用于客户端预加载
    assets: associatedAssets
  };
}

替代方案 #

如果不需要完全复刻 Vue 的 context.modules 行为，也可以结合 Vite 原生的 ssr-manifest.json 用以下方式优化：

• 使用 import.meta.glob 预加载可能用到的模块资源，提前关联对应的代码块。
• 在 React 组件中通过自定义 Hook 标记需要客户端加载的资源，渲染时收集这些标记并匹配到 manifest 中的对应条目。

内容的提问来源于stack exchange，提问作者Taiyi