Webpack 模块联合延迟加载 remoteEntry.js

【问题标题】：Webpack module federation lazy loading remoteEntry.jsWebpack 模块联合延迟加载 remoteEntry.js
【发布时间】：2021-09-08 09:18:43
【问题描述】：

当我将 React 与 ReactRouter 一起使用时，我可以延迟加载应用程序的入口文件吗？当我进入页面时，我拥有的每个应用程序都有许多对 remoteEntry.js 文件的请求。由于性能，我不想在一开始就获取它。我想在访问特定应用的路线时加载它们。

【问题讨论】：

标签： reactjs webpack react-router micro-frontend webpack-module-federation

【解决方案1】：

 new ModuleFederationPlugin({
    name: 'reactParent',
    filename: 'remoteEntry.js',
    remotes: {
        reactChild: 'reactChild@/reactChild/remoteEntry.js',
        svelteChild: 'svelteChild@/svelteChild/remoteEntry.js',
        vueChild: 'vueChild@/vueChild/remoteEntry.js'
    }
})

将 remoteEntry.js 文件的路径放入 Webpack 配置中即可完成工作。在此示例中，我的应用设置为将请求代理到微前端，因此 /reactChild 被代理到特定应用的运行位置。

【讨论】：