Bundle size optimization for v5 #39900

afc163 · 2022-12-29T10:59:36Z

We did it in #38720 before, and continue it recently.

Here is the current bundle size: #39898 (comment)

Path	Size
`./dist/antd.min.js`	367.29 KB
`./dist/antd-with-locales.min.js`	422.41 KB

report.html.zip

Since we drop legacy browsers support, there are still something we can optimize.

The text was updated successfully, but these errors were encountered:

github-actions · 2022-12-29T11:00:21Z

You may look for issues:

70% Bundle size optimization #22698

_{🤖 By issues-similarity-analysis}

yoyo837 · 2022-12-30T10:59:18Z

shallowequal 的移除, rc-* 还有一些没有发版, 所以 bundle size 还没体现.

kiner-tang · 2023-01-02T01:15:39Z

Use ES classes, remove these babel plugins: https://github.com/ant-design/antd-tools/blob/3b3447eb106a80ebc64e634ca60ce1cd55e8a351/lib/getBabelCommonConfig.js#L20-L22
这个意味着我们在新版本的antdesign里面，已经不需要再去兼容不支持class的情况了吗

kiner-tang · 2023-01-02T01:34:20Z

@ant-design/icons unnecessary internal component, we could reduce it.
这些非必要的内部组件，指的是Icon的别名组件么？

类似这些？那如果把这些别名组件去掉，使用的时候就只能通过``的方式使用了吗？

li-jia-nan · 2023-01-03T16:52:41Z

重构完 Transfer 组件的三个文件，一共少了大约 800 b

li-jia-nan · 2023-01-03T17:04:40Z

重构工作就剩下 Affix 组件了，这个组件只有一个文件，但是逻辑比较复杂

afc163 · 2023-01-04T08:33:40Z

这个意味着我们在新版本的antdesign里面，已经不需要再去兼容不支持class的情况了吗

按官方支持范围，是的：https://caniuse.com/es6-class

afc163 · 2023-01-04T08:38:43Z

这些非必要的内部组件，指的是Icon的别名组件么？

antd 里同一个 icon，套了几层娃，好几个文件。相比 mui，一个图标只有一个文件：https://www.npmjs.com/package/@material-ui/icons?activeTab=explore

Wxh16144 · 2023-03-05T16:23:55Z

计划把 rc-pagination 也重构成 Function Component. 已经开始做了。

li-jia-nan · 2023-03-26T12:16:58Z

除了 Affix 和 rc-pagination 之外还有 class component 吗？我来全部重构掉

afc163 · 2023-05-27T17:02:18Z

这段代码在 antd 和 rc-* 里多次出现，统一提取到 rc-util 里去，应该能省一些字节：https://github.com/search?q=org%3Areact-component%20dataOrAriaAttributeProps&type=code

哦，原来已经提取过了，那改造一下上面的代码即可：https://github.com/react-component/upload/blob/0d0ca2f65acca13f64199ffbb05054fb13c210ea/src/AjaxUploader.tsx#L303

antd 里也有：

monolithed · 2023-06-18T15:05:02Z

Practice shows that in a real project, no more than 30-50% of the components are actually used, and even those are heavily customized.
I suggest keeping only a minimal set of components in the standard build and including all exotic packages separately.

Mentions,
ColorPicker,
Cascader,
Rate,
Transfer,
TreeSelect,
Descriptions,
List,
QRCode,
Segmented,
Statistic,
Popconfirm,
Result,
App,
Watermark,
Menu,
Layout
Slider,
Carousel,
Collapse,
Empty,
Timeline,
Tour,
Tabs
Tree,
FloatButton,
For various reasons, I rarely have to include even one of these packages (26 never used). Collapse, Tabs and List are difficult to customize, while the rest are very specific in their use cases.

imballinst · 2023-07-06T02:24:39Z

Probably this would be better for v6 instead, but IMO, if we want the most optimized bundle size, we should mostly "offload" to consumers. For example, this button loading icon:

ant-design/components/button/button.tsx

Line 251 in 3bbe9e7

    
           <LoadingIcon existIcon={!!icon} prefixCls={prefixCls} loading={!!innerLoading} />

What I think is, if consumers want to add loading spinners to the button (to indicate loading/submitting/something), then they would add it themselves. If they are using Button in the code but never use the loading prop, then it's a bit wasteful on their end.

Maybe we can have something like PlainButton or something, that only contains the CSS styling of the button? Then this PlainButton will be used by the main Button, so consumers that want to include all setup and logic can use Button, whereas those who want to have "minimal" setup can use PlainButton.

<PlainButton>
  {isLoading ? <AntdLoadingIcon /> : null}
  Submit
</PlainButton>

<Button loading={isLoading}>Submit</Button>

monolithed · 2023-07-06T06:33:21Z

@imballinst

This is a micro-optimization, although it's a valid point that relates to how the styling of Ant's projects is tightly coupled with the Ant Design design system. For example, if they need an icon to be on the left, such a property will be available in the design system, but if they don't, it won't be there. For example, do you know how to add an icon to Button on the right or align an arrow in the center of Accordion, find an H6 heading, or explain the purpose of exotic components that you would never be able to use in your own projects?

