Sveltekit：如何在生产构建中移除app.html的HTML注释？

这里提供两种可靠的实现方式，适配你的需求：

方法一：Vite插件实时处理（推荐） #

SvelteKit基于Vite构建，我们可以通过自定义Vite插件拦截app.html的编译过程，只在生产环境移除注释，开发环境完全保留。

在项目根目录的vite.config.js中添加以下代码：

import { sveltekit } from '@sveltejs/kit/vite';

/** @type {import('vite').UserConfig} */
const config = {
  plugins: [
    sveltekit(),
    {
      name: 'remove-html-comments',
      transformIndexHtml(html) {
        // 仅在生产构建时执行注释移除逻辑
        if (process.env.NODE_ENV === 'production') {
          // 正则匹配并移除普通HTML注释，保留条件注释（如<!--[if IE]>）
          return html.replace(/<!--(?!\s*(?:\[if [^\]]+]|<!|>))(?:.|\n)*?-->/g, '');
        }
        // 开发环境直接返回原HTML
        return html;
      }
    }
  ]
};

export default config;

这个方案的优势是无需额外的构建后步骤，直接在Vite的构建流程中处理，效率更高。

方法二：构建后脚本处理（你提到的正则方案） #

如果偏好构建后再处理的方式，可以通过postbuild脚本自动执行注释移除：

1. 新建scripts/remove-html-comments.js脚本文件：

const fs = require('fs');
const path = require('path');

// 定位生产构建后生成的app.html路径
const htmlFilePath = path.join(__dirname, '../.svelte-kit/output/client/app.html');

// 读取、处理、写入文件
let htmlContent = fs.readFileSync(htmlFilePath, 'utf8');
htmlContent = htmlContent.replace(/<!--(?!\s*(?:\[if [^\]]+]|<!|>))(?:.|\n)*?-->/g, '');
fs.writeFileSync(htmlFilePath, htmlContent, 'utf8');

console.log('✅ 已移除app.html中的HTML注释');

2. 修改package.json的脚本配置，添加postbuild钩子：

{
  "scripts": {
    "build": "vite build",
    "postbuild": "node scripts/remove-html-comments.js"
  }
}

每次执行npm run build完成后，脚本会自动处理生成的app.html文件。

关键细节 #

• 上述正则表达式特意排除了条件注释（如<!--[if IE 9]>），避免破坏这类特殊的兼容逻辑；如果不需要保留条件注释，可以简化正则为/<!--[\s\S]*?-->/g。
• 开发环境下，无论是Vite插件还是构建后脚本，都不会触发注释移除逻辑，确保注释完整保留。

内容的提问来源于stack exchange，提问作者Eli O.