next
next copied to clipboard
Published
20 hours ago •
alibaba-fusion
alibaba-fusion
CSS变量太多导致浏览器devtools很卡
Component
目前，fusion输出的所有css变量都是挂载到同一个根元素（比如:root）的。由于css var的数量很多（3600+个），并且由于css var是自动继承的，导致【每一个元素】都会受到【所有变量的影响】。导致在使用浏览器开发者工具查看元素样式的时候，非常卡顿。
Reproduction link
https://o2.alibaba-inc.com/sandbox/ide?id=191
Steps to reproduce
打开浏览器开发者工具，选中一些元素，查看它们的样式。同时，尝试与应用元素进行交互，关注应用和开发者工具的卡顿情况。
在真实的应用中，有更多组件和元素，卡顿会更加严重。
方案讨论
- 减少放在顶层根元素的css变量
将css变量分为【私有变量】和【公共变量】，并区别对待：
- 绝大部分css var其实只是用于某些元素的局部用途（css变量列表），比如
--tree-switch-margint-right，他们属于【私有变量】，没必要挂载在根元素上，应该挂载在使用他们的组件元素，或者是更加内部的元素上。 - 挂载在根元素上的，应该只有【公共变量】，比如
--color-text1-9，即那些公共的design token。
- 减少【私有变量】
可能有一些css变量，根本就不会受到用户主题的影响。因此，它们也没必要将这些样式值定义在css变量中，让css样式直接依赖具体值（而不是css变量）即可。
后续调研
我会先写一些脚本，分析一下每个css变量的使用情况、相互依赖情况。重点关注变量之间的依赖关系、用途很少的变量、在多个组件都用到的变量、只在一个组件内用到的变量。
然后，设计一种对fusion代码进行改造的方案，目的是在代码中将【私有变量】以及他们的作用域（哪个组件、哪个元素）标注出来，然后在生成css变量的时候，生成更具体的选择器（而不是全部放在:root上）。
可能有一些组件想要“import”其他组件的【私有变量】来使用，也需要考虑。先看看脚本分析的结果如何。
可能还要支持将【不想生成css变量的那些sass变量】也标注出来，在生成css变量的时候跳过它们。先看看脚本分析的结果如何。
