React项目中@mui/icons-material两种导入方式的性能差异问询

场景说明 #

我们团队在React项目里用@mui/icons-material，现在多个组件都重复导入相同的图标：

Component A #

import { Group as IconGroup, Person as IconPerson } from '@mui/icons-material';

return <div>...<IconPerson />...<IconGroup /></div>;

Component B #

import { Group as IconGroup, Person as IconPerson } from '@mui/icons-material';

return <div>...<IconPerson />...<IconGroup /></div>;

我打算改成统一的图标映射文件来管理：

icons.ts #

import { Group as IconGroup } from '@mui/icons-material';
import { Person as IconPerson } from '@mui/icons-material';

export const icons = {
  collection: <IconGroup />,
  user: <IconPerson />,
}

修改后的Component A #

import { icons } from 'icons';

return <div>...{icons.user}... {icons.collection}</div>;

修改后的Component B #

import { icons } from 'icons';

return <div>...{icons.user}... {icons.collection}</div>;

这种统一方式的好处很明显——以后换图标或者换图标库，只改这一个文件就行。但我担心导入这个大对象会影响性能，想知道两种方式在性能上到底差多少，哪种更优。

性能对比细节 #

1. 打包阶段（ESM的处理逻辑） #

• 分散导入：不管多少组件导入同一个图标，打包工具（比如Webpack、Vite）都会自动做模块复用，最终这个图标代码只会被打包一次，不会重复输出。而且tree-shaking机制会自动剔除每个组件里没用到的代码，不会有冗余。
• 统一映射：如果icons.ts里导入了所有项目用到的图标，打包时会把这些图标放到同一个代码块里（除非你配置了代码分割）。但这里有个关键：如果你的icons对象里是提前实例化好的元素（比如<IconGroup />），打包工具没法判断哪些图标没被使用，tree-shaking就失效了，会把所有图标都打包进去；但如果只是导出组件本身（比如collection: IconGroup），tree-shaking依然正常工作，只会打包实际用到的图标。

2. 运行时性能 #

• 分散导入：组件渲染的时候才会创建对应的图标元素，内存是按需占用的，不会浪费。
• 统一映射：要是提前实例化元素，模块一加载就会把所有图标元素都创建出来——哪怕有些组件根本没用到，这些元素也会占着内存；但如果只是导出组件，那和分散导入完全一样，只有渲染时才创建元素，内存占用没区别。

3. 有没有显著性能差异？ #

只要你把统一映射的写法改成导出组件而非实例化元素（如下），两种方式的性能几乎没有差别：

// 推荐的icons.ts写法
import { Group as IconGroup, Person as IconPerson } from '@mui/icons-material';

export const icons = {
  collection: IconGroup,
  user: IconPerson,
}

// 组件里这么用
import { icons } from 'icons';

return <div>...<icons.user />...<icons.collection /></div>;

这种写法既保留了统一维护的便利，打包时tree-shaking正常生效，运行时性能也和分散导入完全一致。

如果非要提前实例化元素，只有当项目里图标数量特别多的时候，才会在初始加载时占用更多内存，但如果图标数量不多，这种差异你根本感觉不出来。

实际建议 #

优先用导出组件的统一映射写法，既方便后续维护，又不会有性能损耗。要是你坚持要提前实例化元素，记得只导入项目真正用到的图标，别把没用的也加进去就行。

内容的提问来源于stack exchange，提问作者Michael Lynch