在React中,某些软件包允许您使用单独的分配:import Card from "@material-ui/core/Card"
或通过对象分解:import { Card } from "@material-ui/core"
来导入组件。
我在Blog中读到,如果您的环境没有适当的摇树功能,则使用对象分解语法可能会对性能产生影响。结果是导入了@material-ui/core
的每个组件,而不仅仅是您想要的组件。
在什么情况下使用对象解构导入会导致应用程序性能下降,影响会严重到什么程度?另外,在没有的所有环境中,例如默认的create-react-app配置,是否会完全使用任何来区别?
答案 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中,因此它不会影响下载或执行时间。