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

Question

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

​

​

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