How to Set Up Web Page Minification With VitePress

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

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 Next (HMN), which compares strongly with other minifiers, is one minifier to solve that.

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

1. Install

Install HMN in your project (as a dev dependency):

npm i -D html-minifier-next

2. Configure

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

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

// 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-next?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 HMN’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 engineering 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, Frontend Dogma).

I love trying things—in web development and engineering management, but also in politics and philosophy, where I hold to one idea in particular: that we can only be well if we take good care of everyone. Here on meiert.com I talk about some of my perspectives and experiences. (Interpret charitably but be critical—and share feedback and advice that makes my work better.)