乐趣区

关于前端:你下个Vite项目能不能用上Lightning-CSS

Vite 自从 4.4 版本开始实验性反对 Lightning CSS,能够让我的项目的 CSS 打包速度更快,构建体积更小,咱们来一起看看在 Vite 中怎么配置应用 Lightning CSS 吧。

Lightning CSS

什么是 Lightning CSS

援用官网的介绍:

An extremely fast CSS parser, transformer, bundler, and minifier. 一个十分快的 CSS 解析器、转换器、打包器和压缩工具。号称:Lightning CSS 比基于 JavaScript 的同类工具快 100 倍以上。它能够在单个线程上每秒压缩超过 270 万行代码。

转换、打包速度比碾压 PostCSSesbuild 还要快,打包格局更加紧凑,应用 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,透明度设置就会生效。

以上是集体在理论利用中碰到的一些问题(毕竟是实验性反对),各位在实际过程中如果有别的问题也能够在评论区探讨下👏。

总结

引入新的技术总是有危险的,现阶段 ViteUnoCSSLightning 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…

退出移动版