时间戳

首页 > 解决方案 > 如何使用动态导入导入单个组件？

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

问题描述

现在，我有一个反应应用程序，它可以导入这样的单个项目或组件

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

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

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

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

不会像..

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

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

标签： javascriptreactjsecmascript-6import

解决方案

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

您想要什么取决于库的构建和发布方式。例如，可以只导入lodash. 你可以看看这个npm 搜索，看看它们是如何独立发布的。但对一些人来说，这是不可能的，因为他们不会这样。

推荐阅读