开篇
闲来无事,开发一个css自动原子化工具玩玩。
本文仅为实现思路,如有改进地方希望各位积极评论交流。
背景
现有的css原子化方案对于开发者不算友好。
- 开发者很难记得所有原子化样式。
- 对于不常用的样式需要进行配置。
效果
打包效果对比
原子化前->原子化后 (gzip压缩之前,由于css原子化之后gzip压缩比率降低,导致效果没有压缩前明显)
以下为原子化完成后webpack打包出的代码片段
打包后部分js片段
打包后部分css片段
实现原理
- 处理js,使用babel将js转化为ast,对ast不同结构进行处理,将其转化为js树。
- 处理css,使用postcss将css转为ast,将其转化为css block。
- 合并,css规则匹配js上的class,进行替换。
处理JS
- 使用babel将js代码转为ast。
babel.parse(code);
- 对不同类型结构进行不同处理。