Minify

The Minify plugin strips comments and collapses whitespace in inline <script> and <style> content during SSR rendering. Its built-in minifiers have no native dependencies.

Runtime behavior

The Minify plugin hooks into the SSR render pipeline and minifies innerHTML content that is at least 20 characters long:

• Inline scripts: Strips comments, preserves string literals, and retains line breaks in common automatic-semicolon-insertion cases
• Inline styles: Strips comments, collapses whitespace, removes trailing semicolons, and strips leading zeros
• JSON scripts: Strips insignificant whitespace from application/ld+json, application/json, speculationrules, and importmap values without changing their tokens

It never increases content length.

Content stored in textContent is not minified. Use innerHTML or the string shorthand for trusted static code when you want this plugin to process it.

The built-in JavaScript minifier is a lightweight scanner, not a full parser. Use a custom parser-based minifier for complex syntax or code that has not been covered by your tests.

Setup

Register the plugin when creating your head instance:

import { MinifyPlugin } from 'unhead/plugins'

const head = createHead({
  plugins: [
    MinifyPlugin()
  ]
})

Options

export interface MinifyPluginOptions {
  /**
   * Custom JS minifier function. Set to `false` to disable JS minification.
   * Defaults to built-in lightweight minifier.
   */
  js?: false | ((code: string) => string)
  /**
   * Custom CSS minifier function. Set to `false` to disable CSS minification.
   * Defaults to built-in lightweight minifier.
   */
  css?: false | ((code: string) => string)
  /**
   * Minify JSON script types (application/ld+json, application/json,
   * speculationrules, importmap).
   * @default true
   */
  json?: boolean
  /**
   * Omit the line breaks between rendered tags, producing a single line of output.
   * Only removes the separators between tags; newlines inside inline content are
   * left to the minifiers above.
   * @default false
   */
  omitLineBreaks?: boolean
}

Omit Line Breaks

By default tags render one per line. Set omitLineBreaks to render them on a single line. This only drops the separators between tags, so newlines inside inline <script>/<style>/JSON-LD content are preserved (the minifiers handle those):

MinifyPlugin({
  omitLineBreaks: true,
})

Disable Specific Minifiers

MinifyPlugin({
  js: false,   // skip script minification
  json: false, // skip JSON-LD minification
})

Custom Minifiers

Provide your own synchronous minifier function for heavier optimization:

MinifyPlugin({
  js: (code) => myCustomJSMinify(code),
  css: (code) => myCustomCSSMinify(code),
})

The ssr:render hook runs synchronously, so custom minifiers must be synchronous.

Build-Time Minification

For build-time minification of static string literals inside useHead() / useServerHead() calls, enable the minify option on the unified Vite plugin. This runs at build time using heavier tools (rolldown/esbuild for JS, lightningcss for CSS) that never enter your SSR runtime bundle.

import vue from '@vitejs/plugin-vue'
import { Unhead } from '@unhead/vue/vite'
import { createJSMinifier } from '@unhead/bundler/minify/rolldown'
import { createCSSMinifier } from '@unhead/bundler/minify/lightningcss'

export default defineConfig({
  plugins: [
    vue(),
    Unhead({
      minify: {
        js: createJSMinifier(),
        css: createCSSMinifier(),
      },
    }),
  ],
})

Available minifier backends:

Standalone Minifier Utilities

The built-in minifiers are also available as standalone functions for use in custom build pipelines:

import { minifyCSS, minifyJS, minifyJSON } from 'unhead/minify'

const minifiedJS = minifyJS('// comment\nvar x = 1;')
const minifiedCSS = minifyCSS('body { margin: 0; }')
const minifiedJSON = minifyJSON('{ "name": "test" }')

Related

• Build Plugins: Vite and webpack build optimizations
• Validate Plugin: Catch common SEO and head tag mistakes
• Inner Content: Work with innerHTML and textContent