【前端笔记】小记一次Antd Vue 1.x (for vue2.x) icons组件按需引入的实现

因为项目有样式规范要求，和规范最相似的就是antd了，再加上项目用的是2.x，所以使用antd 1.x版本进行开发。项目完成后，理所应当对打包进行优化，于是遇到了icons组件全量引入的问题，查找了资料实现后特地记录一下（别问为什么不用vue3，因为项目太赶，就挑了最顺手的vue2.x）

antd vue按需引入已经不用再多说了，按照官网一步步的实现基本不会出现问题。问题主要是出现在icons组件上。

首先，通过webpack-bundle-analyzer插件对打包产物进行分析，可以看到@antd-vue/icons的占比非常的大，经过gzip压缩后都有差不多150kb的大小。再看看ant-design-vue中的引入

可以看到源码里是全量引入的。

优化

1、安装对应版本的@ant-design/icons

从全量改完按需引入首先得把它的依赖装上，至于装的什么版本，可以从node_modules中ant-design-vue的package.json查看当前依赖的版本。我这里用的是1.7.8的版本，对应的icons版本是2.1.1

2、新建统一的图标js

这一步是将需要按需引入的图标进行统一管理并导出使用。例如：

export { default as LeftOutline } from '@ant-design/icons/lib/outline/LeftOutline';
1

3、vue.config.js配置

找到configureWebpack配置，并添加resolve.alias配置，如下：

// 对象
configureWebpack: {
	resolve: {
		alias: '@ant-design/icons/lib/dist$': '${path}',
	}
}
// 函数
configureWebpack: config => {
	config.resolve.alias: {
		alias: '@ant-design/icons/lib/dist$': '${path}',
	}
}
1
2
3
4
5
6
7
8
9
10
11
12

${path}：第二步时自定义的图标js文件路径（例如：path.join(__dirname, ‘xxx/xxx/xxx.js’)）
这一步是网上所有方法中通用的，作用是将图标引用路径指向为自己定义的地方，这样webpack之后打包就只会打包我们在自定义js中定义导出的图标。

总结

• 1、下载的@ant-design/icons版本要和当前使用的@ant-design-vue对得上。如果不知道对应版本可以按照我上面提到的方法查看
• 2、自定义导出图标的文件路径一定要对上（可能和本篇的不同，因为版本区别）。如果发现报错Can't resolve '@ant-design/icons/lib/outline/xxx' in xxxx，先看node_modules中这路径存不存在，再看下载的版本对不对，一般检查这2个足以排查出问题
• 3、因为图标转成按需引入了，一定一定记得用到的图标或者疑似用到的图标都要引入，比如Loading。不知道引入图标的名称可以去node_modules中查看对应的js