javascript - 如何使用动态导入导入单个组件？

Question

现在，我有一个像这样导入单个项目或组件的 React 应用程序

import { Component1, Component2, Component3 } from "some-react-library";
import Component4 from "another-react-library";

假设我想延迟加载这些组件。我知道如何像这样导入 Component4

const Component4 = Loadable({
  loader: () => import("another-react-library");
})

同样，我想导入 Component1、Component2 和 Component3。对单个组件/对象使用动态 import() 方法的语法是什么？

不会像..

const Component2 = Loadable({
  loader: () => import("some-react-library").Component2
})

.. 不必要地首先加载整个 some-react-library，然后从中选择 Component2？

Answer 1

您提到的方法是正确的。它会加载整个库，然后您可以从中取出任何想要的东西。

您想要什么取决于库的构建和发布方式。例如，可以只导入 lodash 的一个模块。你可以看看这个npm search看看它们是如何独立出版的。但对于某些人来说，这是不可能的，因为他们不会以这种方式进行。