ViteJS构建原生JS项目时，如何压缩HTML内部空白？

Vite默认仅自动压缩JS/CSS资源，HTML的空白压缩需要通过额外插件实现，以下是两种常用的解决方案：

方案一：使用vite-plugin-html-minifier-terser #

1. 安装插件

npm install vite-plugin-html-minifier-terser --save-dev

2. 修改vite.config.js配置，引入并启用插件：

import { defineConfig } from 'vite';
import htmlMinifierTerser from 'vite-plugin-html-minifier-terser';
import path from 'path';

export default defineConfig({
    build: {
        manifest: true,
        rollupOptions: {
            input: [
                //css/js files
            ],
        },
        target: 'esnext',
    },
    base: '/dist/',
    resolve: {
        alias: {
            '@modules': path.resolve(__dirname, 'assets/revamp/js/modules')
        }
    },
    plugins: [
        htmlMinifierTerser({
            collapseWhitespace: true, // 移除空白字符
            removeComments: true, // 移除HTML注释
            minifyCSS: true, // 压缩HTML内联CSS
            minifyJS: true // 压缩HTML内联JS
        })
    ]
});

方案二：使用vite-plugin-html（功能更丰富） #

1. 安装插件

npm install vite-plugin-html --save-dev

2. 修改配置文件：

import { defineConfig } from 'vite';
import { createHtmlPlugin } from 'vite-plugin-html';
import path from 'path';

export default defineConfig({
    build: {
        manifest: true,
        rollupOptions: {
            input: [
                //css/js files
            ],
        },
        target: 'esnext',
    },
    base: '/dist/',
    resolve: {
        alias: {
            '@modules': path.resolve(__dirname, 'assets/revamp/js/modules')
        }
    },
    plugins: [
        createHtmlPlugin({
            minify: {
                collapseWhitespace: true,
                keepClosingSlash: true,
                removeComments: true,
                removeRedundantAttributes: true,
                removeScriptTypeAttributes: true,
                removeStyleLinkTypeAttributes: true,
                useShortDoctype: true,
                minifyCSS: true,
                minifyJS: true
            }
        })
    ]
});

配置完成后重新执行npm run build，生成的HTML文件就会被压缩，去除多余空白和注释。

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