如何压缩JS Bundle中的HTML字面量？

问题根源 #

Terser这类JS压缩工具默认仅处理JS语法层面的冗余（比如变量名缩短、无用代码删除），但不会识别模板字符串内部的HTML结构，因此不会主动压缩其中的空白字符。要解决这个问题，需要针对模板字符串里的HTML内容做专门处理，以下是几种可行方案：

方案1：使用Babel插件自动压缩模板字符串 #

babel-plugin-minify-template-strings是专门针对模板字符串的压缩插件，能自动移除其中的多余换行、缩进，合并连续空白，同时保留HTML的结构逻辑。

1. 安装插件：

npm install babel-plugin-minify-template-strings --save-dev

2. 修改Babel配置文件（比如babel.config.json或.babelrc）：

{
  "presets": ["@babel/preset-env"],
  "plugins": ["minify-template-strings"]
}

配置完成后，执行npm run build时，Babel会在转译阶段自动压缩所有模板字符串中的空白，无需修改业务代码。

方案2：抽离HTML文件，用Webpack Loader压缩 #

如果模板字符串中的HTML内容较复杂，推荐将HTML抽成单独文件，用html-loader处理，既能自动压缩空白，也能让代码结构更清晰。

1. 安装依赖：

npm install html-loader ejs-loader --save-dev

ejs-loader用于支持HTML文件中的变量插值。

2. 创建单独的HTML模板文件（比如breadcrumbs.html）：

<ul class="breadcrumb mr-breadcrumb">
    <li class="breadcrumb-item">
        <a href="/">HostShop</a>
    </li>
    <% if (breadcrumbLabel) { %>
    <li class="breadcrumb-item">
        <span><%= breadcrumbLabel %></span>
    </li>
    <% } %>
</ul>

3. 修改Webpack配置，添加Loader规则：

module.exports = {
  // ...其他配置
  module: {
    rules: [
      {
        test: /\.html$/,
        use: [
          {
            loader: 'html-loader',
            options: {
              minimize: true // 开启HTML压缩
            }
          },
          {
            loader: 'ejs-loader',
            options: {
              esModule: false
            }
          }
        ]
      }
    ]
  }
}

4. 在JS中导入并使用模板：

import getBreadcrumbsHtml from './breadcrumbs.html';
breadcrumbsElement.innerHTML = getBreadcrumbsHtml({ breadcrumbLabel });

方案3：手动编写压缩函数（无额外依赖） #

如果不想添加新的依赖，可以写一个简单的工具函数，在赋值innerHTML时手动压缩HTML空白：

function minifyHtml(htmlStr) {
  return htmlStr
    .trim() // 移除首尾空白
    .replace(/\n\s+/g, '') // 移除换行及后续的缩进
    .replace(/\s+/g, ' '); // 将连续空白替换为单个空格
}

// 使用示例
breadcrumbsElement.innerHTML = minifyHtml(`
        <ul class="breadcrumb mr-breadcrumb">
            <li class="breadcrumb-item">
                <a href="/">HostShop</a>
            </li>
            ${breadcrumbLabel ? `
            <li class="breadcrumb-item">
                <span>${breadcrumbLabel}</span>
            </li>` : ''}
        </ul>
    `);

方案选择建议 #

• 小型项目或不想修改代码结构：优先选方案1，配置简单，自动处理所有模板字符串。
• HTML内容复杂、追求代码可维护性：选方案2，分离HTML和JS逻辑，更易迭代。
• 临时快速解决问题：用方案3，零依赖，直接添加函数即可。

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