node.js - react : Importing modules with object destructuring, 还是单独 react ？

Question

在 React 中，某些包允许您使用单独的赋值导入组件:从“@material-ui/core/Card”导入 Card，或通过对象解构:import { Card } 来自“@material-ui/core”。

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

在什么情况下使用对象解构导入会导致应用程序性能下降以及影响有多严重？另外，在一个拥有所有功能的环境中，比如默认的 create-react-app 配置，使用其中一个会产生什么区别吗？

Answer 1

通常不鼓励依赖包内部结构，但它是officially valid在 Material UI 中:

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

为了不依赖于此并保持导入更短，可以使用顶级导出

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

两者可以互换，只要设置支持树摇动。如果可以对未使用的顶级导出进行树摇动，则最好选择第二个选项。否则，第一个选项更可取，它保证未使用的包导入不会包含在 bundle 中。

create-react-app 使用支持 tree-shaking 的 Webpack 配置，可以从第二个选项中受益。