Kann Minifizierung den Code zerstören?

Terser arbeitet standardmäßig vorsichtig und bewahrt die Semantik. Mangle benennt nur Variablen um, die nicht exportiert sind; Compress lässt Transformationen aus, deren Sicherheit es nicht beweisen kann. Wer auf Function.name oder eval des Quelltexts baut, schaltet Mangle für diese Datei besser ab.

Wie viel Ersparnis ist üblich?

JavaScript schrumpft typischerweise um 40 bis 70 Prozent. Code mit langen Kommentaren, ausschweifenden Namen oder ungenutzten Zweigen schrumpft stärker. Bereits knapper Code oder Code voller String-Literale schrumpft weniger. Nach Gzip schrumpft der Unterschied weiter.

Was unterscheidet minify, compress und mangle?

Minify ist der Oberbegriff. Compress macht Transformationen auf Codeebene wie das Falten von Konstanten oder das Entfernen toter Zweige. Mangle benennt Bezeichner in kurze Namen um. Jede Stufe lässt sich einzeln aktivieren; alle drei zusammen liefern meist das kleinste Ergebnis.

Lohnt sich Minifizierung, wenn der Server ohnehin Gzip oder Brotli liefert?

Ja. Gzip baut Redundanz im Text ab, benennt aber keine langen Variablen um und entfernt keine toten Zweige. Minifizierter Code komprimiert besser und wird beim Laden schneller geparst. Beide Stufen addieren sich, sie überlappen sich nicht.

Funktioniert das mit TypeScript oder moderner ES2022-Syntax?

Reines TypeScript muss zuerst kompiliert werden, weil Terser nur JavaScript versteht. Moderne Syntax bis ES2022 (Private Fields, Top-Level await, Optional Chaining) wird direkt geparst, ohne Babel-Schritt.

JS-Minifier

JavaScript-Code minifizieren, um die Dateigröße zu reduzieren

Originalgröße

// Utility library — helper functions
(function () {
  "use strict";

/**
   * Debounce a function call.
   * @param {Function} fn - The function to debounce
   * @param {number} delay - Delay in milliseconds
   */
  function debounce(fn, delay) {
    let timer = null;
    return function (...args) {
      clearTimeout(timer);
      timer = setTimeout(() => {
        fn.apply(this, args);
      }, delay);
    };
  }

// Format a number with commas
  function formatNumber(num) {
    return num.toString().replace(
      /\B(?=(\d{3})+(?!\d))/g,
      ","
    );
  }

// Deep clone an object
  function deepClone(obj) {
    if (obj === null || typeof obj !== "object") {
      return obj;
    }
    const copy = Array.isArray(obj) ? [] : {};
    for (const key in obj) {
      if (Object.prototype.hasOwnProperty.call(obj, key)) {
        copy[key] = deepClone(obj[key]);
      }
    }
    return copy;
  }

console.log("Utilities loaded");

window.Utils = {
    debounce: debounce,
    formatNumber: formatNumber,
    deepClone: deepClone,
  };
})();

// Utility library — helper functions
(function () {
  "use strict";

  /**
   * Debounce a function call.
   * @param {Function} fn - The function to debounce
   * @param {number} delay - Delay in milliseconds
   */
  function debounce(fn, delay) {
    let timer = null;
    return function (...args) {
      clearTimeout(timer);
      timer = setTimeout(() => {
        fn.apply(this, args);
      }, delay);
    };
  }

  // Format a number with commas
  function formatNumber(num) {
    return num.toString().replace(
      /\B(?=(\d{3})+(?!\d))/g,
      ","
    );
  }

  // Deep clone an object
  function deepClone(obj) {
    if (obj === null || typeof obj !== "object") {
      return obj;
    }
    const copy = Array.isArray(obj) ? [] : {};
    for (const key in obj) {
      if (Object.prototype.hasOwnProperty.call(obj, key)) {
        copy[key] = deepClone(obj[key]);
      }
    }
    return copy;
  }

  console.log("Utilities loaded");

  window.Utils = {
    debounce: debounce,
    formatNumber: formatNumber,
    deepClone: deepClone,
  };
})();

Einstellungen

BeispielZielversion

Variablen verschleiernKomprimierenconsole.log entfernenKlassennamen behaltenFunktionsnamen behalten

Strg+Enter zum Minifizieren

