如何将现有ReactApp打包为可嵌入其他ReactApp的独立组件？

该方案完全满足你不需要重构小应用、打包为单个JS文件直接引入的需求，对大应用的侵入性极低，适配多演示专区的加载场景。

具体实现步骤 #

小应用侧打包配置（Vite/Webpack均适用） #

• 首先调整小应用的入口文件，保留原有独立运行逻辑的同时，导出可被外部调用的组件，支持自定义挂载节点、传参

// src/index.js 入口文件
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'

// 本地开发时独立运行的逻辑，不影响原有开发流程
if (process.env.NODE_ENV === 'development') {
  ReactDOM.createRoot(document.getElementById('root')).render(<App />)
}

// 导出供外部引入的组件
export default function DemoApp(props) {
  const { container, ...restProps } = props
  const rootRef = React.useRef(null)
  
  React.useEffect(() => {
    if (!container) return
    rootRef.current = ReactDOM.createRoot(container)
    rootRef.current.render(<App {...restProps} />)
    // 组件卸载时自动销毁实例，避免内存泄漏
    return () => rootRef.current?.unmount()
  }, [container, restProps])

  return null
}

• 调整构建配置，输出单文件UMD格式，默认将React、ReactDOM标记为外部依赖（避免和大应用的React版本冲突，减少打包体积）
  以下为Vite配置示例，Webpack配置逻辑完全一致：

// vite.config.js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import cssInjectedByJs from 'vite-plugin-css-injected-by-js'

export default defineConfig({
  plugins: [react(), cssInjectedByJs()], // 该插件将所有样式打包进JS，不需要单独引入CSS
  build: {
    lib: {
      entry: 'src/index.js',
      name: 'DemoApp',
      formats: ['umd'],
      fileName: () => 'demo-app.js' // 打包后输出单个JS文件
    },
    rollupOptions: {
      // 标记React为外部依赖，使用大应用的React实例
      external: ['react', 'react-dom'],
      output: {
        globals: {
          react: 'React',
          'react-dom': 'ReactDOM'
        }
      }
    }
  }
})

• 执行npm run build，打包完成后会在dist目录生成单个demo-app.js文件

大应用侧引入使用 #

两种引入方式可按需选择：

1. 静态引入：适合固定展示的演示专区

import DemoApp from './static/demo-app.js'

function DemoSection() {
  const containerRef = React.useRef(null)
  return <div ref={containerRef}>
    <DemoApp container={containerRef.current} initialConfig={{ theme: 'dark' }} />
  </div>
}

2. 动态引入：适合多演示专区按需加载的场景，降低首屏体积

const DemoApp = React.lazy(() => import('./static/demo-app.js'))

function DemoSection() {
  const containerRef = React.useRef(null)
  return <React.Suspense fallback={<div>演示应用加载中...</div>}>
    <div ref={containerRef}>
      <DemoApp container={containerRef.current} />
    </div>
  </React.Suspense>
}

可选优化项 #

• 样式隔离：如果担心小应用样式和大应用冲突，可以将小应用挂载到Shadow DOM节点中，完全隔离样式上下文
• 版本兼容：如果小应用和大应用的React主版本不兼容，只需要删除构建配置中的external字段，将React、ReactDOM打包进单个JS文件即可，仅会增加约40KB的体积
• 双向通信：可以给导出的DemoApp组件添加回调props，实现小应用和大应用之间的数据传递、事件联动
  注意：将React打包进小应用时，必须使用独立的container节点挂载，不要和大应用的React渲染节点嵌套，避免上下文冲突

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