从前端代码压缩说起——它在构建流程中扮演着不可或缺的角色，但同时也是一把双刃剑。一套精心配制的 Babel 兼容方案，可能会因为压缩工具的“反向优化”而瞬间瓦解，最终在低版本浏览器上抛出诡异的语法错误。作为前端基建的守护者，理解并正确配置 Terser 的兼容性逻辑，才算是真正构建起那道坚实的防线，让业务开发团队能安心聚焦逻辑本身，不用再为底层构建的暗坑操心。 ### terser的ecma选项 Terser 的 ecma 选项，直接决定了输出代码遵循的 ECMAScript 版本标准。大多数常规兼容场景（ES3 除外），只需要根据目标浏览器来配置这个值即可。 举个例子，如果要兼容现代浏览器，直接配 ecma: 2015 或更高版本，输出的就是 ES6 语法；要是目标用户中还包含稍旧一些的设备，配置 ecma: 5 就能确保代码符合 ES5 标准。前端基建在统一构建配置时，理想的实践是：根据业务层声明的 browserslist 兼容范围，自动映射并推导出一个合适的 ecma 值传给 Terser，这样才能在体积与兼容性之间取得最佳的平衡点。 ### terser的ie8选项 当兼容目标下沉至 IE8 或者早期的非 IE 低版本浏览器（比如那些还处于 ES3 时代的 Chrome）时，情况就复杂多了。通常在 Babel 中要完全兼容 IE8，需要引入一大批插件： 处理 ES3 保留字问题的插件： - @babel/plugin-transform-member-expression-literals - @babel/plugin-transform-property-literals - @babel/plugin-transform-reserved-words（避免将变量名声明为保留字） 处理 IE8 JScript 引擎特有 Bug 的插件： - babel-plugin-anonymize-function-expression（函数表达式匿名化） - @babel/plugin-transform-jscript（修复命名函数表达式的作用域泄漏） - babel-plugin-transform-catch-scoping（修复 catch 子句的参数作用域泄漏） 如果我们在 Terser 中开启了 ie8: true，它相当于自动集成了除 @babel/plugin-transform-reserved-words 以外的所有上述插件的功能。Terser 会自动处理属性访问的“反向优化”，并绕开 JScript 的各种暗坑。 不过，保留字的处理这里藏着一个极具迷惑性的边界场景。很多人会觉得：变量名压缩后都是 a、b、c 这种单字符，怎么可能跟 ES3 保留字冲突？那这个想法就危险了。 Terser 默认并不会避开 ES3 的保留字。实测下来，当代码中的局部变量达到 13992 个时，Terser 会按照其 base54 算法的顺序，恰好把一个变量名混淆成 ES3 保留字 int。低版本浏览器遇到这个，会直接抛语法错误。 因此，就算是开启了 ie8: true，前端基建也必须强制补充以下配置，通过 mangle.reserved 拦截这颗定时冲击波： mangle: { reserved: ['abstract', 'boolean', 'byte', 'char', 'double', 'final', 'float', 'goto', 'int', 'long', 'native', 'package', 'private', 'protected', 'public', 'short', 'static', 'synchronized', 'throws', 'transient', 'volatile'] } 如果目标不是 IE8，而是非 IE 的低版本浏览器（只需要处理 ES3 保留字，不需要处理 JScript Bug），Terser 并没有提供专门的独立选项。但开启 ie8: true 并配合上面的 mangle.reserved，是可以完整覆盖 ES3 兼容性问题的。 ### terser的safari10选项 除了古老的 ES3 兼容问题，现代浏览器的某些特定版本也会因为压缩而引发兼容性灾难。Safari 10~11 的 Ja vaScriptCore 引擎存在严重的 ES6 块级作用域解析 Bug，典型报错是 Cannot declare a let variable twice。 Babel 不会去修复符合 ECMAScript 规范的代码，只有 Terser 的 safari10: true 选项，能在变量混淆时巧妙避开这种同名 let 声明模式，并对 await 表达式做保护性包裹。 判断是否要开启这个选项时，有一个关键的版本节点：Safari 从 10.1 开始支持 ES Module（即