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

Question

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

标签： reactjswebpackreact-routermicro-frontendwebpack-module-federation

Answer 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 被代理到特定应用程序的运行位置。