Svg icons make bunlde size too large

[zlab]

• I have searched the issues of this repository and believe that this is not a duplicate.

Version

3.9.0

Environment

webpack4

Reproduction link

https://zlab.github.io/report.html

Steps to reproduce

webpack build

What is expected?

icon 按需打包, js文件拆分

What is actually happening?

打包到chunk-vendors里去了

---

IssueHunt Summary

vagusx has been rewarded.

Backers (Total: $203.00)

• issuehunt ($200.00)
• rororofff ($2.00)
• ssprettychill ($1.00)

Submitted pull Requests

• #18217 use ant design icons 4.0

---

Tips

• Checkout the Issuehunt explorer to discover more funded issues.
• Need some help from other developers? Add your repositories on IssueHunt to raise funds.

---

IssueHunt has been backed by the following sponsors. Become a sponsor

[ant-design-bot]

Translation of this issue:

---

antd svg package size is too large, it is recommended @ant-design/icons package on demand

• I have searched the issues of this repository and believe that this is not a duplicate.

Version

3.9.0

Environment

Webpack4

Reproduction link

https://zlab.github.io/report.html

Steps to reproduce

Webpack build

What is expected?

Icon Pack as needed, js file split

What is actually happening?

Packed into chunk-vendors

[zlab]

我只用到了几个icon

[HeskeyBaozi]

<Icon /> 默认全量引入了图标库。因为不知道你会引入何种图标进行运行时引入。之前图标托管在 iconfont.cn 所以打包无感知。

这需要深入讨论
临时方案见 #12011 (comment)

[afc163]

cc @yesmeck

[yesmeck]

需要提供一个可以按需加载的方式，antd 组件内部也用这个方式。

import Star from 'antd/icons/star';

<Star />

[HeskeyBaozi]

但是这样做的话，以前的写法无法兼容

<Icon type="star" /> // should import star icon first

[zlab]

不能按需打包, 异步加载也好啊,

之前使用iconfont就是页面内容会先出来, 图标会慢慢加载出来

[zlab]

<Icon.Star />

[yesmeck]

但是这样做的话，以前的写法无法兼容

不会的，只要不用 <Icon /> 就不全量打包进来。

[zlab]

有些场景不能按需打包, 比如设置menu的图标, 如果可以后台配置, 这样前端是无法预知会设置成什么图标的,
异步加载比较适合, 把@ant-design/icons打成一个chunk就好