Material UI - 使用 Icon 组件和 Material Icons 节点模块的区别答案

【问题标题】：Material UI - Difference between using Icon component and Material Icons node moduleMaterial UI - 使用 Icon 组件和 Material Icons 节点模块的区别
【发布时间】：2021-05-28 13:58:58
【问题描述】：

我想将 Material Icons 添加到我的应用中。但是，Material UI 提供了两种方法来将相同的图标添加到我的网站：

<Icon /> component，包含在@material-ui/core 包中：

<!-- Add this in <head> section of index.html -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />

import Icon from '@material-ui/core/Icon';  // Import <Icon />

function Star() {
  return <Icon>star</Icon>;
}

安装@material-ui/icons package，然后导入对应的图标：

$ npm install @material-ui/icons

import StarIcon from '@material-ui/icons/Star';  // Import from node module

function Star() {
  return <StarIcon />;
}

因此，我想问一下，如果我想添加上述两种方法，在性能（即加载时间）或bundle size方面是否有任何差异材料图标（不是其他字体图标）到我的网页？非常感谢！

【问题讨论】：

CDN 通常比本地更快，所以第一个在性能上应该更好

标签： javascript reactjs material-ui

【解决方案1】：

有一些区别：

CDN 对于您的应用程序的用户来说更快、更可取，因为相同的文件将以缓存形式从附近的服务器而不是您的服务器接收。现在差别不大。
我相信人们仍然安装包的主要原因是因为在 IDE 中使用包更容易。

如果你不打算经常使用 Material-UI，我想说不要费心通过 npm 安装整个包，只需使用 CDN 链接。

【讨论】：