Node.js 反应：导入具有对象分解结构的模块，还是单独导入？

在React中，某些软件包允许您使用单独的分配：

从“@material ui/core/Card”

导入卡片，或通过对象分解：

从“@material ui/core”

导入{Card}来导入组件

我在一篇博客中读到，如果您的环境没有适当的树抖动功能，那么使用对象解构语法可能会对性能产生影响。结果是导入了

@material ui/core

的每个组件，而不仅仅是您想要的组件

---

在什么情况下，使用对象分解导入会导致应用程序性能下降？影响有多严重？此外，在一个拥有所有功能的环境中，如默认的create react应用程序配置，使用其中一个会有任何区别吗？

加载额外的代码，例如您可能不需要的material ui中的许多组件，有两个主要性能影响：下载时间和执行时间

下载时间很简单：您的JS文件较大，因此下载时间较长，尤其是在移动设备等较慢的连接上。使用诸如摇树之类的机制适当地瘦身JS总是一个好主意

执行时间不太明显，但也有类似的效果，这一次对可用计算能力较低的浏览器来说——同样，主要是移动浏览器。即使从未使用过组件，浏览器也必须解析和执行源代码，并将其拉入内存。在拥有强大处理器和大量内存的桌面上，您可能永远不会注意到差异，但在速度较慢/较旧的计算机或移动设备上，您可能会注意到，即使文件在处理过程中下载完毕，也会有一点延迟

---

假设您的构建工具能够正常工作，我的观点是，它们大体上是等效的。构建工具不会将未使用的组件包含到已编译的JS中，因此它不会影响下载或执行时间。

通常不鼓励依赖包内部结构，但它位于Material UI中：

import Card from '@material-ui/core/Card';

为了不依赖于此并缩短进口，可以使用顶级出口

import { Card } from "@material-ui/core"

只要设置支持树摇动，两者都可以互换。如果未使用的顶级导出可能会受到严重影响，则第二个选项更可取。否则，第一个选项更可取，它保证未使用的包导入不会包含在包中

---

create react应用程序使用支持树摇动的网页包配置，可以从第二个选项中获益。

这些导入并不等效。用户将加载

物料ui/core/Card

给定的文件，然后将默认导出放入

Card

。另一个将加载由

物料ui/core

给出的文件，并尝试获取导出的

卡片

符号。此外，我怀疑您正在使用webpack，因为您的导入语句中有

@

，这增加了问题的复杂性。你想问关于webpack如何处理

导入

或规范如何处理的问题吗？是的，webpack是我用来引导的create react应用程序中包含的内容。虽然MaterialUI看起来与webpack插件的名称不同，但它只是一个包含ui元素集合的常规节点包。像Boostrap或Materialize。我很好奇在使用webpack时是否会有什么不同，但如果我不使用webpack，它会有什么影响。还值得注意的是，无论何时使用

{}

导入，您都不会破坏结构。不能使用此语法进行深层次的分解。

{}

获取命名导出。那里的语法很特殊，这就是为什么可以使用

as

语句的原因。好的，很有趣，感谢您提供的信息当前CRA（v3.4.3）的开发模式也是这样吗？@olefrank您是在问树震动吗？它不应该出现在开发模式中，它增加了构建时间，结果是减少了捆绑包大小，这对于开发模式来说并不重要。根据：开发捆绑包可以包含完整的库，这可能导致启动时间变慢。我想要最快的启动时间developing@olefrank另一方面，从模块的主入口点导入使其更易于维护，并提供了一些选项，例如，在开发环境的CRA配置中，

@material ui/core

可以别名为

@material ui/core/umd/material ui.development.js

，并可能缩短构建时间，而本地开发的加载时间仍然合理。如果您仍然能够通过第一次导入看到dev中的改进，那么您会更喜欢它。