Rolldown 与 esbuild 行为对比JSX Preserve 模式下组件名大小写与 Minify 的相互作用【免费下载链接】rolldownFast Rust bundler for JavaScript/TypeScript with Rollup-compatible API.项目地址: https://gitcode.com/GitHub_Trending/ro/rolldown本篇技术指南以crates/rolldown/tests/esbuild/loader/jsx_preserve_capital_letter_minify/diff.md测试快照为分析主体解读 Rolldown 在 JSX 保留preserve模式与压缩minify同时开启时对以大写字母开头的 JSX 组件名的实际处理结果并与 esbuild 的输出进行逐行对比。读完本文你将理解 Rolldown 的 esbuild 兼容性测试体系如何组织、JSX 大小写语义在压缩阶段的微妙影响以及如何阅读和判断这类行为差异快照。从一份 diff 快照开始测试在比什么该测试目录位于crates/rolldown/tests/esbuild/loader/下属于 Rolldown 从 esbuild 官方测试用例移植而来的兼容性测试集。diff.md不是人工编写的说明文档而是测试框架自动生成的行为差异快照其核心价值在于以固定的格式记录同一份输入在 esbuild 与 rolldown 两种打包器下的产物差异便于开发者一眼定位兼容性差距。完整的测试用例由同目录下四份文件构成文件作用_config.json测试输入与选项配置入口、transform.jsx、minifyentry.jsx打包入口源码foo.js被入口 import 的依赖模块diff.md自动生成的 esbuild 与 rolldown 输出对比快照artifacts.snaprolldown 侧最终产物的正式快照快照头部source: crates/rolldown_testing/src/integration_test.rs表明该快照由 Rolldown 的集成测试基础设施生成测试框架代码位于 crates/rolldown_testing/src/integration_test.rs。输入与配置一个故意刁难的 JSX 用例先看_config.json的完整配置{ config: { input: [ { name: entry, import: entry.jsx } ], transform: { jsx: preserve }, minify: true }, expectExecuted: false }三个关键点决定了这个用例的行为入口以entry.jsx为打包入口产物命名为entry这也是 diff 中显示 rolldown 产物为entry.js的原因jsx: preserveJSX 转换模式设置为保留即打包器不把 JSX 语法降级为React.createElement调用而是将 JSX 原样保留在产物中交由下游如 Babel 或其他运行时处理minify: true同时开启压缩标识符重命名、空白移除、注释删除等优化会被应用expectExecuted: false该用例不要求产物可实际执行仅关注产物文本层面的差异。入口源码 entry.jsx 与依赖 foo.js 如下// entry.jsx import { mustStartWithUpperCaseLetter as XYYYY } from ./foo console.log(XYYYY tag-must-start-with-capital-letter /)// foo.js export class mustStartWithUpperCaseLetter {}用例刻意构造了以大写字母开头的组件名导入的类被重命名为XYYYY同样以大写开头并在 JSX 中以XYYYY ... /形式使用同时通过 attributetag-must-start-with-capital-letter强化测试意图。这是 JSX 语义的关键规则——以小写字母开头的标签被解析为原生 HTML/SVG 元素以大写字母开头的标签被解析为用户自定义组件。输出对比两份产物逐行解读diff.md中完整记录了双方的产物esbuild 输出// foo.js var Y class { }; // entry.jsx console.log(Y tag-must-start-with-capital-letter /);rolldown 输出var eclass{};console.log(e tag-must-start-with-capital-letter/);两个观察点是否保留模块分隔与注释esbuild 保留了// foo.js、// entry.jsx注释以及类体内部的换行与缩进说明 esbuild 的 minify 不会删除这类模块边界注释且类声明仍保持多行形式rolldown 则完全压缩为单行var eclass{};模块注释与空白全部移除。标识符重命名的差异esbuild 将类名重命名为Y仍为大写JSX 标签随之保持Y ...rolldown 将类名压缩为e小写JSX 标签变为e ...。差异一类名重命名为小写的潜在语义风险真正值得深挖的是第二点。在 JSX 保留模式下产物中的 JSX 标签名就是最终交付给下游编译器的语法。XYYYY原本因大写开头而被视为用户组件重命名为e后按 JSX 规范下游编译器会将其解析为名为e的原生元素标签而非组件引用这可能导致运行时行为与源码意图不一致。esbuild 在压缩时通过保留大写首字母Y规避了这一风险而 rolldown 的压缩器在本次快照中选择了通用最短标识符e从而产生行为差异。需要说明的是这是一份行为差异快照记录的是测试捕获时的实际状态并不代表 rolldown 有意忽略 JSX 大小写语义。此类快照正是兼容性测试体系的看板——每一条 diff 都对应一个需要人工裁决的兼容性议题。差异二产物文件名与模块结构的呈现diff 头部还透露了文件名信息esbuild 产物标记为/out.jsesbuild 侧默认产物名rolldown 标记为entry.js由_config.json中name: entry决定。此外 esbuild 保留了 import 依赖foo.js的模块边界注释说明其产物中类定义与 JSX 使用仍分属不同源码文件rolldown 则把两者合并进同一份单行产物模块边界在压缩后完全不可见。快照背后的验证机制artifacts.snap是 rolldown 侧的正式快照内容与diff.md中 rolldown 栏完全一致--- source: crates/rolldown_testing/src/integration_test.rs --- # Assets ## entry.js js var eclass{};console.log(e tag-must-start-with-capital-letter/);这解释了快照体系的运行逻辑artifacts.snap 作为回归基准防止 rolldown 自身产物意外漂移diff.md 则固定呈现与 esbuild 的横向对比。当开发者修改压缩器或 JSX 相关逻辑后运行该测试即可通过两份快照的变动迅速判断行为是有意变更还是意外回归。 ## 同一系列的横向参照 该用例并非孤立存在loader/ 目录下还有两个同源变体可用于交叉验证 - jsx_preserve_capital_letter/相同输入但 _config.json 中**不开启 minify**仅 jsx: preserve。对照组的意义在于未压缩时 rolldown 是否保留了组件名的大写形式从而定位差异是否由 minify 阶段引入。 - jsx_preserve_capital_letter_minify_nested/配置与本文用例完全相同jsx: preserve 加 minify: true区别在于入口代码的嵌套结构用于验证差异在更深层 JSX 嵌套中是否一致复现。 ## 工程意义与阅读建议 综合来看这份 diff.md 的价值有三层 1. **测试即文档**它以最小可复现输入固化了JSX preserve minify 大写组件名这一组合场景任何开发者都可以从 [crates/rolldown/tests/esbuild/loader/](https://link.gitcode.com/i/d937a0ee1cd4f2051cff05bc48f3f659) 目录找到原始用例自行复跑验证 2. **兼容性风向标**esbuild 产物保留了 JSX 组件名的大写形式与模块注释而 rolldown 将其压缩为小写单行产物——这条 diff 是评估 rolldown 与 esbuild 在保留模式压缩行为上差距的具体样本 3. **回归防护**artifacts.snap 与 diff.md 双快照机制保证该场景的任何行为变化都会被显式暴露而不是静默改变。 如果你正在研究 rolldown 的 JSX 处理或压缩行为建议以本用例为入口同时对照未压缩的 jsx_preserve_capital_letter 用例即可快速勾勒出minify 是否、以及在何种程度上影响 JSX 保留模式输出的完整图景。【免费下载链接】rolldownFast Rust bundler for JavaScript/TypeScript with Rollup-compatible API.项目地址: https://gitcode.com/GitHub_Trending/ro/rolldown创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考