---
title: "Minify"
description: "Minify inline script and style tag content during SSR rendering. Zero-dependency lightweight minifiers for edge and serverless, with support for custom minifiers."
navigation.title: "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:

::code-block

```ts [Input]
import { MinifyPlugin } from '@unhead/dynamic-import/plugins'

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

::

## Options

::code-block

```ts [Input]
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):

::code-block

```ts [Input]
MinifyPlugin({
  omitLineBreaks: true,
})
```

::

### Disable Specific Minifiers

::code-block

```ts [Input]
MinifyPlugin({
  js: false,   // skip script minification
  json: false, // skip JSON-LD minification
})
```

::

### Custom Minifiers

Provide your own synchronous minifier function for heavier optimization:

::code-block

```ts [Input]
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](/docs/head/guides/build-plugins/minify-transform). This runs at build time using heavier tools (rolldown/esbuild for JS, lightningcss for CSS) that never enter your SSR runtime bundle.

::code-block

```ts [vite.config.ts]
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:

| Package | Function | Use case |
| --------- | ---------- | ---------- |
| `@unhead/bundler/minify/rolldown` | `createJSMinifier()` | JS minification (Vite 8+) |
| `@unhead/bundler/minify/esbuild` | `createJSMinifier()` | JS minification (Vite 7) |
| `@unhead/bundler/minify/lightningcss` | `createCSSMinifier()` | CSS minification |

## Standalone Minifier Utilities

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

::code-block

```ts [Input]
import { minifyCSS, minifyJS, minifyJSON } from '@unhead/dynamic-import/minify'

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

::

## Related

- [Build Plugins](/docs/head/guides/build-plugins/overview): Vite and webpack build optimizations
- [Validate Plugin](/docs/head/guides/plugins/validate): Catch common SEO and head tag mistakes
- [Inner Content](/docs/head/guides/core-concepts/inner-content): Work with `innerHTML` and `textContent`