Webpack-Komprimierungsplugin-Konfigurationsgenerator
Erzeugen Sie einen produktionsreifen webpack.config.js-Ausschnitt mit GZIP- und Brotli-Vorabkomprimierung über compression-webpack-plugin. Stellen Sie Komprimierungsstufen, Threshold, minRatio und Asset-Muster ein – kopieren Sie dann die Konfiguration, installieren Sie das Plugin und erhalten Sie die passenden Nginx-Serve-Direktiven. Läuft vollständig in Ihrem Browser – ohne Anmeldung.
Configure GZIP and Brotli pre-compression for your webpack build and generate a production-ready webpack.config.jssnippet using compression-webpack-plugin. All generation runs locally in your browser.
Best compression - slowest build
Maximum - slowest build
Skip assets smaller than this size
Skip if compressed/original > this ratio (0.8 = skip if <20% savings)
Regex to match assets to compress
Warum unseren Webpack-Komprimierungsplugin-Konfigurationsgenerator verwenden?
Das sind die wichtigsten Vorteile des Tools.
- Sofortige Webpack-Komprimierungskonfiguration: Stellen Sie GZIP-Stufe, Brotli-Qualität, Threshold, minRatio und Asset-Muster ein – der Generator erzeugt sofort einen vollständigen webpack.config.js-Ausschnitt.
- Sicherer Online-Webpack-Konfigurationsgenerator: Die gesamte Konfigurationserzeugung läuft in Ihrem Browser. Keine Projektdetails, Dateipfade oder Konfigurationsdaten werden irgendwohin gesendet – völlig privat und offline nutzbar.
- GZIP + Brotli + Nginx-Serve-Ausschnitt: Erzeugen Sie nur GZIP, nur Brotli oder beide Komprimierungs-Plugins in einer Konfiguration – plus die passenden Nginx-Direktiven gzip_static und brotli_static zur Auslieferung der vorkomprimierten Dateien.
- 100 % kostenlos für immer: Erzeugen Sie Webpack-Komprimierungskonfigurationen für beliebig viele Projekte, völlig kostenlos. Kein Konto, kein Abonnement, keine Limits und keine Werbung.
Was ist das Webpack-Komprimierungsplugin?
Das Webpack-Komprimierungsplugin (compression-webpack-plugin) ist ein Webpack-Plugin, das Ihre Build-Ausgabe bereits zur Build-Zeit vorkomprimiert und .gz- sowie .br-Dateien neben den Original-Assets erstellt. Wenn Ihr Webserver für die Auslieferung dieser vorkomprimierten Dateien konfiguriert ist (über gzip_static on in Nginx), entfällt der CPU-Aufwand pro Anfrage für die Komprimierung zur Laufzeit. Unser kostenloser Webpack-Komprimierungsplugin-Konfigurationsgenerator erzeugt einen vollständigen, produktionsreifen webpack.config.js-Ausschnitt – alles lokal in Ihrem Browser erzeugt, ohne Anmeldung.
So funktioniert unser Webpack-Komprimierungsplugin-Konfigurationsgenerator
Das sind die drei Schritte.
- Optionen konfigurieren: Wählen Sie die Algorithmen GZIP, Brotli oder beide. Stellen Sie Komprimierungsstufen, Threshold, minRatio, Asset-Muster und Modulformat über die interaktiven Steuerelemente ein.
- Sofort erzeugen: Klicken Sie auf „Konfiguration erzeugen“ – der Generator erstellt einen vollständigen webpack.config.js-Ausschnitt mit den korrekten Plugin-Instanzen, vollständig in Ihrem Browser.
- Kopieren und deployen: Installieren Sie das Plugin, fügen Sie den Ausschnitt Ihrer Webpack-Konfiguration hinzu, führen Sie den Build aus und konfigurieren Sie Ihren Webserver für die Auslieferung der vorkomprimierten Dateien mit dem enthaltenen Nginx-Ausschnitt.
Was die erzeugte Konfiguration enthält
Das sind die erzeugten Elemente.
- CompressionPlugin-Instanzen: Eine für GZIP (algorithm: 'gzip') und/oder eine für Brotli (algorithm: 'brotliCompress') mit Ihren konfigurierten Stufen und Optionen.
- Threshold und minRatio: Überspringen Sie die Komprimierung von Assets, die zu klein sind oder sich nicht gut genug komprimieren lassen, um den Overhead zu rechtfertigen.
- Asset-Muster: Eine Regex, die nur die komprimierungswürdigen Dateitypen trifft – standardmäßig JS, CSS, HTML, SVG, JSON und WOFF2.
- Nginx-Serve-Ausschnitt: Die passenden Direktiven gzip_static und brotli_static zur Auslieferung der vorkomprimierten Dateien von Ihrem Webserver.
Vorabkomprimierung vs. Komprimierung zur Laufzeit
Komprimierung zur Laufzeit (z. B. Nginx gzip on) komprimiert jede Antwort zum Zeitpunkt der Anfrage – das verursacht CPU-Aufwand und Latenz. Bei der Vorabkomprimierung mit dem Webpack-Komprimierungsplugin werden Assets einmal zur Build-Zeit komprimiert, sodass der Server die vorkomprimierte Datei einfach liest und ausliefert – ohne CPU-Kosten pro Anfrage. Für statische Assets mit hohem Traffic ist Vorabkomprimierung immer vorzuziehen. Der Webpack-Komprimierungsplugin-Konfigurationsgenerator macht es trivial, Vorabkomprimierung zu jedem Webpack-basierten Projekt hinzuzufügen.
Häufig gestellte Fragen
Ein Webpack-Komprimierungsplugin-Konfigurationsgenerator erzeugt einen sofort nutzbaren webpack.config.js-Ausschnitt, der GZIP- und/oder Brotli-Vorabkomprimierung über das Paket compression-webpack-plugin zum Webpack-Build hinzufügt. Stellen Sie Komprimierungsstufen, Threshold, minRatio und Asset-Muster ein – der Generator gibt die korrekten Plugin-Instanzen sofort aus. Unser kostenloser Online-Generator läuft vollständig in Ihrem Browser, ohne Anmeldung.
Komprimierung zur Laufzeit (z. B. Nginx gzip on) komprimiert jede HTTP-Antwort zum Zeitpunkt der Anfrage und verursacht CPU-Aufwand und Latenz. Bei der Vorabkomprimierung mit dem Webpack-Komprimierungsplugin werden Assets einmal zur Build-Zeit komprimiert – der Server liest und liefert die vorkomprimierte .gz- oder .br-Datei ohne CPU-Kosten pro Anfrage. Für statische Assets mit hohem Traffic ist Vorabkomprimierung immer vorzuziehen.
Ja. Der Webpack-Komprimierungsplugin-Konfigurationsgenerator läuft vollständig in Ihrem Browser – die gesamte Konfigurationserzeugung erfolgt lokal mit JavaScript. Es werden keine Projektdetails, Dateipfade oder Konfigurationsdaten an einen Server gesendet. Ihre Einstellungen verlassen Ihr Gerät nie.
Ja. Der Webpack-Komprimierungsplugin-Konfigurationsgenerator ist 100 % kostenlos – ohne Anmeldung, ohne Abonnement und ohne Limits. Erzeugen Sie Konfigurationen für beliebig viele Projekte.
Ja – das Webpack-Komprimierungsplugin erstellt zur Build-Zeit .gz- und .br-Dateien, aber Ihr Webserver muss für deren Auslieferung konfiguriert sein. Fügen Sie für Nginx gzip_static on für GZIP und brotli_static on für Brotli hinzu (erfordert das Modul ngx_brotli). Verwenden Sie für Apache mod_deflate mit Auslieferung vorkomprimierter Dateien. Der Generator enthält den Nginx-Ausschnitt in den Ergebnissen.
Für GZIP wird bei statischer Vorabkomprimierung Stufe 9 empfohlen, da der CPU-Aufwand nur einmal beim Build anfällt. Für Brotli erreicht Qualität 11 die maximale Komprimierung – typischerweise 20–26 % besser als GZIP Stufe 9. Verwenden Sie in CI/CD-Pipelines, bei denen die Build-Zeit zählt, GZIP Stufe 6 und Brotli Qualität 6, um Komprimierungsrate und Build-Geschwindigkeit auszubalancieren.
Die Option threshold (in Bytes) weist das Plugin an, Assets zu überspringen, die kleiner als die angegebene Größe sind. Der Standardwert von 10.240 Bytes (10 KB) ist ein guter Ausgangspunkt – die Komprimierung sehr kleiner Dateien erzeugt Overhead ohne nennenswerte Einsparung. Erhöhen Sie diesen Wert, um mehr kleine Dateien zu überspringen, oder setzen Sie ihn auf 0, um alles zu komprimieren.
Die Option minRatio weist das Plugin an, keine komprimierte Datei zu erstellen, wenn die Komprimierungsrate nicht gut genug ist. Ein minRatio von 0,8 bedeutet: Die komprimierte Datei nur erstellen, wenn sie höchstens 80 % der Originalgröße ausmacht (also mindestens 20 % Einsparung). Setzen Sie den Wert auf 1, um immer komprimierte Dateien zu erstellen, oder senken Sie ihn, um eine bessere Komprimierung zu verlangen.
Ja. Bei Create React App nutzen Sie react-app-rewired oder CRACO, um die Webpack-Konfiguration anzupassen. Bei Angular CLI verwenden Sie @angular-builders/custom-webpack. Bei Vue CLI fügen Sie das Plugin in vue.config.js unter configureWebpack hinzu. Der Generator erzeugt eine Standard-CompressionPlugin-Konfiguration, die mit jedem Webpack-basierten Build-Tool funktioniert.