Vite
自从 4.4
版本开始实验性支持 Lightning CSS
,可以让项目的 CSS
打包速度更快,构建体积更小,我们来一起看看在 Vite
中怎么配置使用 Lightning CSS
吧。
什么是 Lightning CSS
引用官方的介绍:
An extremely fast CSS parser, transformer, bundler, and minifier. 一个非常快的CSS解析器、转换器、打包器和压缩工具。号称:Lightning CSS 比基于 JavaScript 的同类工具快 100 倍以上。它可以在单个线程上每秒压缩超过 270 万行代码。
转换、打包速度比碾压 PostCSS
的 esbuild
还要快,打包格式更加紧凑,使用 rust
编写,性能优异。使用由 Mozilla
创建并由 Firefox
使用的 cssparser
(CSS解析器) 和 selectors
(CSS选择器) 。这些提供了坚实的 CSS
解析基础,在此基础上 Lightning CSS
实现了对所有特定 CSS
规则和属性的支持,背靠 Mozilla
贴近标准。可以了解到 Lightning CSS
的优势比起传统的 PostCSS
可大太多了,既然这个工具这么优秀,该怎么实际应用呢?
在 Vite(4.4+) 中使用 Lightning CSS
根据 Vite
的文档描述,从 4.4
开始就已经开始实验性支持使用 Lightning CSS
处理项目中 CSS
的转换和压缩。
安装 Lightning CSS
npm add -D lightningcss
在 vite.config.ts 中进行配置
将以下两个配置加入到你项目的 vite.config.ts
中:
export default defineConfig({
css: {
// 转换CSS交给lightningcss
transformer: 'lightningcss',
lightningcss: {
// 关于lightningcss的配置添加在这里
}
},
build: {
// 构建CSS交给lightningcss
cssMinify: 'lightningcss',
}
}
恭喜你,现在就可以使用 Lightning CSS
处理项目中 CSS
的转换和压缩了🎉🎉🎉。等一下,有问题!这一番操作之后是不是发现页面有些样式已经有问题了?😜
使用 Lightning CSS 的一些限制
Lightning CSS
不能和 CSS
预处理器一起工作。
这就意味着如果你需要在项目中使用 scss
, sass
, less
, stylus
这种 CSS
预处理器,就无法在项目中使用Lightning CSS
。
如果你使用了 UnoCSS
并且使用了 @apply这类
指令,需要使用--at-apply:
替换 @apply
@apply
会借助于 PostCSS
来处理 CSS
的转换,无法被 Lightning CSS
正确处理,另外当在 --at-apply:
中使用像 bg-red/10
这类原子类的时候需要使用单引号包裹属性,--at-apply: 'bg-red/10';
否则会被 Lightning CSS
解析为 bg-red / 10
,透明度设置就会失效。
以上是个人在实际应用中碰到的一些问题(毕竟是实验性支持),各位在实践过程中如果有别的问题也可以在评论区讨论下👏。
总结
引入新的技术总是有风险的,现阶段 Vite
和 UnoCSS
对 Lightning CSS
的支持还不够稳定,可以持观望态度,谨慎引入现有项目,没有稳定之前万万不可应用到生产。但是也不可因噎废食,毕竟连 TailwindCSS
也看中了 Lightning CSS
的性能提升,计划未来的演变方向要让自家的引擎 “氧化”: Tailwind Oxide Engine 使用 Lightning CSS
来替换原本的 PostCSS
转换方案。最后,有用请点赞,喜欢请关注,我是Senar,我们下一篇再见~
参考链接:
cssparser https://github.com/servo/servo/tree/master/components/selectors
cssselectors https://github.com/servo/servo/tree/master/components/selectors
vite lightning https://cn.vitejs.dev/guide/features#lightning-css
Tailwind Oxide Engine https://tailwindcss.com/blog/2023-07-18-tailwind-connect-2023-recap
网友评论