unocss 究竟比 tailwindcss 快多少惋嚎？
前言
我們知道 unocss 很快，也許是目前最快的原子化 CSS 引擎 (沒有之一)。
unocss 解釋它為什么這么快的原因续崖，是因為它不用去解析 CSS 抽象語法樹敲街，直接在 content 里面通過正則表達式從內(nèi)容中提取 token，然后生成樣式严望。
這點從 unocss 官方提供目前最新的測試結(jié)果可以看到（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 測試素材，使用的是 vite + @unocss/vite著蟹，tailwindcss 測試素材則是 vite + postcss + tailwindcss墩蔓。
可是假如我們以 vite / webpack 插件的方式去使用 unocss 的話，默認是不支持 tailwindcss 那些 @apply, @screen, theme() 這些 CSS 指令的萧豆。
這時候我們就需要額外去安裝 @unocss/transformer-directives 這個包奸披，并在 uno.config.ts 文件中注冊來支持這些功能。
可是涮雷，當(dāng)我們查看這個包的依賴的時候阵面，發(fā)現(xiàn)它其實也是去使用一個 CSS AST 工具：css-tree 去解析操作抽象語法樹的。
也就是說洪鸭，unocss 以 vite/webpack 插件的方式样刷，去實現(xiàn)的那些在 tailwindcss 內(nèi)置的 css 指令不免也要解析成 AST。
那么這種時候览爵，它又能比 tailwindcss 快多少呢置鼻？
開始測試
這里我做了一個基準測試，unocss 只加載 @unocss/preset-uno 和 @unocss/transformer-directives蜓竹，tailwindcss 為默認注冊安裝箕母。
測試素材以及代碼 fork 自 unocss 官方 bench，和官方 bench 不同的是俱济，我為了同時為了模擬平常的開發(fā)場景嘶是，我還加入了等量的 @apply 指令，這樣它們都免不了要去解析 CSS 抽象語法樹蛛碌。屬于是給 2 者增加負重了聂喇。
測試設(shè)備都為
Mac Book M1 (2021), 跑200次，取75%
運行后蔚携，測試結(jié)果如下所示：
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 原先的測試結(jié)果跛十，對比 tailwindcss 的速度從 3.7 倍 降低到了 2.52 倍。
可見 CSS 抽象語法樹的解析芥映，還是顯著的降低了 unocss 的速度，不過成績依然是可喜的奈偏，非常厲害坞嘀。
postcss 方式
當(dāng)然，想要支持 tailwindcss 的 @apply , @screen , theme() 這些 CSS 指令惊来，不止上面這一條路。
我們也可以使用 @unocss/postcss 這個 postcss 插件去達成這樣的目的裁蚁。
另外我也做了一個同樣基于 postcss 插件的基準測試，unocss 只加載 @unocss/preset-uno枉证，測試環(huán)境也和上一個一樣矮男。
測試結(jié)果如下:
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)
不出所料，果然在都需要在解析抽象語法樹情況下室谚，它們的性能差距是非常小的。因為大家操縱 CSS AST 的方式和手段都是差不多的秒赤，這點上不會有什么差距。
而相差的那 30ms 左右陈瘦，其實關(guān)鍵點就在于潮售，雙方引擎中甘晤，正則表達式匹配的數(shù)量和質(zhì)量了饲做。但是遏弱，相差這點時間其實已經(jīng)沒有意義了，畢竟我們都知道泪姨，正則寫的越多饰抒，越復(fù)雜，執(zhí)行就越慢袋坑。
在我看來 @unocss/postcss 其實就是一個更加自由，可自定義的 tailwindcss 版本，你可以自定義里面匹配和生成 CSS 的規(guī)則吃环。
這 2 個庫洋幻，其實實現(xiàn)思路其實還是比較相似的，但是這個世界上好唯，并沒有必要存在 2 個 tailwindcss。
unocss vs tailwindcss
就像我一向的觀點骑篙，unocss 在幫助我們探索原子化 CSS 更多的上限权旷。
unocss 在各個方面相比來說都更加的進取，而使用 @unocss/postcss 這種方式拄氯，相比它推薦的其他使用方式來說，有一點點失去了它的一部分靈魂镣煮，你知道我指的是哪一部分（笑～）鄙麦。
而 tailwindcss 和 unocss 都可以通過 plugin / preset 去添加更多的匹配規(guī)則。
所以最終決定用什么的胯府，還是取決于自己項目的需求，以及具體技術(shù)的生態(tài)吧炎咖，也就是中國的那句古話：前人栽樹寒波，后人吃瓜。
結(jié)尾
這個測試其實也變相的提供了一個 unocss 的最佳實踐俄烁，即只要盡可能少的解析 CSS AST，unocss 提取 token 的速度絕對比 tailwindcss 快很多粹胯。
然而，最近我看 X 看到 tailwindcss@4.x 版本也快出了渊抽，官方放出了一張圖片：
感覺性能相當(dāng) Ok议忽，屬于是用 rust 實現(xiàn)了一波彎道超車？狠狠地期待一波:
最后栈幸，期待 unocss 和 tailwindcss 它們之間相互卷起來，未來給我們開發(fā)者帶來更多的驚喜玩焰！
