---
title: "Minify Transform"
description: "Pre-minify static inline script and style content inside useHead() calls at build time using rolldown, esbuild, or lightningcss."
canonical_url: "https://unhead.unjs.io/docs/head/guides/build-plugins/minify-transform"
last_updated: "2026-06-30T06:50:04.588Z"
---

**Quick Answer:** The minify transform runs at build time and minifies static string literals inside `useHead()` script and style tags. Uses heavier tools (rolldown/esbuild for JS, lightningcss for CSS) that never enter your SSR runtime bundle. Disabled by default, requires a minifier to be provided.

## What Does It Do?

The transform finds `innerHTML` and `textContent` properties on `script` and `style` objects inside `useHead()` calls, then minifies them at build time:

<code-group>

```ts [Before (source)]
useHead({
  script: [{
    innerHTML: `
      // Analytics initialization
      window.dataLayer = window.dataLayer || [];
      function gtag() { dataLayer.push(arguments); }
      gtag('js', new Date());
    `,
  }],
})
```

```ts [After (build output)]
useHead({
  script: [{
    innerHTML: "window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag(\"js\",new Date)",
  }],
})
```

</code-group>

The transform automatically skips `application/json`, `application/ld+json`, `speculationrules`, and `importmap` script types, and ignores strings shorter than 20 characters.

## Setup

The minify transform is disabled by default. Enable it by providing minifier functions:

```ts
import { Unhead } from '@unhead/vue/vite'
import { createJSMinifier } from '@unhead/bundler/minify/rolldown'
import { createCSSMinifier } from '@unhead/bundler/minify/lightningcss'

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

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

## Options

```ts
Unhead({
  minify: {
    // Custom JS minifier, or false to disable
    js: createJSMinifier(),
    // Custom CSS minifier, or false to disable
    css: createCSSMinifier(),
    // Override the shared file filter
    filter: {
      include: [/my-special-file/],
      exclude: [/some-file/],
    },
  },
})
```

<table>
<thead>
  <tr>
    <th>
      Option
    </th>
    
    <th>
      Type
    </th>
    
    <th>
      Default
    </th>
    
    <th>
      Description
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        js
      </code>
    </td>
    
    <td>
      <code>
        false | MinifyFn
      </code>
    </td>
    
    <td>
      —
    </td>
    
    <td>
      JS minifier function, or <code>
        false
      </code>
      
       to disable
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        css
      </code>
    </td>
    
    <td>
      <code>
        false | MinifyFn
      </code>
    </td>
    
    <td>
      —
    </td>
    
    <td>
      CSS minifier function, or <code>
        false
      </code>
      
       to disable
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        filter
      </code>
    </td>
    
    <td>
      <code>
        object
      </code>
    </td>
    
    <td>
      inherited
    </td>
    
    <td>
      Include/exclude file patterns (overrides the shared <code>
        filter
      </code>
      
      )
    </td>
  </tr>
</tbody>
</table>

### Custom Minifiers

You can provide any async function that takes a string and returns the minified result (or `null` to skip):

```ts
Unhead({
  minify: {
    js: async (code) => {
      const result = await myMinifier(code)
      return result.code
    },
  },
})
```

## Runtime Minification

For runtime SSR minification (not build-time), see the [Minify Plugin](/docs/head/guides/plugins/minify). The runtime plugin uses lightweight pure-JS minifiers suitable for edge and serverless environments.