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

43次阅读

共计 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 文件就能够了,确定了解决思路,接下来就入手设计插件。

插件设计

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/…

正文完
 0