ミニファイでコードが壊れることはありますか?

Terserは既定で慎重に動作し、意味を保ちます。mangleは公開されていない変数だけを改名し、compressは安全と確認できない変換を行いません。Function.nameに依存したり、ソースをevalする場合は、そのファイルだけmangleを無効にしてください。

どれくらいの削減が見込めますか?

JavaScriptはおおむね40〜70%縮みます。長いコメントや冗長な変数名、未使用分岐が多いコードほど縮みます。もともと簡潔だったり、文字列リテラルが大半のコードは縮みにくいです。gzip後の差はもっと小さくなります。

minify、compress、mangleの違いは何ですか?

minifyは総称です。compressは定数畳み込みや死分岐削除などコード水準の変換、mangleは識別子を短い名前に置き換えるものです。それぞれ単独でも動きますが、3つ揃えると通常もっとも小さい出力になります。

サーバーでgzipかbrotliをかけるなら、minifyは省いてもよいですか?

省かないでください。gzipは文字列の重複を縮めますが、長い変数名を改名したり、未使用分岐を消したりはしません。ミニファイ済みコードはgzip後でもさらに小さくなり、読み込み後のパースも速くなります。両者は重なるのではなく積み重なります。

TypeScriptやES2022の新しい構文でも動きますか?

純粋なTypeScriptはTerserがJavaScriptしか受け付けないため、先にコンパイルする必要があります。ES2022までの新しい構文(プライベートフィールド、トップレベルawait、オプショナルチェーンなど)はBabel変換なしで直接解析できます。

JS圧縮ツール

JavaScriptコードを圧縮してファイルサイズを削減

元のサイズ

// 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,
  };
})();

設定

サンプルターゲット

変数名を難読化圧縮console.logを削除クラス名を保持関数名を保持

Ctrl+Enter で圧縮