---
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."
canonical_url: "https://unhead.unjs.io/docs/head/guides/plugins/minify"
last_updated: "2026-08-11T00:39:04.366Z"
---

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()
  ]
})
```

</code-block>

## 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
}
```

</code-block>

### 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,
})
```

</code-block>

### Disable Specific Minifiers

<code-block>

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

</code-block>

### Custom Minifiers

Provide your own synchronous minifier function for heavier optimization:

<code-block>

```ts [Input]
MinifyPlugin({
  js: (code) => myCustomJSMinify(code),
  css: (code) => myCustomCSSMinify(code),
})
```

</code-block>

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(),
      },
    }),
  ],
})
```

</code-block>

Available minifier backends:

<table>
<thead>
  <tr>
    <th>
      Package
    </th>
    
    <th>
      Function
    </th>
    
    <th>
      Use case
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        @unhead/bundler/minify/rolldown
      </code>
    </td>
    
    <td>
      <code>
        createJSMinifier()
      </code>
    </td>
    
    <td>
      JS minification (Vite 8+)
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        @unhead/bundler/minify/esbuild
      </code>
    </td>
    
    <td>
      <code>
        createJSMinifier()
      </code>
    </td>
    
    <td>
      JS minification (Vite 7)
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        @unhead/bundler/minify/lightningcss
      </code>
    </td>
    
    <td>
      <code>
        createCSSMinifier()
      </code>
    </td>
    
    <td>
      CSS minification
    </td>
  </tr>
</tbody>
</table>

## 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" }')
```

</code-block>

## 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`