13

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

  • 可加载组件
  • 可反应加载

可加载组件

React 文档建议对服务器渲染的应用程序使用可加载组件。但它的 NPM 每周下载量很少。

可反应加载

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

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

请用适当的包装引导我。

4

3 回答 3

7

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

于 2019-01-29T04:41:04.880 回答
0

React 团队loadable-components推荐FWIW

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

于 2020-05-24T18:46:23.863 回答
-1

你可以使用React.lazy。当这个组件被渲染时，这将自动加载包含 OtherComponent 的包。

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

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

function MyComponent() {
  return (
    <div>
      <OtherComponent />
    </div>
  );
}
于 2019-01-25T07:16:56.063 回答