vite-plugin-minify-gql

Minify GraphQL gql tagged template literals at build time by stripping whitespace and comments — reducing bundle size with zero runtime cost.

// Source
const QUERY = gql`
  query GetUser($id: ID!) {
    # fetch the user
    user(id: $id) {
      id
      name
      email
    }
  }
`

// Output (after build)
const QUERY = gql`
  query GetUser($id: ID!) {
    user(id: $id) {
      id
      name
      email
    }
  }
`

Install

pnpm add -D @c0b41/vite-plugin-minify-gql

Usage

// vite.config.ts
import { defineConfig } from 'vite'
import minifyGql from '@c0b41/vite-plugin-minify-gql'

export default defineConfig({
  plugins: [minifyGql()],
})

Options

| Option | Type | Default | Description | | ------ | ---------- | -------------------- | -------------------------------------- | | tags | string[] | ["gql", "graphql"] | Tagged template literal tags to minify |

// Custom tags (e.g. if you use a different import alias)
minifyGql({ tags: ['gql', 'graphql', 'GQL'] })

How it works

1. Fast early exit — a regex checks if the file even contains a relevant tag before doing any real work, skipping the vast majority of files instantly
2. parse-literals — finds all tagged template literals and their exact character positions in the source
3. graphql/stripIgnoredCharacters — strips whitespace, comments, and redundant characters from the GraphQL string
4. magic-string — patches the minified string back into the source at the correct positions while preserving sourcemaps

Requirements

• Vite 5, 6, 7, or 8
• Node.js >= 20.19.0
• pnpm >= 9