UnoCSS 基准测试深度解读1656 个工具类场景下与 Tailwind CSS 4、Windi CSS 的构建性能实测【免费下载链接】unocssThe instant on-demand atomic CSS engine.项目地址: https://gitcode.com/GitHub_Trending/un/unocss本篇文章围绕 UnoCSS 仓库bench目录下的实测基准记录 2024-12-25-03-55-05.md 展开完整解析一次构建性能对比的测试方法、统计口径与实测数据并深入到 bench/run.mjs、bench/gen.mjs 等脚本源码说明测试用例如何生成、结果如何统计、各引擎如何接入。读者阅读后既能读懂仓库中每一份基准结果文件也能掌握复现与自定义该基准的方法还能理解按需生成on-demand引擎在构建性能上的实际表现边界。一、这份基准记录是什么bench/results/目录保存了 UnoCSS 仓库历次基准测试的原始输出.md文本摘要 .json完整数据。本次解读的对象是 2024-12-25-03-55-05.md其原文是一段纯文本摘要12/25/2024, 11:55:05 AM 1656 utilities | x15 runs (75% build time) none 14.98 ms / delta. 0.00 ms tailwindcss4 v4.0.0-beta.1 178.01 ms / delta. 163.03 ms (x1.00) unocss v0.65.2 231.05 ms / delta. 216.06 ms (x1.33) tailwindcss v4.0.0-beta.6 566.50 ms / delta. 551.52 ms (x3.38) windicss v3.5.6 1038.76 ms / delta. 1023.77 ms (x6.28)三段信息分别说明测试时间2024-12-25 11:55:05UTC 时间见 JSON 中的time字段为2024-12-25T03:55:05.880Z。测试规模共 1656 个工具类utilities执行 15 轮x15 runs统计口径为75% build time构建耗时 75% 分位。测试对象none基线、tailwindcss4、unocss、tailwindcss、windicss五种方案。同一时刻生成的 2024-12-25-03-55-05.json 记录了完整原始数据本次各工具版本Vite 6.0.5、UnoCSS 0.65.2、WindiCSS 3.5.6、Tailwind CSS 4.0.0-beta.6、Tailwind CSS 4.0.0-beta.1、minimum/average/fifty/seventyFive/ninetyFive/ninetyNine各分位数值、delta以及全部 75 条单轮耗时记录15 轮 × 5 个目标。二、基准的构造1656 个工具类如何生成测试负载由 bench/gen.mjs 程序化生成这是理解结果的前提。classes的构成逻辑如下尺寸sizessm、lg、xl三个响应式断点。颜色colorsred/orange/blue三色 ×200/400两档共 6 个色阶。变体variantshover、first、active、dark、复合变体dark:hover:focus:first:active以及三个断点前缀和三个断点 复合变体前缀如sm:dark:hover:focus:first:active共 11 个。基础类名names共 138 个来自四组组合p/pt/m/mx/top×0-9十个数字档 任意值[1px]/[3vh]/[3.555em]即 5 × 13 65 个text/bg/border×6 个色阶 12 个带透明度写法如red-200/10 3 个十六进制任意值[#525343]/[#124453]/[#942]即 3 × 21 63 个text/rounded× 3 个尺寸即 6 个grid-cols×1、2、[1fr_3em]、[20px_min-content_1fr]即 4 个。最终classes names 11 × names 138 1518 1656与结果文件中1656 utilities完全吻合。可以看到用例不仅覆盖常规间距、颜色、文本、圆角、栅格类还刻意混入任意值语法[...]与透明度修饰/10以贴近真实项目中手写类名千奇百怪的形态。writeMock()会把这些类名洗牌shuffle后按每 15 个一组写入div class...生成source/gen1.js、gen2.js、gen3.js三个入口再通过gen.js汇总 import。每次构建前都会重新洗牌生成模拟真实源码中工具类分布动态变化的情况。三、统计口径75% 分位与 delta 的含义结果中的(75% build time)来自 bench/run.mjs 的metric配置第 10 行默认值为75%可切换为average/min/50%/75%/95%/99%。统计逻辑percentile函数是将某目标的全部轮次耗时升序排序后取floor(长度 × 百分比)位置的值。75% 分位意味着75% 的构建快于该值比平均值更能抵抗偶发抖动能代表日常开发的典型体验。delta是各目标耗时减去none基线耗时的差值。none表示完全不接入任何 CSS 引擎的裸 Vite 构建耗时因此delta 才是各引擎本身引入的额外开销而不是绝对耗时。行尾的(x1.00)/(x1.33)等倍数是该目标 delta 与最快引擎 delta 的比值见run.mjs中slowdown d / (fastest - baseTime)的计算表示相对最快方案的差距倍数。以本次数据为例none的 75% 分位仅 14.98 ms而tailwindcss4的绝对耗时 178.01 ms 中真正的引擎成本是 delta 163.03 ms——这也是为什么结果表把 delta 与绝对耗时并列展示。四、2024-12-25 实测结果全景将 2024-12-25-03-55-05.json 中记录的所有分位统计汇总如下单位 ms目标版本minaverage50%75%95%/99%delta(75%)相对倍数none—12.2014.2614.1814.9816.450.00—tailwindcss44.0.0-beta.1163.69177.72171.07178.01220.70163.03x1.00unocss0.65.2210.54229.02227.22231.05263.50216.06x1.33tailwindcss4.0.0-beta.6520.79552.46546.76566.50631.25551.52x3.38windicss3.5.6997.921032.711030.781038.761068.051023.77x6.28几点值得注意的细节稳定性差异unocss的 15 轮耗时落在 210.54 ~ 263.50 ms波动约 25%windicss波动极小约 997 ~ 1068 ms。稳定性的观察仅基于本次 15 轮样本。两条 Tailwind CSS 4 路线tailwindcss4走tailwindcss/vite插件路线与tailwindcss走 PostCSS 插件路线在本次记录中分别是 178.01 ms 与 566.50 ms两者差距明显但二者版本号不同beta.1 与 beta.6且接入方式不同不能简单归因于单一变量。版本信息出处上述版本号并非人工填写而是由 bench/meta.mjs 中的getVersions()通过local-pkg从运行时node_modules解析并写入 JSONUnoCSS 版本则读取仓库根 package.json属于当时环境下的真实依赖解析结果。五、各方案如何接入测试fixture 配置对比bench/fixtures/下每个目录是一个独立的 Vite 工程构建同一个source/gen.js负载区别只在 CSS 引擎接入方式这保证了对比的公平性UnoCSSfixtures/unocss/vite.config.mjs 使用unocss/vite插件并显式设置mergeSelectors: false与content.pipeline.include: [/\.js$/]即只扫描生成的 JS 文件入口 main.js 通过import uno.css触发虚拟模块按需生成 CSS。Tailwind CSS 4tailwindcss4fixtures/tailwindcss4/vite.config.mjs 使用tailwindcss/vite插件样式入口 style.css 仅一行import tailwindcss。Tailwind CSStailwindcss采用 PostCSS 路线postcss.config.js 挂载tailwindcss与autoprefixer插件tailwind.config.js 中开启mode: jit、darkMode: class并声明content: [../../source/*.js]。Windi CSSfixtures/windicss/vite.config.mjs 使用vite-plugin-windicssscan.include指向../../source/*.js。构建完成后run.mjs 的checkClasses()会读取各目标产物 CSS逐一校验 1656 个类名是否全部存在使用escapeSelector处理类名转义任何遗漏都会打印 unmatched 警告——也就是说这份耗时数据的前提是各引擎都完整产出了全部工具类不存在生成不全所以更快的作弊空间。六、与历史基准的纵向对比仓库bench/results/保留了多份历史记录可用于观察演进趋势注意各次轮数、版本与环境均不同仅作趋势参考日期noneunocsstailwindcsswindicss2023-11-0833.99 msv0.57.2 · 359.46 msv3.3.5 · 1238.25 ms (x3.70)v3.5.6 · 1742.45 ms (x5.25)2024-12-2514.98 msv0.65.2 · 231.05 msv4.0.0-beta.6 · 566.50 ms (x3.38)v3.5.6 · 1038.76 ms (x6.28)可以看到 2024-12-25 一轮中新增了tailwindcss4Tailwind CSS 4 的 Vite 插件路线作为对比项其以 163.03 ms 的 delta 成为本轮最快引擎UnoCSS 以 216.06 ms 的 delta 紧随其后x1.33。需要强调的是两轮测试的轮数x200 vs x15、基线none 的耗时从 33.99 ms 降到 14.98 ms说明构建环境/负载载体本身已变化和工具版本都不同跨轮直接比较绝对毫秒数并不严谨更合理的做法是以同一轮内的相对倍数和 delta 作为参考。七、如何复现与自定义这套基准仓库为基准测试提供了开箱即用的脚本根目录 package.json 中可见bench相关脚本具体入口见 bench/package.json 的bench: node run.mjs。复现方式安装依赖仓库为 pnpm workspace安装后bench/fixtures/*/dist会由脚本自动构建生成。运行基准执行pnpm bench在bench目录下脚本将循环执行writeMock()重新洗牌生成负载与node build.mjs构建全部 fixture。结果自动写入bench/results/{时间戳}.md与bench/results/{时间戳}.json控制台同时输出摘要。自定义口径非常容易修改 run.mjs 第 10 行的metric变量可在average/min/50%/75%/95%/99%之间切换统计口径。修改第 9 行的times变量调整轮数。值得注意的是本次 2024-12-25 的记录为x15 runsJSON 中runs数组共 75 条 15 轮 × 5 目标而当前仓库源码中times默认值已是 200可以推断轮数设置随时间演进做过调整阅读历史结果时需注意这一差异。如需增减被测方案可在 meta.mjs 的targets数组与fixtures/目录中对应增删。八、如何正确看待这份数据结合上述源码与数据可以得出几个有依据的结论delta 是核心指标所有引擎都构建在 Vite 之上none基线已包含框架开销只有扣除基线后的 delta 才代表引擎自身成本。本次实测中UnoCSS 与 Tailwind CSS 4Vite 插件路线的 delta 处于同一数量级216 ms 对 163 ms明显快于 PostCSS 路线与 Windi CSS。测试负载覆盖了典型与边界语法1656 个类名包含任意值、透明度修饰、复合变体与响应式前缀对引擎的解析与生成路径有较高要求且checkClasses保证了产出完整性。数据有明确边界这是单仓库、单负载、单机环境的内部基准轮数仅 15 次版本为 2024-12-25 当时解析的结果构建性能还受机器、缓存、文件系统与依赖版本影响不应据此推导出普适的快慢排名结论。源码可随时核查测试方法、负载生成、统计逻辑全部开源在 bench/ 目录任何读者都可以用同一套流程复现也可以修改metric、times与gen.mjs中的组合规则构造符合自己项目形态的负载再跑一次。总而言之这份基准记录的价值不仅在于几个毫秒数字更在于它背后是一套可复现、可校验、可扩展的对比体系。理解 run.mjs 与 gen.mjs 的实现就等于掌握了 UnoCSS 性能测试的完整方法论可以随时为自己的场景产出可信的实测数据。【免费下载链接】unocssThe instant on-demand atomic CSS engine.项目地址: https://gitcode.com/GitHub_Trending/un/unocss创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考