多React应用iframe加载优化：如何共享公共Bundle代码？

针对你用iframe加载多个React应用、希望共享代码（如React核心）只加载一次的需求，有以下几种可行方案：

方案1：主页面预加载共享依赖，iframe应用复用全局变量 #

把React、ReactDOM这类共享依赖放到主页面加载，通过全局对象暴露给所有iframe，同时修改每个React应用的打包配置，跳过对这些依赖的打包，直接使用主页面提供的全局变量。

步骤： #

1. 主页面加载共享依赖
   在主HTML中引入共享库的CDN资源或本地打包文件：

   <html>
     <!-- 预加载React和ReactDOM -->
     <script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
     <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
     <!-- 暴露全局变量供iframe使用 -->
     <script>
       window.React = React;
       window.ReactDOM = ReactDOM;
     </script>
     <!-- 加载iframe应用 -->
     <iframe src="served-app-1.html"></iframe>
     <iframe src="served-app-2.html"></iframe>
     <iframe src="served-app-3.html"></iframe>
   </html>
   

2. 修改React应用的打包配置
   以Webpack为例，在webpack.config.js中配置externals，告知打包工具无需打包这些依赖：

   module.exports = {
     // ...其他配置
     externals: {
       react: 'React',
       'react-dom': 'ReactDOM'
     }
   };
   

   如果用Vite，在vite.config.js中配置build.rollupOptions.external：

   import { defineConfig } from 'vite';
   import react from '@vitejs/plugin-react';
   
   export default defineConfig({
     plugins: [react()],
     build: {
       rollupOptions: {
         external: ['react', 'react-dom'],
         output: {
           globals: {
             react: 'React',
             'react-dom': 'ReactDOM'
           }
         }
       }
     }
   });
   

   配置完成后，每个React应用的bundle会自动跳过React核心代码，直接引用主页面提供的全局变量，实现共享代码只加载一次。

方案2：使用Webpack模块联邦（Module Federation） #

Webpack 5+的Module Federation专为微前端场景设计，可将共享依赖抽成独立远程模块，让多个应用共同引用，避免重复加载。

步骤： #

1. 创建共享依赖的远程模块项目
   新建项目，配置Module Federation作为host暴露React和ReactDOM：

   // webpack.config.js
   const { ModuleFederationPlugin } = require('webpack').container;
   const path = require('path');
   
   module.exports = {
     entry: './src/index',
     mode: 'production',
     output: {
       publicPath: 'http://localhost:3000/', // 共享模块部署地址
       path: path.resolve(__dirname, 'dist')
     },
     plugins: [
       new ModuleFederationPlugin({
         name: 'sharedLibs',
         filename: 'remoteEntry.js',
         exposes: {
           './React': './node_modules/react',
           './ReactDOM': './node_modules/react-dom'
         }
       })
     ]
   };
   

2. 配置每个React应用引用远程模块
   在应用的Webpack配置中，通过Module Federation引入共享模块：

   // 应用的webpack.config.js
   const { ModuleFederationPlugin } = require('webpack').container;
   
   module.exports = {
     // ...其他配置
     plugins: [
       new ModuleFederationPlugin({
         name: 'app1',
         remotes: {
           sharedLibs: 'sharedLibs@http://localhost:3000/remoteEntry.js'
         }
       })
     ]
   };
   

3. 在应用中导入共享模块
   应用代码直接从远程模块导入React：

   import React from 'sharedLibs/React';
   import ReactDOM from 'sharedLibs/ReactDOM';
   
   ReactDOM.render(<App />, document.getElementById('root'));
   

   这样三个应用会共享加载一次React核心代码，无需重复下载。

注意事项 #

• 若iframe应用和主页面不同域，方案1需处理跨域问题（如CORS或代理），Module Federation则天然支持跨域模块共享。
• 确保所有应用使用的共享依赖版本一致，避免版本冲突引发兼容性问题。

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