Générateur de configuration du plugin de compression Vite

Générez la configuration vite-plugin-compression pour précompresser les ressources de build Vite en GZIP et Brotli - produit un vite.config.ts prêt à coller avec les imports propres au framework, la commande d'installation et la configuration de service nginx. Prend en charge React, Vue, Svelte, SolidJS et Vanilla JS. Sans inscription.

Vite Compression Plugin Config Generator

Generate vite-plugin-compression configuration for pre-compressing Vite build assets to GZIP and Brotli - produces ready-to-paste vite.config.ts, install command, and nginx serving configuration. Supports React, Vue, Svelte, SolidJS, and Vanilla JS.

Your Vite Project Configuration

Framework

Package Manager

Compression Algorithm

Compression Threshold

Files smaller than this are not compressed

GZIP Level

Brotli Quality

Original Files

Tips

Serving both GZIP and Brotli lets your server choose the best format per client. Brotli is served to modern browsers; GZIP is the fallback for older clients.

vite-plugin-compression only runs during production builds (vite build). Development mode (vite dev) is not affected.

// vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import viteCompression from 'vite-plugin-compression'
import zlib from 'node:zlib'

export default defineConfig({
  plugins: [
    react(),
    // GZIP compression - produces .gz files alongside originals
    viteCompression({
      algorithm: 'gzip',
      ext: '.gz',
      threshold: 10240,
      compressionOptions: { level: 6 },
      deleteOriginFile: false,
    }),
    // Brotli compression - produces .br files alongside originals
    viteCompression({
      algorithm: 'brotliCompress',
      ext: '.br',
      threshold: 10240,
      compressionOptions: { params: { [zlib.constants.BROTLI_PARAM_QUALITY]: 6 } },
      deleteOriginFile: false,
    }),
  ],
  build: {
    // Recommended: enable source maps for production debugging
    // sourcemap: true,

    // Rollup options for chunk splitting (improves compression)
    rollupOptions: {
      output: {
        // Split vendor chunks for better long-term caching
        manualChunks: {
          vendor: ['react', 'react-dom'], // adjust for your framework
        },
      },
    },
  },
})

vite-plugin-compression pre-compresses assets at build time - your server serves the .gz or .br files directly without runtime CPU overhead. Requires server-side support for gzip_static (nginx) or equivalent CDN configuration.

Pourquoi utiliser notre générateur de configuration du plugin de compression Vite ?

Configuration de compression Vite instantanée : sélectionnez votre framework, algorithme et niveaux de compression - le générateur produit instantanément un vite.config.ts prêt à coller avec vite-plugin-compression correctement configuré.
Générateur de configuration Vite en ligne sécurisé : toute la génération de configuration s'exécute entièrement dans votre navigateur. Aucun fichier de projet ni clé API n'est requis - entièrement privé et utilisable hors ligne.
3 formats de sortie : commande d'installation, vite.config.ts avec les imports propres au framework et extrait nginx.conf pour servir les fichiers précompressés - les trois se mettent à jour en temps réel.
100 % gratuit pour toujours : générez autant de configurations de compression Vite que nécessaire, entièrement gratuitement. Sans compte, sans abonnement, sans limite et sans publicité.

Qu'est-ce que le plugin de compression Vite ?

