Skip to content

Conversation

aojunhao123
Copy link
Contributor

@aojunhao123 aojunhao123 commented Dec 28, 2024

🤔 This is a ...

  • 📦 Bundle size optimization

🔗 Related Issues

💡 Background and Solution

📝 Change Log

Language Changelog
🇺🇸 English 📦 Optimize: Replace @ctrl/tinycolor with @ant-design/fast-color to reduce bundle size.
🇨🇳 Chinese 📦 Optimize: 使用 @ant-design/fast-color 替换 @ctrl/tinycolor 以减小打包体积。

Copy link

Review PR in StackBlitz Codeflow Run & review this pull request in StackBlitz Codeflow.

Copy link
Contributor

github-actions bot commented Dec 28, 2024

Preview is ready

Copy link
Contributor

github-actions bot commented Dec 28, 2024

👁 Visual Regression Report for PR #52157 Failed ❌

🎯 Target branch: next (89c1a05)
📖 View Full Report ↗︎

Expected (Branch next) Actual (Current PR) Diff
auto-complete-uncertain-category.compact.png auto-complete-uncertain-category.compact.png auto-complete-uncertain-category.compact.png auto-complete-uncertain-category.compact.png
auto-complete-uncertain-category.compact.png auto-complete-uncertain-category.compact.png auto-complete-uncertain-category.compact.css-var.png auto-complete-uncertain-category.compact.css-var.png
avatar-dynamic.compact.png avatar-dynamic.compact.png avatar-dynamic.compact.png avatar-dynamic.compact.png
avatar-dynamic.compact.png avatar-dynamic.compact.png avatar-dynamic.compact.css-var.png avatar-dynamic.compact.css-var.png
badge-change.compact.png badge-change.compact.png badge-change.compact.png badge-change.compact.png
badge-change.compact.png badge-change.compact.png badge-change.compact.css-var.png badge-change.compact.css-var.png
button-color-variant.compact.png button-color-variant.compact.png button-color-variant.compact.png button-color-variant.compact.png
button-color-variant.compact.png button-color-variant.compact.png button-color-variant.compact.css-var.png button-color-variant.compact.css-var.png

Warning

There are more diffs not shown in the table. Please check the Full Report for details.


Important

There are 314 diffs found in this PR: 🔄 278 changed, 🆕 36 added.
Please check all items:

  • Checked all diffs in the full report
  • Visual diff is acceptable

Copy link

Walkthrough: This pull request replaces the @ctrl/tinycolor library with @ant-design/fast-color across the codebase to optimize bundle size. This change affects various components and styles that previously relied on TinyColor for color manipulation.

Changes:

Files Summary
Multiple files Replaced TinyColor with FastColor for color manipulation.
package.json Updated dependencies to remove @ctrl/tinycolor and add @ant-design/fast-color.

Copy link

socket-security bot commented Dec 28, 2024

New and removed dependencies detected. Learn more about Socket for GitHub ↗︎

Package New capabilities Transitives Size Publisher
npm/@ant-design/fast-color@2.0.6 None 0 43.9 kB zombiej
npm/@types/nprogress@0.2.3 None 0 4.83 kB types
npm/rc-cascader@3.31.0 environment 0 180 kB zombiej
npm/rc-checkbox@3.5.0 None 0 20.5 kB zombiej
npm/rc-mentions@2.18.0 environment 0 78.5 kB zombiej
npm/rc-picker@4.9.0 environment 0 906 kB zombiej
npm/rc-segmented@2.7.0 environment 0 50.3 kB afc163
npm/rc-tabs@15.5.0 environment 0 175 kB zombiej
npm/rc-tooltip@6.3.2 None 0 55.2 kB zombiej
npm/rc-tree-select@5.25.2 environment 0 179 kB afc163, madccc, valleykid, ...4 more
npm/rc-tree@5.11.0 environment 0 375 kB zombiej
npm/regenerator-runtime@0.14.1 None 0 27.9 kB benjamn

🚮 Removed packages: npm/eslint-plugin-compat@6.0.2, npm/eslint-plugin-jest@28.10.0, npm/eslint-plugin-jsx-a11y@6.10.2, npm/eslint-plugin-react-hooks@5.2.0-canary-fc8a898d-20241226, npm/eslint-plugin-react-refresh@0.4.16, npm/eslint@9.17.0, npm/fast-glob@3.3.2, npm/fetch-jsonp@1.3.0, npm/fs-extra@11.2.0, npm/gh-pages@6.2.0, npm/glob@11.0.0, npm/html2sketch@1.0.2, npm/http-server@14.1.1, npm/husky@9.1.7, npm/identity-obj-proxy@3.0.0, npm/immer@10.1.1, npm/is-ci@4.1.0, npm/isomorphic-fetch@3.0.0, npm/rc-cascader@3.30.0, npm/rc-checkbox@3.3.0, npm/rc-mentions@2.17.0, npm/rc-picker@4.8.3, npm/rc-segmented@2.5.0, npm/rc-tabs@15.4.0, npm/rc-tooltip@6.2.1, npm/rc-tree-select@5.24.5, npm/rc-tree@5.10.1

View full report↗︎

Copy link

pkg-pr-new bot commented Dec 28, 2024

Copy link

codecov bot commented Dec 28, 2024

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 100.00%. Comparing base (677622b) to head (0e5713a).
Report is 3 commits behind head on feature.

Additional details and impacted files
@@            Coverage Diff            @@
##           feature    #52157   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files          763       763           
  Lines        13735     13735           
  Branches      3588      3588           
=========================================
  Hits         13735     13735           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

@aojunhao123 aojunhao123 changed the base branch from next to feature December 28, 2024 12:02
@afc163
Copy link
Member

afc163 commented Dec 30, 2024

size-limit report 📦

Path Size
dist/antd.min.js 443.04 KB (+666 B 🔺)
dist/antd-with-locales.min.js 511.12 KB (+675 B 🔺)

怎么还大了。

@afc163 afc163 merged commit 39d9c1c into ant-design:feature Dec 30, 2024
43 checks passed
@aojunhao123
Copy link
Contributor Author

啊这,负优化??

@yoyo837
Copy link
Contributor

yoyo837 commented Dec 30, 2024

没关系,才600B,把另一个完成后会大幅降低。

Comment on lines 32 to 35
const dotColor = React.useMemo(() => {
const _color = new TinyColor(value).toHex8String();
const _color = new FastColor(value).toHexString();
return _color.endsWith('ff') ? _color.slice(0, -2) : _color;
}, [value]);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这里转换为 8 位长度的 hex 并且后面有个 ff 结尾判断,改了会导致 #52451 问题

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants