antd icons按需加载

前文我们提到过，对于antd这种可以按需加载组件的库，我们不使用script的方式全量引入。确实，antd支持按需加载组件。实现按需加载组件的方式有两种，一种是单个组件分别引入对应的组件与样式，这种方式代码冗余，因此更多人喜欢第二种使用babel-plugin-import的方式实现按需加载。第二种具体的实现方式网上案例较多，我们的脚手架也加入了对antd按需加载的处理，但这不是本文的主旨，本文的主旨是介绍antd中Icon组件的按需加载。 事情的起因是这样的，我们引用了一个Icon下的一个图标，然后看了下打包后的体积，发现增大了好多。于是查看了打包后的内容，我们发现，antd将所有的Icon的导入了。。。都导入了。。 我们看一下antd中Icon组件的源码，其中最引入注目的肯定是这段代码：

当调用antd的Icon组件时，会将所有的Icon导入。其实全部导入也没什么，关键是我们可以看一下dist的体积，500kb+。我使用了一个Icon需要增大500kb的体积，这显然并不合适。因此，我们寻找了一种解决方案。 首先，在工具类目下创建一个文件，名为icons.ts，内容如下：

icons.ts中我们默认导出了两个我们需要使用的图标，而且我们项目中业仅仅使用了这两个图标。假如你想使用更多的图标，那么你也可以在该文件中写入。 其次，webpack设置别名alias。因为我们脚手架中的webpack配置均从toml文件中读取。所以，我们需要在toml中配置webpack的alias，代码如下：

第三，在项目中正常使用Icon。

这样一来，当我们引入Icon时，就把本来要引用的dist指向了我们自己写的icons.ts。无需全部加载！避免使用一个Icon带来500kb网络开销的负担。