公司项目使用到 ant-design-vue，在打包时发现 icons 占了 530k，请问该如何优化？

[banliyaya]

所有组件均采用按需引入，但是 icons 还是被打入了主包。 在 github 上查到官方有建议使用这个方法 alias: {'@ant-design/icons/lib/dist$': path.resolve(__dirname, './src/icons.js')} 也在对应的目录下创建了 icon.js 文件，也引入了自己所使用的 icon。 但是不管是运行时，或者打包时均提示： @ant-design/icons/lib/dist in ./node_modules/ant-design-vue/lib/icon/index.js 在 ant-design-vue/lib/icon/index.js 下没有找到这个依赖，但是自己查看这个源码却看到了有使用这个依赖，请问各位是哪里出现里问题呢？

[lework1234]

按需引入

[Sendya]

参考我配置的基础用例

https://github.com/vueComponent/pro-layout/blob/master/example/src/core/antd/icons.js
https://github.com/vueComponent/pro-layout/blob/master/vue.config.js#L40-L42

[Sendya]

你可以在调整之后，用依赖分析是否有效果

生效:
https://i.loli.net/2019/11/19/1soAmtDbChyEXLS.png

未生效:
https://i.loli.net/2019/11/19/ZosBR3FVGnjJdSi.png

[Elfred2096]

楼上不是作者吗

[banliyaya]

@Sendya 感谢，已经弄好了

[banliyaya]

@Sendya 您好，再请教一下，目前一般的 icon 都已经没有问题了。但是目前有 2 个组件都图片没有展示出来，分别是 message 和 popconfirm 都，其他都比如 select、datapicker 都在源码里面看到了引用的图标，也分别引入进来了，但是这 2 个怎么引入都不会显示，ExclamationCircleOutline、CheckCircleOutline

[hahahaa8797]

请问您是如何配置的，是 antd 的哪个版本呢？我这边配置以一直在报错
webpack 已经配置好了，在 icon.js 里面应该怎么写呢？ export { SearchOutlined } from "@ant-design/icons-vue";我这样写在框架中的 Icon.js 会报错 Cannot read property 'name' of undefined 我的版本如下："@ant-design/icons": "^4.0.0-alpha.11","ant-design-vue": "^1.4.10"。希望能提供一下您这边成功的配置和对应的版本号，万分感谢

[banliyaya]

@hahahaa8797 按照官方的文档上面配置是没有问题的。icons 似乎不是独立出来的也没有版本号啊

[hahahaa8797]

已经解决了，是有独立版本的。在 ant-design-vue 的 package.json 里面可以看到。里面写的是 2.2.1 的版本，我就换到"@ant-design/icons": "^2.1.1"版本就可以了。版本之间差距太大了，文件结构都不一样了

[zhanglichun333]

@Sendya 你好，遇到相同的问题，可以把链接重新发一下吗？很感谢

[zhanglichun333]

你好，遇到相同的问题，请问是怎么解决