UnoCSS、TailWindcss和tailwindcss性能对比

最新推荐文章于 2025-10-13 05:30:34 发布

原创最新推荐文章于 2025-10-13 05:30:34 发布 · 827 阅读

18 ·

CC 4.0 BY-SA版权

文章标签：

#前端框架 #postcss #css3 #vue.js

前端专栏收录该内容

3 篇文章

订阅专栏

在现在原子化CSS引擎有UnoCSS、TailWindcss和tailwindcss，但作为新起之秀的UnoCSS，在速度性能上比TailWindcss和tailwindcss快多少呢？
在这里插入图片描述
UnoCSS中文官方文档：https://www.unocss.com.cn

速度性能对比

这点从 unocss 官方提供目前最新的测试结果可以看到（2023-08-11 版本）:

11/8/2023, 3:53:41 PM
1656 utilities | x200 runs (75% build time)

none                             33.99 ms / delta.      0.00 ms
unocss       v0.57.2            359.46 ms / delta.    325.47 ms (x1.00)
tailwindcss  v3.3.5            1238.25 ms / delta.   1204.26 ms (x3.70)
windicss     v3.5.6            1742.45 ms / delta.   1708.46 ms (x5.25)

可以看到 unocss 比 tailwindcss 快 3.7 倍左右。

为什么UnoCSS速度快

unocss 解释它为什么这么快的原因，是因为它不用去解析 CSS 抽象语法树，直接在 content 里面通过正则表达式从内容中提取 token，然后生成样式。

其中官方的 unocss 测试素材，使用的是 vite + @unocss/vite，tailwindcss 测试素材则是 vite + postcss + tailwindcss。

可是假如我们以 vite / webpack 插件的方式去使用 unocss 的话，默认是不支持 tailwindcss 那些 @apply, @screen, theme() 这些 CSS 指令的。

这时候我们就需要额外去安装 @unocss/transformer-directives 这个包，并在 uno.config.ts 文件中注册来支持这些功能。

可是，当我们查看这个包的依赖的时候，发现它其实也是去使用一个 CSS AST 工具：css-tree 去解析操作抽象语法树的。

也就是说，unocss 以 vite/webpack 插件的方式，去实现的那些在 tailwindcss 内置的 css 指令不免也要解析成 AST。

那么这种时候，它又能比 tailwindcss 快多少呢？

开始测试

这里我做了一个基准测试，unocss 只加载 @unocss/preset-uno 和 @unocss/transformer-directives，tailwindcss 为默认注册安装。

测试素材以及代码 fork 自 unocss 官方 bench，和官方 bench 不同的是，我为了同时为了模拟平常的开发场景，我还加入了等量的 @apply 指令，这样它们都免不了要去解析 CSS 抽象语法树。属于是给 2 者增加负重了。

运行后，测试结果如下所示：

2024/3/5 00:19:14
1656 utilities | x200 runs (75% build time)

none                             19.92 ms / delta.      0.00 ms 
unocss       v0.58.5            328.39 ms / delta.    308.47 ms (x1.00)
tailwindcss  v3.4.1             798.42 ms / delta.    778.49 ms (x2.52)

可以看到在 1656 utilities 个工具类提取 + @apply 的场景，作为 vite 插件使用的 unocss 速度差不多是 tailwindcss 的 2.52 倍左右。

相比 unocss 原先的测试结果，对比 tailwindcss 的速度从 3.7 倍降低到了 2.52 倍。

可见 CSS 抽象语法树的解析，还是显著的降低了 unocss 的速度，不过成绩依然是可喜的，非常厉害。

postcss 方式

当然，想要支持 tailwindcss 的 @apply , @screen , theme() 这些 CSS 指令，不止上面这一条路。

我们也可以使用 @unocss/postcss 这个 postcss 插件去达成这样的目的。

另外我也做了一个同样基于 postcss 插件的基准测试，unocss 只加载 @unocss/preset-uno，测试环境也和上一个一样。

测试结果如下:

2024/3/5 00:08:25
1656 utilities | x200 runs (75% build time)

none                             16.75 ms / delta.      0.00 ms 
unocss       v0.58.5            679.51 ms / delta.    662.77 ms (x1.00)
tailwindcss  v3.4.1             712.55 ms / delta.    695.80 ms (x1.05)