我应该使用react-loadable或loadable-components进行代码拆分吗？

Question

我想用服务器端渲染拆分我的反应代码。为此，我有两个选择。

• loadable-components
• 可加载的内容

loadable-components

反应文档建议对服务器呈现的应用程序使用 loadable-components 。但每周NPM的下载很少。

react-loadable

与以前的软件包相比，该软件包的NPM每周下载量很高，但是根据 loadable-components 文档，此软件包已不再维护。

  长期以来，

react-loadable是React代码拆分的推荐方法。但是，今天不再对其进行维护，并且与Webpack v4 +和Babel v7 +不兼容。 Documentation Link

请向我提供适当的包装。

Answer 1

尽管 react-loadable 的文档说 react-loadable 与Webpack v4 +和Babel v7 +不兼容，但我还是使用了 react-loadable 并且有效。服务器和客户端渲染应用程序都没有遇到任何问题。

Answer 2

您可以使用React.lazy。 呈现此组件时，这将自动加载包含OtherComponent的捆绑软件。

React.lazy采用必须调用动态import（）的函数。这必须返回一个Promise，该Promise会解析为带有默认导出的模块，该模块包含一个React组件。

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

function MyComponent() {
  return (
    <div>
      <OtherComponent />
    </div>
  );
}

Answer 3

React team建议使用FWIW loadable-components

此外，React.lazy当前不支持SSR（截至2020年5月）