vite-plugin-capo

!npm
!downloads
!license

A lightweight Vite plugin to reorder your at build time using capo.js rules.

The order of elements in your affects how browsers load and render your page. Poor ordering can block rendering or delay resources. Optimizing your will increase the perceived performance of your site and can decrease the time of first render by up to 400ms for large, unoptimized pages.

Features

- Automatically reorders your HTML tags at build time.
- Optimizes tag order for improved web performance using capo.js best practices.
- Zero configuration required.
- Written in TypeScript with native ESM support.

Installation

``bash
npm i -D vite-plugin-capo
`

Usage

Add the plugin to your vite.config.ts:

`ts
import { defineConfig } from 'vite';
import { capo } from 'vite-plugin-capo';

export default defineConfig({
plugins: [capo()],
});
`

$3

To test the plugin, run vite build after including it in your vite.config.ts and then run vite preview to see your production-ready page. Your should now be sorted following the capo.js rules.

> Note: This plugin only runs during vite build. It does not affect local development when using vite dev.

For further testing, it is recommended to install the capo.js extension to validate your results.

How It Works

This plugin sorts tags into the following order:

1. Pragma Directives (, , , and )
2. Title (



`

$3

`html








`

Compatibility

- Requires Vite v2+
- Supports Vite apps using HTML entry points, such as React, Vue, Preact, or Svelte
- Not compatible with SSR setups, as they bypass index.html generation
- Not compatible with Astro — use astro-capo

Why This Is a Vite-Only Plugin

This plugin is Vite-specific because it uses the transformIndexHtml hook, which is part of Vite's extended plugin API.

Unlike Rollup, Vite supports transforming HTML files during the build process. The transformIndexHtml hook is triggered when Vite processes index.html, allowing this plugin to reorder ` tags based on performance best practices defined by capo.js.

License

MIT

Credits

This plugin is inspired by capo.js by Rick Viscomi.