如何避免Html-Minifier-Terser中Terser为被忽略的Handlebars占位符添加多余分号

我碰到过类似的场景，本质上这是Html-Minifier和Terser的配合盲区——你设置的ignoreCustomFragments只是让Html-Minifier自己跳过HBS代码块，但它并没有把这个忽略规则同步给内部调用的Terser。所以Terser在处理script内容时，会把{{...}}这种非JS语法的片段当成有问题的代码结构，自动插入逗号或分号来“修复”它认为的语法错误，最终导致渲染后出现无效的,或;。

下面给你几个不同层级的解决方案，从临时修复到长远优化都有：

最推荐：用占位符隔离HBS片段（从根源解决） #

思路是先把所有HBS代码块替换成Terser不会解析的临时占位符，让Terser只处理纯JS内容，压缩完成后再把占位符换回原HBS代码。需要用到gulp-replace插件：

const replace = require('gulp-replace');
const htmlmin = require('gulp-html-minifier-terser');

// 全局存储HBS片段，避免占位符冲突
global.hbsFragments = {};
const HBS_PLACEHOLDER_PREFIX = '__HBS_TEMP__';

gulp.task('minify-hbs', () => {
  return gulp.src('src/**/*.hbs')
    // 第一步：替换HBS片段为唯一占位符
    .pipe(replace(/{{[\s\S]*?}}/g, (match) => {
      const uniqueKey = `${HBS_PLACEHOLDER_PREFIX}${Date.now()}${Math.random().toString(36).slice(2)}`;
      global.hbsFragments[uniqueKey] = match;
      return uniqueKey;
    }))
    // 第二步：正常压缩，此时Terser看不到HBS代码
    .pipe(htmlmin({
      collapseWhitespace: true,
      conservativeCollapse: true,
      minifyJS: {
        compress: {
          sequences: true, // 可以放心开启所有压缩选项了
          conditionals: true,
          join_vars: true
        },
        mangle: true,
        output: {
          quote_style: 3
        }
      },
      removeComments: true
    }))
    // 第三步：把占位符换回原HBS片段
    .pipe(replace(new RegExp(HBS_PLACEHOLDER_PREFIX + '[a-z0-9]+', 'gi'), (match) => {
      return global.hbsFragments[match] || match;
    }))
    .pipe(gulp.dest('dist'));
});

这个方案彻底隔离了HBS和JS压缩的冲突，你可以正常使用所有Terser的压缩优化选项，不用担心多余标点的问题。

临时修复：调整Terser配置减少误判 #

如果不想引入额外插件，可以通过关闭Terser中会自动插入标点的压缩选项，尽量减少错误：

.pipe(htmlmin({
  collapseWhitespace: true,
  conservativeCollapse: true,
  minifyJS: {
    compress: {
      sequences: false, // 关闭语句合并，避免自动加逗号
      conditionals: false, // 关闭条件判断压缩
      join_vars: false // 关闭变量合并
    },
    output: {
      semicolons: true, // 保留分号，避免语法错误
      quote_style: 3
    },
    mangle: false // 暂时关闭混淆，减少语法误判
  },
  removeComments: true,
  ignoreCustomFragments: [ /{{[\s\S]*?}}/ ]
}))

这个方案虽然不能完全避免多余分号，但至少不会出现导致浏览器报错的逗号，而且多余的分号浏览器会自动忽略，不会影响功能。

长远优化：重构动态JS逻辑 #

正如你提到的，在script标签内混合HBS条件渲染JS确实不是现代最佳实践。长远来看，建议把动态逻辑和模板分离：

1. 在HBS模板中只传递动态数据，比如用data属性：

<div id="app" 
     data-has-foo="{{foo}}" 
     data-has-bar="{{bar}}" 
     data-has-three="{{three}}">
</div>
<script src="/js/app.js"></script>

2. 在独立的JS文件中读取数据并执行逻辑：

const appEl = document.getElementById('app');
const hasFoo = appEl.dataset.hasFoo === 'true';
const hasBar = appEl.dataset.hasBar === 'true';
const hasThree = appEl.dataset.hasThree === 'true';

if (hasFoo) console.log('foo');
if (hasBar) console.log('bar');
if (hasThree) console.log('three');

这种方式不仅彻底解决了压缩冲突，还让代码结构更清晰，更易于维护和调试。

内容的提问来源于stack exchange，提问作者scipilot