Vite-Komprimierungs-Plugin-Konfigurationsgenerator
Generieren Sie die vite-plugin-compression-Konfiguration, um Vite-Build-Assets in GZIP und Brotli vorzukomprimieren - erzeugt eine sofort einsatzbereite vite.config.ts mit framework-spezifischen Imports, Installationsbefehl und nginx-Server-Konfiguration. Unterstützt React, Vue, Svelte, SolidJS und Vanilla JS. Ohne Anmeldung.
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
Files smaller than this are not compressed
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.
Warum unseren Vite-Komprimierungs-Plugin-Konfigurationsgenerator verwenden?
- Sofortige Vite-Komprimierungskonfiguration: Wählen Sie Ihr Framework, den Algorithmus und die Komprimierungsstufen - der Generator erzeugt sofort eine einsatzbereite vite.config.ts mit korrekt konfiguriertem vite-plugin-compression.
- Sicherer Vite-Konfigurationsgenerator online: Die gesamte Konfigurationsgenerierung läuft vollständig in Ihrem Browser. Es sind keine Projektdateien oder API-Schlüssel erforderlich - vollständig privat und offline nutzbar.
- 3 Ausgabeformate: Installationsbefehl, vite.config.ts mit framework-spezifischen Imports und nginx.conf-Ausschnitt zum Ausliefern vorkomprimierter Dateien - alle drei aktualisieren sich in Echtzeit.
- 100 % kostenlos für immer: Generieren Sie so viele Vite-Komprimierungskonfigurationen wie nötig, völlig kostenlos. Ohne Konto, ohne Abonnement, ohne Einschränkungen und ohne Werbung.
Was ist das Vite-Komprimierungs-Plugin?
vite-plugin-compression ist ein Vite-Plugin, das Build-Ausgabedateien (JavaScript-Bundles, CSS, HTML) zur Build-Zeit in GZIP- und/oder Brotli-Format vorkomprimiert. Statt Dateien bei jeder HTTP-Anfrage zu komprimieren (Laufzeitkomprimierung), liefert der Server die vorkomprimierten .gz- oder .br-Dateien direkt aus - das eliminiert CPU-Overhead zur Laufzeit und erzeugt schnellere Antwortzeiten. Unser kostenloser Vite-Komprimierungs-Plugin-Konfigurationsgenerator erzeugt die richtige vite.config.ts für Ihr Framework und Ihre Einstellungen.
So funktioniert unser Vite-Komprimierungskonfigurationsgenerator
- Einstellungen wählen: Wählen Sie Ihr Framework (React, Vue, Svelte usw.), den Komprimierungsalgorithmus (GZIP, Brotli oder beides), den Schwellenwert, die Komprimierungsstufen und den Paketmanager.
- Sofortige Konfigurationsgenerierung: Der Generator erzeugt sofort drei Ausgaben - Installationsbefehl, vite.config.ts mit framework-spezifischen Imports und nginx.conf-Ausschnitt - alle in Echtzeit aktualisiert.
- Kopieren und anwenden: Wechseln Sie zwischen den drei Tabs, kopieren Sie die relevante Konfiguration und fügen Sie sie Ihrem Vite-Projekt und Ihrer Serverkonfiguration hinzu.
Vorkomprimierung vs. Laufzeitkomprimierung
- Laufzeitkomprimierung (nginx gzip on): komprimiert Dateien bei jeder Anfrage - verursacht CPU-Overhead, erhöht die Antwortzeit und benötigt Serverressourcen.
- Vorkomprimierung (vite-plugin-compression): komprimiert Dateien einmal zur Build-Zeit - kein CPU-Overhead zur Laufzeit, sofortige Antwort und kompatibel mit jedem Static-File-Server oder CDN.
- Best Practice: Beides nutzen - mit vite-plugin-compression vorkomprimieren und gzip_static in nginx als Fallback für Dateien ohne vorkomprimierte Version aktivieren.
- CDN-Kompatibilität: Laden Sie .gz- und .br-Dateien zu S3, CloudFront oder Cloudflare R2 hoch und liefern Sie sie mit dem korrekten Content-Encoding-Header aus.
GZIP vs. Brotli für Vite-Builds
Brotli erreicht für JavaScript- und CSS-Bundles eine 15-25 % bessere Komprimierung als GZIP. Es wird von allen modernen Browsern unterstützt (Chrome, Firefox, Edge, Safari 17.4+). GZIP ist der universelle Fallback - unterstützt von allen Browsern und Servern. Erzeugen Sie für maximale Kompatibilität beide Formate und lassen Sie Ihren Server das beste pro Client auswählen. Brotli-Komprimierung mit Qualität 6 ist ein guter Kompromiss zwischen Komprimierungsrate und Build-Zeit.
Häufig gestellte Fragen
vite-plugin-compression ist ein Vite-Plugin, das Build-Ausgabedateien (JS, CSS, HTML) zur Build-Zeit in GZIP- und/oder Brotli-Format vorkomprimiert. Das eliminiert den CPU-Overhead der Laufzeitkomprimierung auf Ihrem Server und erzeugt kleinere Dateien für die CDN-Auslieferung. Unser kostenloser Online-Konfigurationsgenerator erzeugt die richtige vite.config.ts - ohne Anmeldung.
Die Laufzeitkomprimierung (nginx gzip on) komprimiert Dateien bei jeder Anfrage und verursacht CPU-Overhead. Die Vorkomprimierung (vite-plugin-compression + nginx gzip_static) komprimiert Dateien einmal zur Build-Zeit und liefert die vorkomprimierten .gz- oder .br-Dateien direkt aus - kein CPU-Overhead zur Laufzeit und schnellere Antwortzeiten.
Ja. Der Vite-Komprimierungskonfigurationsgenerator ist 100 % kostenlos, ohne Anmeldung, ohne Abonnement und ohne Einschränkungen. Sie können so viele Konfigurationen generieren, wie Sie benötigen.
Verwenden Sie GZIP und Brotli für maximale Kompatibilität. Brotli erreicht eine 15-25 % bessere Komprimierung als GZIP und wird von allen modernen Browsern unterstützt. GZIP ist der Fallback für ältere Browser und Tools. Ihr Server (nginx mit gzip_static + brotli_static) liefert das beste Format aus, das der jeweilige Client unterstützt.
Der Schwellenwert steuert die minimale Dateigröße für die Komprimierung. Kleinere Dateien werden nicht komprimiert - sehr kleine Dateien können durch Komprimierungs-Header sogar größer werden. 10 KB ist ein guter Standardwert. Für aggressive Komprimierung nutzen Sie 1 KB.
Löschen Sie Originale nur, wenn Ihr Server ausschließlich .gz/.br-Dateien ausliefert und Sie sicher sind, dass alle Clients das komprimierte Format unterstützen. Behalten Sie in den meisten Setups die Originale - Ihr Server liefert die komprimierte Version, wenn der Client sie unterstützt, und weicht sonst auf das Original aus.
vite-plugin-compression funktioniert mit der clientseitigen Build-Ausgabe von Vite. Bei SSR-Builds komprimiert das Plugin das Client-Bundle, aber nicht das Server-Bundle. Konfigurieren Sie Ihren SSR-Server so, dass er die Komprimierung separat über Middleware wie das npm-Paket compression übernimmt.
Aktivieren Sie gzip_static on in Ihrem nginx-Serverblock, um .gz-Dateien automatisch auszuliefern. Installieren Sie für Brotli das Modul ngx_brotli und aktivieren Sie brotli_static on. Der nginx.conf-Tab dieses Generators erzeugt genau den benötigten Konfigurationsausschnitt.