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 示例有两个单独的包:app1app2.

  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"));
    
    • 例如,您可以在 auseEffectRoute.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 回答