antd图标库按需加载的插件实现 (2)

2.添加antd-icon-reduce-plugin插件

...... var AntdIconReducePlugin = require('antd-icon-reduce-plugin'); ...... plugins: [ ...... new AntdIconReducePlugin({ icons: ['download', { type: 'up', theme: 'outline' }], // 自定义需要加入的图标，在插件不能解析源代码的情况下使用 development： true, // 开发模式下运行插件，默认true }), ...... ] 插件效果展示

从上图中可以看到使用了插件之后，main.js体积减小了差不多500kb左右，效果还是比较明显(这只是演示插件效果，没有做其他输出优化)。

注意事项

插件只能处理使用字符串字面量来定义Icon类型，使用变量或者其他赋值方式将会被忽略，只有如下两种方式可以被识别:

1.字符串字面量直接定义

<Icon type="down" />

2.三元符

const isUp = true; ...... <Icon type={isUp ? 'up' : 'down'}

在其他未识别的情况下，需要通过插件的icons属性手动传入图标。

最后

该插件是基于react+antd+webpack的基础上使用，其中antd适用于3.x大版本，webpack为4.x版本，如果在使用过程中有任何问题，欢迎联系我，
github地址：https://github.com/fuluteam/antd-icon-reduce-plugin