Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor: 📦 smaller bundlesize limit #20356

Merged
merged 25 commits into from Dec 23, 2019
Merged

refactor: 📦 smaller bundlesize limit #20356

merged 25 commits into from Dec 23, 2019

Conversation

afc163
Copy link
Member

@afc163 afc163 commented Dec 20, 2019

@zombieJ 看看能不能努力一下。

image


这个 PR 修改的地方有:

  • 移除 Transfer 里比较鸡肋的 lazyload 属性,从而去掉对 react-lazy-load 的依赖。4.x 发布之后再统一上 rc-visual-list 来解决大数据问题。⚠️
  • Upload 移除 IframeUpload,去掉对 IE8/9 的支持。⚠️
  • 移除 create-react-context,不再支持 React 16.3 之前的版本。⚠️
  • 移除 matchMedia 的 polyfill 代码,SSR 环境下使用需要自己加上。⚠️
  • 移除 PropTypes 的校验代码。
  • 移除 react-lifecycles-compat 依赖(rc-* 组件里还有不少依赖,需要慢慢去除)。
  • 替换 dom-scroll-into-view 为 scroll-into-view-if-needed,从而减小了 1.1kb。
  • 移除 enquire.js 的依赖,用原生 matchMedia 实现。
  • 升级 rc-slider 里的 rc-tooltip 依赖到最新版,解决 rc-tooltip/rc-align 等新旧两个版本共存。
  • 移除一些针对 IE9/10 的 css hack 样式。
  • 移除 swing 这个没有用到的动画样式。

最终体积优化效果:

  • js 减小 6.25kb。
- 302.98kb
+ 296.73kb
  • css 减小 0.66kb。
- 54.11kb
+ 53.45kb

css 里 50kb 目标还有 3kb,可能需要等 Grid 的 flex 优化才能做到。@zombieJ

移除掉这部分循环生成的样式代码后的结果点此查看。

- 53.45kb
+ 48.33kb

close #19871

@netlify
Copy link

@netlify netlify bot commented Dec 20, 2019

Deploy preview for ant-design failed.

Built with commit e08153d69fe3c013c4aca590e86ce14b983b14e3

https://app.netlify.com/sites/ant-design/deploys/5e008f1945f3f40007880479

@afc163 afc163 changed the title 📦 samller bundlesize limit refactor: 📦 samller bundlesize limit Dec 20, 2019
@codesandbox-ci
Copy link

@codesandbox-ci codesandbox-ci bot commented Dec 20, 2019

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit e08f5ff:

Sandbox Source
antd reproduction template Configuration

@codecov
Copy link

@codecov codecov bot commented Dec 20, 2019

Codecov Report

Merging #20356 into 4.0-prepare will increase coverage by 0.01%.
The diff coverage is 100%.

Impacted file tree graph

@@               Coverage Diff               @@
##           4.0-prepare   #20356      +/-   ##
===============================================
+ Coverage        97.56%   97.57%   +0.01%     
===============================================
  Files              295      295              
  Lines             6849     6754      -95     
  Branches          1878     1822      -56     
===============================================
- Hits              6682     6590      -92     
+ Misses             167      164       -3
Impacted Files Coverage Δ
components/mentions/index.tsx 100% <ø> (ø) ⬆️
components/input/ResizableTextArea.tsx 95% <ø> (-0.13%) ⬇️
components/typography/Base.tsx 100% <ø> (ø) ⬆️
components/progress/progress.tsx 100% <ø> (ø) ⬆️
components/tree/DirectoryTree.tsx 97.84% <ø> (-0.03%) ⬇️
components/button/button.tsx 100% <ø> (ø) ⬆️
components/affix/index.tsx 97.29% <ø> (-0.03%) ⬇️
components/statistic/Countdown.tsx 100% <ø> (ø) ⬆️
components/input/Input.tsx 100% <ø> (ø) ⬆️
components/badge/ScrollNumber.tsx 98.68% <ø> (-0.02%) ⬇️
... and 35 more

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 97f9cba...e08f5ff. Read the comment docs.

@zombieJ
Copy link
Member

@zombieJ zombieJ commented Dec 20, 2019

这个是 gzip 的 size,感觉略有挑战:

V3

截屏2019-12-20下午1 50 17

V4

截屏2019-12-20下午1 50 31

@afc163
Copy link
Member Author

@afc163 afc163 commented Dec 20, 2019

有挑战才有意义。

这个先放在这里,跟踪一下大小。

  • 第三方依赖的严格管理。
  • 无效样式的清理。

@afc163 afc163 added this to In progress in Ant Design 4.0 Release Candidate via automation Dec 20, 2019
@afc163 afc163 requested a review from zombieJ as a code owner Dec 20, 2019
@afc163
Copy link
Member Author

@afc163 afc163 commented Dec 20, 2019

下降了 2.22k!

@afc163 afc163 changed the title refactor: 📦 samller bundlesize limit refactor: 📦 smaller bundlesize limit Dec 20, 2019
@afc163 afc163 force-pushed the 4.0-bundlesize branch 2 times, most recently from f94c890 to d096c57 Compare Dec 20, 2019
@afc163 afc163 changed the title refactor: 📦 smaller bundlesize limit [WIP] refactor: 📦 smaller bundlesize limit Dec 20, 2019
@shaodahong
Copy link
Member

@shaodahong shaodahong commented Dec 20, 2019