vite-plugin-compression est un plugin Vite qui précompresse les fichiers de sortie de build (bundles JavaScript, CSS, HTML) aux formats GZIP et/ou Brotli au moment du build. Au lieu de compresser les fichiers à chaque requête HTTP (compression à l'exécution), le serveur sert directement les fichiers .gz ou .br précompressés - ce qui élimine la charge CPU à l'exécution et produit des temps de réponse plus rapides. Notre générateur gratuit de configuration du plugin de compression Vite produit le bon vite.config.ts pour votre framework et vos réglages.

Comment fonctionne notre générateur de configuration de compression Vite

Sélectionnez vos réglages : choisissez votre framework (React, Vue, Svelte, etc.), l'algorithme de compression (GZIP, Brotli ou les deux), le seuil, les niveaux de compression et le gestionnaire de paquets.
Génération instantanée de la configuration : le générateur produit instantanément trois sorties - commande d'installation, vite.config.ts avec les imports propres au framework et extrait nginx.conf - toutes mises à jour en temps réel.
Copiez et appliquez : passez d'un onglet à l'autre, copiez la configuration pertinente et ajoutez-la à votre projet Vite et à la configuration de votre serveur.

Précompression vs compression à l'exécution

Compression à l'exécution (nginx gzip on) : compresse les fichiers à chaque requête - ajoute une charge CPU, augmente le temps de réponse et consomme des ressources serveur.
Précompression (vite-plugin-compression) : compresse les fichiers une seule fois au moment du build - aucune charge CPU à l'exécution, réponse instantanée et compatibilité avec tout serveur de fichiers statiques ou CDN.
Bonne pratique : utilisez les deux - précompressez avec vite-plugin-compression et activez gzip_static dans nginx comme solution de repli pour les fichiers sans version précompressée.
Compatibilité CDN : téléversez les fichiers .gz et .br vers S3, CloudFront ou Cloudflare R2 et servez-les avec le bon en-tête Content-Encoding.

GZIP vs Brotli pour les builds Vite

Brotli atteint une compression 15 à 25 % meilleure que GZIP pour les bundles JavaScript et CSS. Il est pris en charge par tous les navigateurs modernes (Chrome, Firefox, Edge, Safari 17.4+). GZIP est la solution de repli universelle - pris en charge par tous les navigateurs et serveurs. Pour une compatibilité maximale, générez les deux formats et laissez votre serveur choisir le meilleur pour chaque client. La compression Brotli en qualité 6 est un bon compromis entre taux de compression et temps de build.

Foire aux questions

vite-plugin-compression est un plugin Vite qui précompresse les fichiers de sortie de build (JS, CSS, HTML) au format GZIP et/ou Brotli au moment du build. Cela supprime la charge CPU de compression à l'exécution sur votre serveur et produit des fichiers plus légers pour la diffusion via CDN. Notre générateur de configuration en ligne gratuit produit le bon vite.config.ts - sans inscription.

La compression à l'exécution (nginx gzip on) compresse les fichiers à chaque requête, ce qui ajoute une charge CPU. La précompression (vite-plugin-compression + nginx gzip_static) compresse les fichiers une fois au moment du build et sert directement les fichiers .gz ou .br précompressés - aucune charge CPU à l'exécution et des temps de réponse plus rapides.

Oui. Le générateur de configuration de compression Vite est 100 % gratuit, sans inscription, sans abonnement et sans limite. Vous pouvez générer autant de configurations que nécessaire.

Utilisez GZIP et Brotli pour une compatibilité maximale. Brotli atteint une compression 15 à 25 % meilleure que GZIP et est pris en charge par tous les navigateurs modernes. GZIP est la solution de repli pour les navigateurs et outils plus anciens. Votre serveur (nginx avec gzip_static + brotli_static) servira le meilleur format pris en charge par chaque client.

Le seuil contrôle la taille minimale de fichier à compresser. Les fichiers plus petits que le seuil ne sont pas compressés - compresser de très petits fichiers peut en réalité augmenter leur taille à cause des en-têtes de compression. 10 Ko est une bonne valeur par défaut. Pour une compression agressive, utilisez 1 Ko.

Ne supprimez les originaux que si votre serveur est configuré pour servir exclusivement des fichiers .gz/.br et si vous êtes certain que tous les clients prennent en charge le format compressé. Pour la plupart des configurations, conservez les originaux - votre serveur servira la version compressée lorsque le client la prend en charge et se rabattra sur l'original sinon.

vite-plugin-compression fonctionne avec la sortie de build côté client de Vite. Pour les builds SSR, le plugin compresse le bundle client mais pas le bundle serveur. Configurez votre serveur SSR pour gérer la compression séparément avec un middleware comme le paquet npm compression.

Activez gzip_static on dans votre bloc server nginx pour servir automatiquement les fichiers .gz. Pour Brotli, installez le module ngx_brotli et activez brotli_static on. L'onglet nginx.conf de ce générateur produit exactement l'extrait de configuration dont vous avez besoin.