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

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，并查看它们如何独立发布。但是对于某些人来说，这是不可能的，因为它们不会以这种方式进行。