如何使用Rollup实现支持代码分割的React服务端渲染？

• React 官方原生方案：React 18 及以上版本原生支持 Suspense 模式的 SSR，配合 react-dom/server 提供的流式渲染API，可直接对接 Rollup、esbuild 原生支持的标准 import() 动态导入语法，无需依赖绑定 webpack 的专用库。打包工具会自动对动态导入的内容做拆包，配合构建阶段生成的资源映射表即可实现服务端预加载、客户端水合的逻辑对齐。
• 通用轻量级代码分割库：有不绑定特定打包器的第三方代码分割库可选，仅依赖标准动态导入语法，同时提供 SSR 场景下的资源收集能力，Rollup 和 esbuild 都可以通过极简的插件配置完成适配，不需要改动业务层的代码分割逻辑。
• 框架级内置方案：如果基于全栈 React 框架开发，大部分主流框架已经内置了适配对应打包器的 SSR 代码分割能力，不需要开发者手动处理拆包、资源匹配逻辑，直接使用框架提供的动态导入语法即可。

不需要手动遍历 React 树，也不需要预先逐个配置组件对应的 chunk 关联关系，可以通过以下标准化流程实现：

• 构建阶段：Rollup、esbuild 都支持通过自定义插件，自动生成「动态导入源路径」和「输出 chunk 资源路径（含JS、CSS）」的映射表，整个过程自动完成，无需手动维护配置。
• 服务端渲染阶段：通过自定义高阶组件包裹所有动态导入的组件，在渲染过程中自动收集当前请求用到的所有动态组件标识，无需全量遍历 React 树。
• HTML 注入阶段：根据收集到的组件标识，从预生成的映射表中查询对应的 chunk 资源，将资源的预加载、执行标签注入到返回的 HTML 中，即可保证客户端水合时能拿到所有需要的资源，避免水合不匹配问题。

如果使用 React 18 以下版本，不支持 Suspense 流式 SSR，只需要在高阶组件中增加服务端预加载逻辑，等所有当前请求用到的动态组件加载完成后再执行渲染即可，同样不需要手动维护组件和 chunk 的对应关系。

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