性能问题：遵循点符号结构的组件库

Question

我决定遵循点符号来创建我的组件库，就像React-bootstrap所做的那样：

<Card>
  <Card.Body>
    <Card.Title>Card Title</Card.Title>
    <Card.Text>
      Some quick example text to build on the card title and make up the bulk of
      the card's content.
    </Card.Text>
  </Card.Body>
</Card>

为此，您需要将子组件（如CardBody）嫁接到“主要”组件（此处Card），就像这样：

const Card = ({ children }) => <>{children}</>
const CardBody = () => <>Body</>

Card.Body = CardBody

export default Card

这样你就可以Card很容易地使用所有的孩子：

import Card from 'my-component-library/card'

<Card>
  <Card.Body>
  ...

这种类型的结构在很多组件库中使用，但经过反思，我意识到使用这种结构，这import Card from 'my-component-library/card'是一个重要的动作，因为在引擎盖下可能有几十个组件被导入但未使用（如Card.Header或Card.Text）。

所以我的问题是：这种结构是否存在显着的性能问题？我应该像这样保留默认的“导入有用的组件”结构吗？

import Card from 'my-component-library/card'
import CardBody from 'my-component-library/cardBody'

<Card>
  <CardBody>
  ...

Answer 1

非常好的问题！

有两点需要讨论。

第 1 点 - 大小和树木抖动。

当您使用时

import {MyComponent} from './MyComponent'

Webpack（或其他捆绑器）可以摇动树:)并仅采用您真正使用的代码。

如果是

import * from 'MyLib'

您导入所有内容（也适合您的情况）。通常，这不是问题，但如果您设计库 - 这是需要考虑的非常重要的一点。

第 2 点——性能。

导入模块时会发生什么？

• 分配的对象
• JavaScript 被执行

我是什么意思。我们来检查一下这段代码：

一些模块

import {MyComponent} from './MyComponent'

当我们导入这个模块时，只要它在一个文件中，JS引擎就会： * 创建3个新函数， * 分配1个很大的数组。

当然，这需要一些时间和记忆。如果我们采用经典方法，这不会成为问题，因为您拆分了代码并将其移动到单独的文件中，并且只有在导入它们时才会执行相关代码。按照你的方法-它们无论如何都会被执行。对于图书馆来说，这也是重要的一点。

事实上就是这样。尝试这两种方法，进行一些检查并选择最适合您的选项。