Currently, Ant Design is one of the heaviest libraries, and it still has significant issues with optimization, mobile device adaptation, and accessibility. Therefore, first and foremost, they need to understand how they want to position their system in order to avoid closing tickets they disagree with, not releasing backward-incompatible releases in minor versions, not passing beta versions off as major releases (currently, tokens don't work well) and start testing.

I tend to believe that a few years ago Ant Design were monopolists in the design system market, with no one else having as many visually pleasing components. However, now there are numerous libraries and standards with high competition, and performance is one of the crucial tasks.

Here's how I see the steps that could help solve this problem:

Identify which components users need most frequently.
Create a configurator that allows users to assemble a set of components and styles based on what they actually need.
Make the components as flexible as possible (currently, tokens don't work well and are limited in customization).
Full support accessibility and responsibility.
Define metrics for rendering speed, build time, and loading time.
Remove dependencies on personal preferences, such as a black background in Layout.

afc163 · 2023-08-05T04:56:40Z

monolithed · 2023-08-29T13:07:47Z

monolithed · 2023-08-29T15:19:21Z

@ant-design/icons 67.62kb
    tinycolors 49.3kb
    lodash.camelcase 18.32kb

I don't even use it in my code. Perhaps the tinycolors package can be replaced with CSS variables?

rc-size-observer (resize-observer-polyfill) 41.93kb

Why not include this polyfill separately?

copy-to-clipboard 3.29kb

It looks like an optional feature

typography 45.6kb

A significant portion of the code is used for editing and other things that could also be moved into a separate option?

It seems easy to reduce around 170-240KB.

afc163 · 2023-10-09T11:10:39Z

Fork and use father to build.

afc163 · 2024-03-21T12:50:08Z

比起 https://unpkg.com/browse/lucide-react@0.360.0/dist/esm/icons/zap.js

Ant Design Icons 的冗余代码要多好多。

afc163 added 📦 Bundlesize help wanted The suggestion or request has been accepted, we need you to help us by sending a pull request. labels Dec 29, 2022

ant-design deleted a comment from github-actions bot Dec 29, 2022

github-actions bot added the Inactive label Feb 16, 2023

afc163 mentioned this issue May 24, 2023

fix: upgrade @ant-design/icons to 5.1.0 #42443

Merged

20 tasks

github-actions bot removed the Inactive label May 24, 2023

afc163 mentioned this issue Aug 30, 2023

perf: remove lodash/camelCase for smaller bundle size ant-design/ant-design-icons#595

Merged

rickythink mentioned this issue Aug 31, 2023

refactor: affix FC rewrite #44408

Closed

20 tasks

li-jia-nan mentioned this issue Sep 27, 2023

refactor: rewrite Affix CC => FC #42674

Merged

20 tasks

github-actions bot added the Inactive label Oct 1, 2023

github-actions bot removed the Inactive label Oct 9, 2023

github-actions bot added the Inactive label Nov 16, 2023

github-actions bot removed the Inactive label Nov 28, 2023

Wxh16144 mentioned this issue Dec 1, 2023

deps: bump rc-pagination@4.x #46204

Merged

20 tasks

github-actions bot added the Inactive label Jan 1, 2024

github-actions bot removed the Inactive label Mar 21, 2024

github-actions bot added the Inactive label May 1, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Bundle size optimization for v5 #39900

Bundle size optimization for v5 #39900

afc163 commented Dec 29, 2022 •

edited by yoyo837

github-actions bot commented Dec 29, 2022 •

edited

yoyo837 commented Dec 30, 2022

kiner-tang commented Jan 2, 2023 •

edited

kiner-tang commented Jan 2, 2023

li-jia-nan commented Jan 3, 2023 •

edited

li-jia-nan commented Jan 3, 2023

afc163 commented Jan 4, 2023

afc163 commented Jan 4, 2023 •

edited

Wxh16144 commented Mar 5, 2023

li-jia-nan commented Mar 26, 2023

afc163 commented May 27, 2023 •

edited

monolithed commented Jun 18, 2023 •

edited

imballinst commented Jul 6, 2023 •

edited

monolithed commented Jul 6, 2023 •

edited

afc163 commented Aug 5, 2023

monolithed commented Aug 29, 2023

monolithed commented Aug 29, 2023

afc163 commented Oct 9, 2023 •

edited

afc163 commented Mar 21, 2024

Bundle size optimization for v5 #39900

Bundle size optimization for v5 #39900

Comments

afc163 commented Dec 29, 2022 • edited by yoyo837

report.html.zip

github-actions bot commented Dec 29, 2022 • edited

You may look for issues:

yoyo837 commented Dec 30, 2022

kiner-tang commented Jan 2, 2023 • edited

kiner-tang commented Jan 2, 2023

li-jia-nan commented Jan 3, 2023 • edited

li-jia-nan commented Jan 3, 2023

afc163 commented Jan 4, 2023

afc163 commented Jan 4, 2023 • edited

Wxh16144 commented Mar 5, 2023

li-jia-nan commented Mar 26, 2023

afc163 commented May 27, 2023 • edited

monolithed commented Jun 18, 2023 • edited

imballinst commented Jul 6, 2023 • edited

monolithed commented Jul 6, 2023 • edited

afc163 commented Aug 5, 2023

monolithed commented Aug 29, 2023

monolithed commented Aug 29, 2023

afc163 commented Oct 9, 2023 • edited

afc163 commented Mar 21, 2024

afc163 commented Dec 29, 2022 •

edited by yoyo837

github-actions bot commented Dec 29, 2022 •

edited

kiner-tang commented Jan 2, 2023 •

edited

li-jia-nan commented Jan 3, 2023 •

edited

afc163 commented Jan 4, 2023 •

edited

afc163 commented May 27, 2023 •

edited

monolithed commented Jun 18, 2023 •

edited

imballinst commented Jul 6, 2023 •

edited

monolithed commented Jul 6, 2023 •

edited

afc163 commented Oct 9, 2023 •

edited