过去非常困难。这些天来,Webpack Module Federation让它喘不过气来。
他们有大量的样品可以帮助您入门。例如,basic-host-remote 示例有一个适合您需要的简单场景。只需将整个 Github 存储库提取cd
到此示例中,然后运行它(如每个示例中所述README
)。
请留意“网络”选项卡。组件在被明确请求之前不会被加载。
基本示例
basic-host-remote 示例有两个单独的包:app1
和app2
.
app1
想要使用来自的组件app2
app2
提供一个Button
组件
- app1/src/App.js动态加载按钮。(它在初始渲染期间这样做,使得按需加载不那么明显。)
- 时机成熟时,
app1
使用 dynamic 请求组件import
。
- 它使用React.lazy包装负载,如下所示:
const RemoteButton = React.lazy(() => import("app2/Button"));
- 例如,您可以在 a
useEffect
或Route.render
回调等中执行此操作。
app1
可以使用它Button
,一旦它被加载。加载时,它会显示一条加载消息,使用Suspense
:
<React.Suspense fallback={<LoadingScreen />}>
<RemoteButton />
</React.Suspense>
- 或者,您可以使用从语句返回的承诺,而不是使用
lazy
and ,并以您喜欢的任何方式处理异步加载。当然,完全不限于动态加载任何模块。Suspense
import(...)
WMF
react
- 请注意,两者都
app1
具有app2
相同的shared
设置,确保这些共享依赖项只加载一次,而不是与远程加载的代码捆绑/复制:
{
// ...
shared: { react: { singleton: true }, "react-dom": { singleton: true } },
}
注意WMF
动态加载必须使用动态import
(即import(...)
),因为:
- 非动态导入将始终在加载时解析(从而使其成为非动态依赖项),并且
- “动态
require
”不能被 webpack 捆绑,因为浏览器没有这个概念commonjs
(除非你使用一些 hack,在这种情况下,你将失去相关的“加载promise
”)。
WMF 样本
WMF 需要一点学习,但它的所有样本都有以下共同元素:
- 每个样本都有多个独立的包。
- 每个包都有自己的
webpack.config.js
- 每个包通常充当主机(动态提供组件)或此类组件的消费者,或两者兼而有之。
- 在
development
模式下,您通常使用完美集成的webpack-dev-server
.
- 注意:在
production
模式下,您希望对配置进行一些小调整。当webpack-dev-server
不在图片中时,您的构建只是将一些额外remoteEntry.js
的文件添加到您的构建输出中。
- 您可以使用配置轻松配置如何处理常见依赖
shared
项。(通常您希望它们充当单例,这意味着每个人都应该共享公共依赖项,而不是打包自己的依赖项。)
- 如果你想坚持把所有东西都放在一个包里,那可能也是可能的。只是
expose
它并将它自己的(独立的)组件添加到它自己的remotes
. 不确定它是否有效,但值得一试。
最后的话
同样,这将需要一些学习曲线,但我发现这绝对值得。感觉就像我见过的最复杂的动态构建 + 加载系统之一。
最烦人的是,WMF 目前在 Webpack 页面上仍然没有适当的 API 文档,但我相信它很快就会到来。目前,只有一个不太完善的概念笔记集合。
WMF 作者本人承诺很快会提供更好的文档™️。
幸运的是,对于学习来说,这些样本非常好,积极维护并且仍在增强。