1

为了减少我的应用程序的初始负载，我尝试进行代码拆分。例如，我成功拆分了 twilio-video，以在用户按下“呼叫”时加载和初始化

import('twilio-video').then(Video => {
    Video.connect(twilioInfo.data.token, options).then(room => {
        ...
    });
});

Webpack 正确拆分代码并在需要时加载。

现在我想对组件或路由做同样的事情（当我们站在登录页面时不加载用户配置文件）。有没有等价的

const OtherComponent = React.lazy(() => import('./OtherComponent'));

或者

const Home = lazy(() => import('./routes/Home'));

或任何其他方式在路由路径被击中时加载组件？

4

1 回答 1

1

过去非常困难。这些天来，Webpack Module Federation让它喘不过气来。

他们有大量的样品可以帮助您入门。例如，basic-host-remote 示例有一个适合您需要的简单场景。只需将整个 Github 存储库提取cd到此示例中，然后运行它（如每个示例中所述README）。

请留意“网络”选项卡。组件在被明确请求之前不会被加载。

基本示例

basic-host-remote 示例有两个单独的包：app1和app2.

  1. app1想要使用来自的组件app2
  2. app2提供一个Button组件
  3. app1/src/App.js动态加载按钮。（它在初始渲染期间这样做，使得按需加载不那么明显。）
  4. 时机成熟时，app1使用 dynamic 请求组件import。
  5. 它使用React.lazy包装负载，如下所示： 
    const RemoteButton = React.lazy(() => import("app2/Button"));
    • 例如，您可以在 auseEffect或Route.render回调等中执行此操作。
  6. app1可以使用它Button，一旦它被加载。加载时，它会显示一条加载消息，使用Suspense： 
    <React.Suspense fallback={<LoadingScreen />}>
  <RemoteButton />
</React.Suspense>
    • 或者，您可以使用从语句返回的承诺，而不是使用lazyand ，并以您喜欢的任何方式处理异步加载。当然，完全不限于动态加载任何模块。Suspenseimport(...)WMFreact
    • 请注意，两者都app1具有app2相同的shared设置，确保这些共享依赖项只加载一次，而不是与远程加载的代码捆绑/复制：
    {
  // ...
  shared: { react: { singleton: true }, "react-dom": { singleton: true } },
}

注意WMF动态加载必须使用动态import（即import(...)），因为：

  1. 非动态导入将始终在加载时解析（从而使其成为非动态依赖项），并且
  2. “动态require”不能被 webpack 捆绑，因为浏览器没有这个概念commonjs（除非你使用一些 hack，在这种情况下，你将失去相关的“加载promise”）。

WMF 样本

WMF 需要一点学习，但它的所有样本都有以下共同元素：

  1. 每个样本都有多个独立的包。
  2. 每个包都有自己的webpack.config.js
  3. 每个包通常充当主机（动态提供组件）或此类组件的消费者，或两者兼而有之。
  4. 在development模式下，您通常使用完美集成的webpack-dev-server.
    • 注意：在production模式下，您希望对配置进行一些小调整。当webpack-dev-server不在图片中时，您的构建只是将一些额外remoteEntry.js的文件添加到您的构建输出中。
  5. 您可以使用配置轻松配置如何处理常见依赖shared项。（通常您希望它们充当单例，这意味着每个人都应该共享公共依赖项，而不是打包自己的依赖项。）
  6. 如果你想坚持把所有东西都放在一个包里，那可能也是可能的。只是expose它并将它自己的（独立的）组件添加到它自己的remotes. 不确定它是否有效，但值得一试。

最后的话

同样，这将需要一些学习曲线，但我发现这绝对值得。感觉就像我见过的最复杂的动态构建 + 加载系统之一。

最烦人的是，WMF 目前在 Webpack 页面上仍然没有适当的 API 文档，但我相信它很快就会到来。目前，只有一个不太完善的概念笔记集合。

WMF 作者本人承诺很快会提供更好的文档™️。

幸运的是，对于学习来说，这些样本非常好，积极维护并且仍在增强。

于 2021-05-29T21:35:55.977 回答