使用Vite.js压缩HTML：构建时移除注释与空白的方案

针对你的原生JS项目需求，可通过Vite的构建配置实现开发环境保留HTML注释、生产环境移除注释及冗余空白的效果，具体配置如下：

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

import { defineConfig } from 'vite';

export default defineConfig(({ mode }) => {
  return {
    build: {
      minify: mode === 'production' ? {
        js: 'terser',
        css: 'terser',
        html: {
          removeComments: true, // 移除HTML注释
          collapseWhitespace: true, // 移除多余空格、制表符
          collapseInlineTagWhitespace: true, // 合并内联标签的空白
          minifyCSS: true, // 压缩HTML内联的CSS
          minifyJS: true // 压缩HTML内联的JS
        }
      } : false
    }
  };
});

配置说明 #

• 利用mode参数区分环境：生产环境（production）启用自定义压缩规则，开发环境关闭压缩以保留注释和原始格式。
• html配置块中的参数直接作用于HTML压缩工具html-minifier-terser：
  • removeComments：精准移除<!-- -->格式的注释
  • collapseWhitespace：清理多余的空格、制表符和换行符
  • 额外的minifyCSS/minifyJS可进一步压缩HTML内联的样式和脚本，按需开启即可

该配置无需依赖额外Rollup插件，直接通过Vite原生构建参数即可实现需求，避免了复杂的插件配置。

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