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

2次阅读

共计 1598 个字符，预计需要花费 4 分钟才能阅读完成。

antd 是阿里出品的一款基于 antd 的 UI 组件库，应用简略，功能丰富，被广泛应用在中台我的项目开发中，尽管也呈现了彩蛋事变，但不能否定 antd 自身的优良，而咱们公司在理论工作中也大量应用 antd 进行开发，应用的版本次要集中在 3.x 这个大版本中，在理论应用过程中发现了一个比拟显著的问题，那就是 antd 的图标输入打包体积过大，即使是应用了一个图标，也会将所有图标打包输入，没有按需加载(4.x 版本曾经实现了按需加载，但目前公司还没做整体的降级)，在这种状况下，就亟需一款能按需加载的插件来减小图标输入的体积。

定位了问题，接下来就是想方法解决了，后期在网上搜寻到一种解决办法，那就是在 webpack 中的配置图标文件门路，具体如下：

resolve: {
  alias: {'@ant-design/icons/lib/dist$': './youIcon.js',}
}

youIcon.js 中导出应用到的图标，通过这种形式能极大减小动态资源输入的体积，然而这一过程是手动配置，保护和应用不是很不便，然而借助这种解决形式，加上动静生成本地 youIcon.js 文件就能够了，确定了解决思路，接下来就入手设计插件。

如上图所示，咱们须要的插件须要满足两个性能，第一，动静提取我的项目源代码和应用到的 antd 组件中的图标，第二，批改 webpack 的 alias 配置，接下来将别离讲述设计过程：

提取图标，须要对指标文件进行代码剖析，提取图标代码的相干特色，而后整顿输入到本地的指标文件下，过程如下图：

1.) 特色匹配
利用 babel 将源代码编译输入，而后失去 icon 的生成代码，联合 astexplorer 剖析节点属性，确定出匹配计划，这里还须要留神一点的是，有些组件在生成图标的过程中比拟非凡，比方 Button 能够通过 loading 和 icon 属性设置，在匹配的时候须要非凡解决；
2.) 属性提取
在提取图标的过程中，失去了图标的属性后，须要和本地 node_modules 外面的 @ant-design/icon/lib/dist 的所有官网导出库匹配，找到指标图标，就能确定图标的有效性；
3.) 字符串拼接写入
将图标名称和寻址门路拼接起来，再、在写入 antd-icon-reduce.js 文件之前，判断是否曾经存在雷同的图标名称，如果存在则放弃写入，通过上述步骤就能够将我的项目中用到的所有图标全副收集到 antd-icon-reduce.js 文件中了。

动静批改配置依赖于 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/…

正文完