perf: refactor devWarning for production code size

[KAROTT7]

• refactor devWarning

• don't use useEffect only wrap devWarning

[中文版模板 / Chinese template]

🤔 This is a ...

• New feature
• Bug fix
• Site / documentation update
• Demo update
• Component style update
• TypeScript definition update
• Bundle size optimization
• Performance optimization
• Enhancement feature
• Internationalization
• Refactoring
• Code style optimization
• Test Case
• Branch merge
• Other (about what?)

🔗 Related issue link

#35405

💡 Background and solution

问题：打包后的生产代码会包含警告代码
复现：请看 issue 中的描述和复现链接
解决：重构 devWarning

另外：对 AutoComplete Upload Radio 等组件的警告代码做了优化，如无必要，devWarning 不应该放在任何只包含警告代码的函数里，因为打包后移除警告代码，生产代码会保留这个函数

// 打包前
useEffect(() => {
  function warning() {
    // codes
  }
}, [])

// 打包后
useEffect(() => {})

📝 Changelog

Language	Changelog
🇺🇸 English	refactor devWarning so that reduce production code size
🇨🇳 Chinese	重构devWarning以减少生产代码体积

☑️ Self Check before Merge

⚠️ Please check all items below before review. ⚠️

• Doc is updated/provided or not needed
• Demo is updated/provided or not needed
• TypeScript definition is updated/provided or not needed
• Changelog is provided or not needed

[github-actions]

[codecov]

Codecov Report

Merging #35411 (2dd94fe) into master (17cd13f) will not change coverage.
The diff coverage is 100.00%.

❗ Current head 2dd94fe differs from pull request most recent head a9d41a1. Consider uploading reports for the commit a9d41a1 to get more accurate results

@@            Coverage Diff            @@
##            master    #35411   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files          424       424           
  Lines         7964      7961    -3     
  Branches      2372      2367    -5     
=========================================
- Hits          7964      7961    -3     

Impacted Files	Coverage Δ
components/_util/warning.ts	100.00% <100.00%> (ø)
components/auto-complete/index.tsx	100.00% <100.00%> (ø)
components/avatar/avatar.tsx	100.00% <100.00%> (ø)
components/breadcrumb/Breadcrumb.tsx	100.00% <100.00%> (ø)
components/button/button-group.tsx	100.00% <100.00%> (ø)
components/button/button.tsx	100.00% <100.00%> (ø)
components/cascader/index.tsx	100.00% <100.00%> (ø)
components/checkbox/Checkbox.tsx	100.00% <100.00%> (ø)
components/collapse/CollapsePanel.tsx	100.00% <100.00%> (ø)
components/config-provider/cssVariables.tsx	100.00% <100.00%> (ø)
... and 29 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 17cd13f...a9d41a1. Read the comment docs.

[zombieJ]

CI failed

[afc163]

貌似没有减少体积：https://github.com/ant-design/ant-design/runs/6333049720?check_suite_focus=true

[KAROTT7]

排查了下，目前的改动只是在打包移除了devWarning函数，生产不会显示警告信息。等我看看怎么在生产代码移除所有组件中的 devWarning 代码

[KAROTT7]

可能我标题没写清楚，目标是减少引用了 Antd 的项目的体积，说下做了哪些改变

1. webpack 配置不对，并没有给所有devWarning代码加上if (process.env.NODE_ENV === "production") 前缀（只会给文件中第一个 devWarning 加前缀）；导致npm run dist 打包出来的dist/antd.js文件中只有部分 devWarning 中有 if (true) 判定，而 dist/antd.min.js 中依然包含警告代码
2. npm run compile 没有给 es 和 lib 包中的devWarning代码加上if (process.env.NODE_ENV === "production") 前缀，导致其他项目引用并打包后依然饱含警告代码
3. 移除 throw new Error 代码，改为 devWarning; throw new Error会导致程序终止，非必要不应该使用在浏览器端，同时antd.min.js 会有此代码
4. 其他组件中有些devWarning 已经有了环境判定，现在统一改为在npm run compile中修改，看antd-tools.config.js

通过这次更改，antd.min.js文件体积会有一点减少

[afc163]

确实少了近 1kb。

[KAROTT7]

另外，由于其他react-component组件（比如Form中有多处警告代码）中依然没有对相应的警告代码增加环境判定，所有打包后依然还会有警告代码；rc-util的更改已经好了，等合并后其他组件可以升级，然后给所有警告代码加上环境判断，之后antd.min.js体积还会减少一些

[afc163]

字符串替换有点不太稳，最好是 babel 插件走 ast。

[afc163]

比如 https://github.com/oliviertassinari/babel-plugin-transform-dev-warning

[afc163]

更好的方式是 https://github.com/BerkeleyTrue/warning#use-in-production

[KAROTT7]

好，我看看这两个库，然后改下。

[KAROTT7]

这两个库文档都看了下，对于改动有些疑问：

1. https://github.com/oliviertassinari/babel-plugin-transform-dev-warning 不能自定义配置，它只能替换invariant或者warning等警告，Antd 里是定义的 devWarning；如果需要改动则Antd里所有import devWarning引用都要改为import warning
2. 再就是antd-tools里需要增加babel-plugin-transform-dev-warning插件，目前没看到antd-tools有暴露插件接口，所以不能在antd-tools.config.js文件里配置，这就需要先更新antd-tools，再更新Antd。
3. 至于https://github.com/BerkeleyTrue/warning#use-in-production 这个库，我认为没必要引用，和目前devWarning实现差别不大；目前主要改动还是走 ast 给devWarning加环境判定。

[afc163]

再就是antd-tools里需要增加babel-plugin-transform-dev-warning插件，目前没看到antd-tools有暴露插件接口，所以不能在antd-tools.config.js文件里配置，这就需要先更新antd-tools，再更新Antd。

这个可以。

[KAROTT7]

Ok ，那我晚点提交一下PR

[KAROTT7]

已经给antd-tools提PR了，合并下我再更新这里。本地已经测试过。

[KAROTT7]

看起来是脚本出现了错误，是吗？

[afc163]

rebase 一下 master

[KAROTT7]

OK了