211 - 《你不知道的 9 个 @ant-design/icons 使用问题》

注：@ant-design/icons 作为组件库已经做地很好了。这里只是以 @ant-design/icons 为例，针对前端组件库的引用方式乱象做下说明和对比不同的引用方式，同时给正在写在 《最佳实践 2022-6：Icons 使用》做下铺垫。

1、@ant-design/icons 中引入一个 Icon 有几种方式？

6 种。

import { BellFilled } from '@ant-design/icons';
import { BellFilled } from '@ant-design/icons/lib';
import { BellFilled } from '@ant-design/icons/es';
import BellFilled from '@ant-design/icons/BellFilled';
import BellFilled from '@ant-design/icons/lib/icons/BellFilled';
import BellFilled from '@ant-design/icons/es/icons/BellFilled';

2、以上用法，哪些没有类型提示？

除了 1 和 4，都没有。可以想想为啥 2 和 3 虽然有 d.ts 也不算有？

3、以上用法，在产物尺寸上有差异吗？

有。在使用 webpack 5 的前提下，2 4 5 31K，1 3 6 26K，同时 2 > 1，2 类的产物尺寸会比其他的大，因为用了 cjs 格式的产物，不会 tree-shaking。你可能奇怪 5 为啥比 1 大，只用了一个 Icon，并不需要 tree-shaking 啊？因为 Icon 背后有 @ant-design/icons、rc-utils、@babel/runtime 等依赖，入口用了 cjs，后面的链路就全部不会 tree-shaking。

4、以上用法，在构建速度上有差异吗？

有。(1 == 3 ~= 2) > (4 == 5 ~= 6)。前 3 个 3.266 s，后 3 个 2.2