216 - 《给 antd 5 挑挑刺》
发布于 2022年11月18日
好的就不说了，太多了数不过来。
1、css in js 性能问题
没有具体数据，以下是我的推测。希望 antd 的同学能解我的疑惑。
现在的方案里用的动态插大量 style 的方式，我看 antd 官网里就插了 80 个 style 标签到 head 元素里，这真的不会有性能问题吗？之前参与双 12 时一开始也用的动态插 style 的方式，后来加的样式多了性能实在不行了，禾登同学加入 extract-css-webpack-plugin 提取成单独的 css 后秒解。
动态插 style 为啥有性能损耗？我觉得是这样。1）css 全部变成了 js，要计算后变成 style 标签，所以有计算的消耗，2）js 变大了，有额外的解析 js 文件的消耗 3）css 之前单独成文件，比如用户引入 antd.css，会有更大的缓存命中率。
附 4 和 5 只有 Button 的产物对比。4 是 61K 的 index.css + 46K 的 index.js，5 是 91K 的 index.js。
2、babel-plugin-import
发布稿说「新的 CSS-in-JS 方案原生支持 Tree Shaking，在 v5 你不在需要使用 babel-plugin-import 摘除未使用到的样式。新的方案将自动按需加载样式。」功能上没问题，我试过 d