Was ist JS-Minifier?

JS Minifier komprimiert JavaScript-Code, indem Leerzeichen und Kommentare entfernt sowie Variablennamen mit der Terser-Engine verkürzt werden. Dies reduziert die Dateigröße für schnellere Seitenladezeiten und niedrigere Bandbreitenkosten, während die Funktionalität des Codes erhalten bleibt.

Der Minifier führt Terser lokal über Ihren Code aus: er entfernt Leerzeichen und Kommentare, benennt lokale Variablen bei aktiviertem Mangle in einzelne Buchstaben um, wendet bei aktiviertem Compress sichere AST-Transformationen an und kann console.log-Aufrufe streichen. Ausgegeben werden Originalgrösse, minifizierte Grösse und prozentuale Ersparnis.

Anleitung

Fügen Sie Ihren JavaScript-Code in den Editor ein oder laden Sie eine .js-Datei hoch.
Wählen Sie die Minifizierungsoptionen: Mangling (Variablennamen kürzen), Kompression und das Entfernen von console.log-Aufrufen.
Klicken Sie auf Minifizieren, um den Code zu verarbeiten. Prüfen Sie die Größenreduktion und laden Sie die minifizierte Datei herunter oder kopieren Sie sie in die Zwischenablage.

Wann verwenden

Ein JavaScript-Bundle komprimieren, bevor es auf ein CDN ohne Build-Schritt geladen wird.
Kommentare und Console-Aufrufe aus einer Bibliothek entfernen, ehe sie in ein CMS-Theme eingefügt wird.
Einmalig eine minifizierte Variante für ein Chat-Widget, einen Werbe-Pixel oder ein Drittanbieter-Skript erzeugen.

Ergebnis

Sie haben eine 45-KB-Dienstprogrammbibliothek mit ausführlichen Kommentaren und langen Variablennamen. Fügen Sie sie ein, aktivieren Sie Mangling und Kompression, und erhalten Sie eine 12-KB-Ausgabe – eine Reduktion von 73 Prozent, bereit für den Produktionseinsatz.

Häufige Fragen

Kann Minifizierung den Code zerstören?: Terser arbeitet standardmäßig vorsichtig und bewahrt die Semantik. Mangle benennt nur Variablen um, die nicht exportiert sind; Compress lässt Transformationen aus, deren Sicherheit es nicht beweisen kann. Wer auf Function.name oder eval des Quelltexts baut, schaltet Mangle für diese Datei besser ab.
Wie viel Ersparnis ist üblich?: JavaScript schrumpft typischerweise um 40 bis 70 Prozent. Code mit langen Kommentaren, ausschweifenden Namen oder ungenutzten Zweigen schrumpft stärker. Bereits knapper Code oder Code voller String-Literale schrumpft weniger. Nach Gzip schrumpft der Unterschied weiter.
Was unterscheidet minify, compress und mangle?: Minify ist der Oberbegriff. Compress macht Transformationen auf Codeebene wie das Falten von Konstanten oder das Entfernen toter Zweige. Mangle benennt Bezeichner in kurze Namen um. Jede Stufe lässt sich einzeln aktivieren; alle drei zusammen liefern meist das kleinste Ergebnis.
Lohnt sich Minifizierung, wenn der Server ohnehin Gzip oder Brotli liefert?: Ja. Gzip baut Redundanz im Text ab, benennt aber keine langen Variablen um und entfernt keine toten Zweige. Minifizierter Code komprimiert besser und wird beim Laden schneller geparst. Beide Stufen addieren sich, sie überlappen sich nicht.
Funktioniert das mit TypeScript oder moderner ES2022-Syntax?: Reines TypeScript muss zuerst kompiliert werden, weil Terser nur JavaScript versteht. Moderne Syntax bis ES2022 (Private Fields, Top-Level await, Optional Chaining) wird direkt geparst, ohne Babel-Schritt.

JS-Minifier

Originalgröße

Einstellungen

Was ist JS-Minifier?

Anleitung

Wann verwenden

Ergebnis

Häufige Fragen

Ähnliche Tools

Generator für strukturierte Daten

Webseite als PDF

Datenschutzerklärung-Generator

AGB-Generator

Cookie-Einwilligungs-Generator

CSS-Minifizierer

JS-Minifier

Originalgröße

Einstellungen