我们如何在 React 中动态导入 Npm 模块？

Question

我已经看到用于动态导入的 webpack documentation（参见下图），但这似乎在 React 中不起作用，因为我们 return 组件直接在 React 中而不是将元素添加到DOM（在承诺的 then() 之后）。

在 React lazy loading documentation 中，他们展示了如何仅延迟加载其他 React 组件，但没有展示如何动态导入 NPM 库。

因此，如果有人可以解释如何动态导入 npm 模块，那就太好了。

Answer 1

NPM 包导入跟随它是组件，所以如果我们动态导入组件意味着我们动态导入包，因为 import 在组件被调用之前不会被调用

有关代码拆分的更多信息，请阅读本文它会抛出所有你可以用来实现代码拆分的技术

https://blog.logrocket.com/react-dynamic-imports-route-centric-code-splitting-guide/

Answer 2

您的代码按预期工作正常。然而，这会将整个 lodash 库包含到包中，因为 lodash 是一个 cjs 模块。您可以像下面这样导入特定的模块，以避免包含整个 lodash 库，

function getComponent() {
  return import("lodash/join")
    .then(({ default: _ }) => {
      const element = document.createElement("div");
      element.innerHTML = _(["Hello", "world"], " ");
      return element;
    })
    .catch((err) => "error");
}

如果你想使用更多函数，比如 lodash 中的 join，你可以使用 lodash-es 这是一个 esm 模块和 tree shakeable，webpack 将只包含导入的函数到您的捆绑包。

function getComponent() {
  return import("lodash-es")
    .then(({ join, reverse }) => {
      const element = document.createElement("div");
      const txtArr = ["Hello", "world"]
      element.innerHTML = join(reverse(txtArr), " ");
      return element;
    })
    .catch((err) => "error");
}

我们如何在 React 中动态导入 Npm 模块？

How can we do dynamic imports of Npm modules in React?

reactjs

webpack

dynamic-import