How to Set Up Web Page Minification With VitePress

Published on Oct 20, 2026 (updated Nov 3, 2026), filed under development, html, performance, optimization. (Share this post, e.g., on Mastodon.)

This post originally used HTML Minifier Next. It was updated when HTML Minifier Next merged with and continued as HTML Minifier.

You’re running a VitePress site—and want to speed it up and minify your HTML (and CSS and JS)?

Out of the box, VitePress minifies CSS and JS assets, and the Vue-rendered body of your pages comes out fairly compact. The rest of the HTML, however, isn’t minified (not when testing with VitePress 1.6.4). HTML Minifier, which compares strongly with other minifiers, is one minifier to solve that.

It takes two steps to set up HTML Minifier, which you can customize further depending on your needs and preferences:

1. Install

Install HTML Minifier in your project (as a dev dependency):

npm i -D html-minifier

2. Configure

Add the following to your VitePress configuration (.vitepress/config.mts or similar):

// Close to other imports:
import { minify } from 'html-minifier';

// In `defineConfig` block:
async transformHtml(code) {
  return minify(code, {
    preset: 'comprehensive',
    removeComments: false // Vue needs comment markers for hydration
    // Options: https://github.com/j9t/html-minifier?tab=readme-ov-file#options-quick-reference
  });
},

If your Markdown contains Vue markup (like components or v-if elements) with leading or trailing whitespace in text, also add conservativeCollapse: true, to avoid hydration mismatches.

And this is it: Your HTML now gets minified with every vitepress build.

The configuration uses HTML Minifier’s “comprehensive” preset for a pretty competitive result, but you can switch to the “conservative” preset or fully customize minification.

The one exception to the preset is to keep comments: Vue uses comments like <!--[--> and <!--]--> to match the server-rendered HTML when it hydrates a page. Removing them leads to hydration mismatches. (As Vue already strips all other comments in production, there’s nothing to lose here.)

transformHtml only runs when building—the HTML from vitepress dev stays as is.

About Me

I’m Jens (long: Jens Oliver Meiert), and I’m an engineering lead, guerrilla philosopher, and indie publisher. I’ve worked as a technical lead and manager at various companies (e.g., Google); I’m an active web and tool developer (code optimization, digital defense), a contributor to web standards (like HTML, CSS, WCAG), and a book author (O’Reilly, dxsrc). You’ll like my work if you value principled, pragmatic problem-solving. Let’s connect.