【问题标题】：Should I use react-loadable or loadable-components for code splitting?我应该使用 react-loadable 还是 loadable-components 进行代码拆分？
【发布时间】：2019-06-18 23:23:54
【问题描述】：

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

可加载组件
反应加载

可加载组件

React 文档建议将 loadable-components 用于服务器渲染的应用程序。但它的 NPM 每周下载量很少。

反应加载

与前一个相比，这个包的 NPM 每周下载量非常高，但根据 loadable-components 文档，这个包不再维护。

react-loadable 长期以来一直是 React 代码拆分的推荐方式。但是，今天它不再维护，并且与 Webpack v4+ 和 Babel v7+ 不兼容。 Documentation Link

请用合适的包裹引导我。

【问题讨论】：

标签： reactjs webpack react-loadable

【解决方案1】：

您可以使用React.lazy。这将在渲染此组件时自动加载包含 OtherComponent 的包。

React.lazy 接受一个必须调用动态 import() 的函数。这必须返回一个 Promise，该 Promise 解析为具有包含 React 组件的默认导出的模块。

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

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

【讨论】：

react lazy 不支持服务端渲染。 LINK
尝试使用import()，更多细节见post

【解决方案2】：

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

【讨论】：

我在使用 react-loadable 时总是收到警告。你是怎么做到的？

【解决方案3】：

FWIW loadable-components被React team推荐

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

【讨论】：

感谢您提醒我为什么选择它：D