反应:导入具有对象解构功能的模块,还是单独导入?

时间:2019-02-26 21:17:52

标签: node.js reactjs performance npm material-ui

在React中,某些软件包允许您使用单独的分配:import Card from "@material-ui/core/Card"或通过对象分解:import { Card } from "@material-ui/core"来导入组件。

我在Blog中读到,如果您的环境没有适当的摇树功能,则使用对象分解语法可能会对性能产生影响。结果是导入了@material-ui/core每个组件,而不仅仅是您想要的组件。

在什么情况下使用对象解构导入会导致应用程序性能下降,影响会严重到什么程度?另外,在没有的所有环境中,例如默认的create-react-app配置,是否会完全使用任何来区别?

2 个答案:

答案 0 :(得分:1)

通常不建议依赖包的内部结构,但是在Material UI中是officially valid

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

为了不依赖此条件并缩短进口时间,可以使用顶级出口商品

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

两者都是可以互换的,只要安装程序支持摇树即可。如果未使用的顶层导出可能会摇摇欲坠,则首选第一个选项。否则,第二个选项是更可取的,它可以确保未使用的软件包导入不会包含在捆绑软件中。

create-react-app使用支持树状摇动的Webpack配置,并且可以从第二个选项中受益。

答案 1 :(得分:0)

加载额外的代码(例如可能不需要的material-ui中的许多组件)会带来两个主要的性能影响:下载时间和执行时间。

下载时间很简单:您的JS文件较大,因此下载时间较长,尤其是在移动速度较慢的连接上,尤其如此。使用摇树之类的机制适当地减少JS的大小总是一个好主意。

执行时间不太明显,但是也有类似的效果,这次是针对可用计算能力较低的浏览器-同样,主要是移动设备。即使从未使用过这些组件,浏览器仍必须解析并执行源并将其拉入内存。在具有强大处理器和充足内存的台式机上,您可能永远不会注意到它们之间的差异,但是在速度较慢/较旧的计算机或移动设备上,即使文件在处理完成后下载完毕,您也可能会注意到一小段延迟。

假设您的构建工具具有正常的摇摇树,我的看法通常是大致相同的。该构建工具不会将未使用的组件包括到已编译的JS中,因此它不会影响下载或执行时间。