antd是阿里出品的一款基于antd的UI组件库，应用简略，功能丰富，被广泛应用在中台我的项目开发中，尽管也呈现了彩蛋事变，但不能否定antd自身的优良，而咱们公司在理论工作中也大量应用antd进行开发，应用的版本次要集中在3.x这个大版本中，在理论应用过程中发现了一个比拟显著的问题，那就是antd的图标输入打包体积过大，即使是应用了一个图标，也会将所有图标打包输入，没有按需加载(4.x版本曾经实现了按需加载，但目前公司还没做整体的降级)，在这种状况下，就亟需一款能按需加载的插件来减小图标输入的体积。
解决思路
定位了问题，接下来就是想方法解决了，后期在网上搜寻到一种解决办法，那就是在webpack中的配置图标文件门路，具体如下：
resolve: {
alias: {
'@ant-design/icons/lib/dist$': './youIcon.js',
}
}youIcon.js中导出应用到的图标，通过这种形式能极大减小动态资源输入的体积，然而这一过程是手动配置，保护和应用不是很不便，然而借助这种解决形式，加上动静生成本地youIcon.js文件就能够了，确定了解决思路，接下来就入手设计插件。
插件设计
1.运行流程
2.功能设计
如上图所示，咱们须要的插件须要满足两个性能，第一，动静提取我的项目源代码和应用到的antd组件中的图标，第二，批改webpack的alias配置，接下来将别离讲述设计过程：
1.动静提取图标
提取图标，须要对指标文件进行代码剖析，提取图标代码的相干特色，而后整顿输入到本地的指标文件下，过程如下图：
1.) 特色匹配
利用babel将源代码编译输入，而后失去icon的生成代码，联合astexplorer剖析节点属性，确定出匹配计划，这里还须要留神一点的是，有些组件在生成图标的过程中比拟非凡，比方Button能够通过loading和icon属性设置，在匹配的时候须要非凡解决；
2.) 属性提取
在提取图标的过程中，失去了图标的属性后，须要和本地node_modules外面的@ant-design/icon/lib/dist的所有官网导出库匹配，找到指标图标，就能确定图标的有效性；
3.) 字符串拼接写入
将图标名称和寻址门路拼接起来，再、在写入antd-icon-reduce.js文件之前，判断是否曾经存在雷同的图标名称，如果存在则放弃写入，通过上述步骤就能够将我的项目中用到的所有图标全副收集到antd-icon-reduce.js文件中了。
2.动静批改配置
动静批改配置依赖于antd-icon-reduce-plugin插件来实现，其中的工作原理如下图：
1.) 初始化
在插件初始化的时候，插件次要干了两件事，第一，生成antd-icon-reduce.js文件，而后将这个文件门路传递给antd-icon-reduce-loader，第二，增加专门匹配node_modules/antd目录下的所有js文件，确保我的项目中应用到的组件都能被loader解决，通过初始化之后，我的项目就有了寄存导出的图标文件，更重要的是适配了所有可能生成图标的源文件；
2.) 配置文件
当loader运行实现之后，咱们就失去了一份残缺的图标导出文件(antd-icon-reduce.js)，这个时候就须要批改webpack的alias了，这里须要在每次loader运行实现后都从新生成一份文件(内容拷贝至antd-icon-reduce.js文件)，文件名须要动静更新，确保每次webpack内存加载的配置文件都是最新的；
3.) 文件删除
在编译输入实现后，须要革除antd-icon-reduce.js和另一份配置文件，这里都是在webpack相应的hooks外面实现。
具体应用办法和实现可参考我在博客园写的文章,这里就不过多论述了:
https://www.cnblogs.com/fulu/…
发表回复