Bun canary React 构建后模板字符串缺片段
Bun 特定 canary 同时启用 React Compiler 和语法压缩时,模板字符串可能丢失常量与后续文本。单独关闭 syntax 压缩,并核对最终属性和业务文字。
开发页面正常,Bun 生产构建后的 SVG 却不显示,检查 viewBox 发现四个值只剩两个;同一次构建里,模板字符串中的固定数字或后半段文字也可能消失。若同时启用了 React Compiler 与语法压缩,应先隔离这两个开关的组合。
Bun 1.4.4-canary.1+da867c60b 有这条具体失败路径。例如,${0} ${0} ${size} ${size} 的前两个常量片段丢失,最终只剩两个 size;${value} of ${1 + 1} done 也可能丢掉折叠后的数字与后续文字。它不是浏览器不支持模板字符串。
对比最终配置,不只看命令行一个开关
分别核对只启用 React Compiler、只启用语法压缩、同时启用二者的产物。单独使用时正确、组合后丢片段,才符合这里的范围;应用本来就传错了 size,仍要按组件数据排查。
--minify 会同时打开空白、标识符和语法压缩。因此,即使命令里没有写 --minify-syntax,总开关或上层构建工具也可能让语法压缩生效。还应查后续是否有另一个打包步骤再次压缩同一产物。
暂时停用这一步语法压缩
在程序化构建中,可以保留 React Compiler,并明确关闭 syntax。下面仅展示需要合入原构建配置的选项:
reactCompiler: true,
minify: {
syntax: false,
whitespace: true,
identifiers: true,
},
这三个压缩细项是独立配置。使用 CLI 时,应撤掉总的 --minify,按项目需要显式保留空白和标识符压缩,再核对最终命令没有重新加入语法压缩。不要一边写 syntax: false,一边让上层脚本覆盖成总开关。
如果构建由框架接管,只能在它支持的配置入口调整,不要直接改产物里少掉的数字。手工修一个 SVG 会遗漏相同优化作用到其他模板字符串的情况,下一次构建也会覆盖修改。
这里的处理是避开已观察到的组合路径。该组合的具体表现限定于上述 canary,不应把所有正式版的模板字符串异常都按同一路径处理。
检查被使用的值,而不只是构建退出码
保留失败产物,再生成到另一个目录比较。SVG 应检查最终 viewBox 的四项数值与图形呈现,业务文字应检查常量、空格和结尾是否完整。产物里表达式被改写本身不算失败,关键是运行结果是否与输入语义一致。
还应覆盖有动态值、纯常量和常量夹在动态值之间的模板字符串,以及应用实际部署的那份文件。构建退出码零只能证明工具完成了生成,不能证明字符串没有被错误优化。需要恢复原压缩配置时,使用保留的配置与产物回退,再针对相同组合重新验收。