底层组件还是有优化的空间,但属于重构的方面了

image

@zombieJ
Copy link
Member

@zombieJ zombieJ commented Dec 20, 2019

dist 换 rollup 会不会有帮助?
https://github.com/ant-design/antd-tools/blob/master/lib/gulpfile.js#L46

@shaodahong
Copy link
Member

@shaodahong shaodahong commented Dec 20, 2019

不会,我是觉得底层这些组件颗粒度还不够细,尤其现在 IE11 最低兼容后比如 Upload 就可以再重构下, animation 也是

@shaodahong
Copy link
Member

@shaodahong shaodahong commented Dec 20, 2019

browserslist 现在有设置么

@afc163
Copy link
Member Author

@afc163 afc163 commented Dec 20, 2019

dist 换 rollup 会不会有帮助?

应该有,可以试试。

@afc163
Copy link
Member Author

@afc163 afc163 commented Dec 23, 2019

🌈  ant-design@4.0.0-beta.0 git:❨4.0-bundlesize❩ ✗ npm ls rc-trigger
antd@4.0.0-beta.0 /Users/afc163/Projects/ant-design
├─┬ @ant-design/bisheng-plugin@2.0.1
│ └─┬ antd@4.0.0-beta.0
│   ├─┬ rc-calendar@9.15.8
│   │ └── rc-trigger@2.6.5 
│   └── rc-trigger@4.0.0-alpha.8  deduped
├─┬ rc-cascader@1.0.0-alpha.0
│ └── rc-trigger@4.0.0-alpha.8  deduped
├─┬ rc-dropdown@3.0.0-alpha.0
│ └── rc-trigger@4.0.0-alpha.8  deduped
├─┬ rc-mentions@1.0.0-alpha.0
│ └── rc-trigger@4.0.0-alpha.8  deduped
├─┬ rc-menu@8.0.0-alpha.5
│ └── rc-trigger@4.0.0-alpha.8  deduped
├─┬ rc-picker@0.0.1-alpha.62
│ └── rc-trigger@4.0.0-alpha.8  deduped
├─┬ rc-select@10.0.0-alpha.32
│ └── rc-trigger@4.0.0-alpha.8  deduped
├─┬ rc-slider@8.7.1
│ └─┬ rc-tooltip@3.7.3
│   └── rc-trigger@2.6.5 
├─┬ rc-time-picker@4.0.0-alpha.2
│ └── rc-trigger@4.0.0-alpha.8  deduped
├─┬ rc-tooltip@4.0.0-alpha.3
│ └── rc-trigger@4.0.0-alpha.8  deduped
└── rc-trigger@4.0.0-alpha.8 

@afc163 afc163 force-pushed the 4.0-bundlesize branch 2 times, most recently from 400e78f to 9ee2274 Compare Dec 23, 2019
@afc163 afc163 changed the title [WIP] refactor: 📦 smaller bundlesize limit refactor: 📦 smaller bundlesize limit Dec 23, 2019
@afc163
Copy link
Member Author

@afc163 afc163 commented Dec 23, 2019

最终效果。

- 302.98kb
+ 296.73kb
- 54.11kb
+ 53.45kb

image

@afc163 afc163 force-pushed the 4.0-bundlesize branch 2 times, most recently from e08153d to f6207e0 Compare Dec 23, 2019
@afc163
Copy link
Member Author

@afc163 afc163 commented Dec 23, 2019

移除掉 Grid 里这部分循环生成的样式代码后的结果点此查看。

- 53.45kb
+ 48.33kb

@afc163
Copy link
Member Author

@afc163 afc163 commented Dec 23, 2019

两个 action 留给 @zombieJ 尝试。

  • 替换 webpack 为 rollup。
  • Grid 里的 loop 样式移除。

@zombieJ zombieJ mentioned this pull request Dec 23, 2019
2 tasks
@zombieJ
Copy link
Member

@zombieJ zombieJ commented Dec 23, 2019

这个是不是也可以关了? #19871

@afc163
Copy link
Member Author

@afc163 afc163 commented Dec 23, 2019

好像没什么关系,#19871 是优化了 defaultProps 的定义,不是 propTypes。

@zombieJ
Copy link
Member

@zombieJ zombieJ commented Dec 23, 2019

propTypes 定义和 component props 不同导致的 defaultProps 问题,没有 propTypes 了应该就不会冲突了:
截屏2019-12-23下午6 23 59

@afc163
Copy link
Member Author

@afc163 afc163 commented Dec 23, 2019

propTypes 定义和 component props 不同导致的 defaultProps 问题,没有 propTypes 了应该就不会冲突了:

嗯,如果是这个问题那就解决了。

@zombieJ zombieJ merged commit 8501b70 into 4.0-prepare Dec 23, 2019
38 checks passed
Ant Design 4.0 Release Candidate automation moved this from In progress to Done Dec 23, 2019
@zombieJ zombieJ deleted the 4.0-bundlesize branch Dec 23, 2019
@zombieJ
Copy link
Member

@zombieJ zombieJ commented Dec 25, 2019

修了几个 bug,又过 300 了。我再调调……

@re-thc
Copy link

@re-thc re-thc commented Jan 10, 2020

不要使用momentjs好吗?58kb!

@afc163
Copy link
Member Author

@afc163 afc163 commented Jan 11, 2020

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

Successfully merging this pull request may close these issues.

None yet

4 participants