SWC项目中的HTML标签转义问题解析

在JavaScript代码压缩过程中，HTML标签的转义处理是一个容易被忽视但十分重要的细节。本文将以SWC项目为例，深入分析这个问题及其解决方案。

问题背景

在Web开发中，我们经常需要将JavaScript变量内联到HTML模板中。当这些变量包含类似HTML结束标签的字符串时，如果不进行适当处理，就会导致HTML解析错误。

例如以下代码：

<script><%= someVar %></script>

如果someVar包含</script>字符串，未经转义的输出会提前终止脚本块，导致页面渲染异常。

不同工具的处理方式

主流JavaScript压缩工具对此有不同的处理策略：

1. Terser：会自动将</script>转义为<\/script>
2. esbuild：同样实现了自动转义机制
3. SWC：在1.9.1版本中尚未实现此功能

技术影响

未转义的HTML结束标签会导致：

• 脚本块提前终止
• HTML结构破坏
• 后续JavaScript代码被当作HTML解析
• 可能引发跨站脚本安全问题

解决方案

SWC项目团队已经意识到这个问题，并在后续版本中通过PR#9729实现了与Terser和esbuild一致的转义行为。新版本会将：

export const foo = "</script>"

压缩为：

export const foo = "<\/script>"

开发者建议

对于使用SWC的项目，建议：

1. 检查项目中是否存在内联JavaScript到HTML的情况
2. 升级到实现了此修复的SWC版本
3. 在升级前，可以手动添加转义字符作为临时解决方案

这个问题虽然看似简单，但对于前端工程的稳定性和安全性至关重要，值得开发者关注。