javascript - 如何将 React.lazy 用于模块的组件？

Question

我正在使用名为“@toast-ui/react-editor”的 npm 包。它包括一个“查看器” react 组件。我可以使用:

const Viewer = require("@toast-ui/react-editor").Viewer

但这会大大增加捆绑包的大小。所以我想在需要时使用 React.lazy 懒惰地加载它。我将在组件内部使用它:

<Viewer {...props} />

但我不知道该怎么做。

我试过这种方式，但没有奏效。

const Lazy = React.lazy(() => import(require("@toast-ui/react-editor"))).Viewer;

我真的很想知道该怎么做。

Answer 1

如Viewer不是默认组件，它不像删除require那么简单, (不过，这甚至不需要)。

您需要动态导入它，然后将模块作为默认模块返回( as that's what lazy expects and works with only )。

const Viewer = lazy(() =>
  import("@toast-ui/react-editor").then(module => {
    return { default: module.Viewer };
  })
);