公司项目使用到 ant-design-vue，在打包时发现 icons 占了 530k，请问该如何优化？
banliyaya · 2019-11-19 10:38:04 +08:00 · 7180 次点击这是一个创建于 1830 天前的主题，其中的信息可能已经有所发展或是发生改变。
所有组件均采用按需引入，但是 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 下没有找到这个依赖，但是自己查看这个源码却看到了有使用这个依赖，请问各位是哪里出现里问题呢？
 |
1
lework1234 2019-11-19 15:43:31 +08:00
按需引入
|
 |
2
Sendya 2019-11-19 15:59:17 +08:00  1
|
|
3
Sendya 2019-11-19 16:06:26 +08:00
你可以在调整之后，用依赖分析是否有效果
生效: https://i.loli.net/2019/11/19/1soAmtDbChyEXLS.png 未生效: https://i.loli.net/2019/11/19/ZosBR3FVGnjJdSi.png |
 |
4
Elfred2096 2019-11-20 08:27:21 +08:00
楼上不是作者吗
|
 |
6
banliyaya OP @Sendya 您好，再请教一下，目前一般的 icon 都已经没有问题了。但是目前有 2 个组件都图片没有展示出来，分别是 message 和 popconfirm 都，其他都比如 select、datapicker 都在源码里面看到了引用的图标，也分别引入进来了，但是这 2 个怎么引入都不会显示，ExclamationCircleOutline、CheckCircleOutline
|
 |
7
hahahaa8797 2019-12-18 10:05:35 +08:00
请问您是如何配置的，是 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"。希望能提供一下您这边成功的配置和对应的版本号，万分感谢 |
|
8
banliyaya OP @hahahaa8797 按照官方的文档上面配置是没有问题的。icons 似乎不是独立出来的也没有版本号啊
|
|
9
hahahaa8797 2019-12-18 12:32:15 +08:00
已经解决了，是有独立版本的。在 ant-design-vue 的 package.json 里面可以看到。里面写的是 2.2.1 的版本，我就换到"@ant-design/icons": "^2.1.1"版本就可以了。版本之间差距太大了，文件结构都不一样了
|
 |
10
zhanglichun333 2020-02-01 03:17:56 +08:00
@Sendya 你好，遇到相同的问题，可以把链接重新发一下吗？很感谢
|
|
11
zhanglichun333 2020-02-03 01:40:43 +08:00
你好，遇到相同的问题，请问是怎么解决
|
Select Language