Может ли минификация сломать код?

Terser по умолчанию ведёт себя осторожно и сохраняет семантику. mangle переименовывает только не экспортируемые переменные, compress пропускает преобразования, которые не может доказать безопасными. Если код опирается на Function.name или eval исходника, отключите mangle для этого файла.

Какой выигрыш в размере обычно получается?

JavaScript обычно ужимается на 40–70%. Код с длинными комментариями, длинными именами или мёртвыми ветвями сжимается сильнее. Уже короткий или полный строковых литералов код — слабее. После gzip разрыв сужается.

Чем отличаются minify, compress и mangle?

Minify — общее название. Compress делает преобразования на уровне кода: сворачивает константы, удаляет мёртвые ветви. Mangle переименовывает идентификаторы в короткие имена. Каждый шаг работает отдельно, вместе они дают самый компактный вывод.

Стоит ли минифицировать, если сервер всё равно отдаёт gzip или brotli?

Стоит. Gzip сокращает повторяемость в тексте, но не переименовывает длинные имена и не удаляет мёртвые ветви. Минифицированный код после gzip получается ещё меньше и быстрее парсится при загрузке. Этапы складываются, а не дублируют друг друга.

Работает ли это с TypeScript или с ES2022?

Чистый TypeScript надо предварительно скомпилировать: Terser принимает только JavaScript. Современный синтаксис до ES2022 (приватные поля, top-level 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 — минифицировать

Что такое Минификатор JS?

JS Minifier сжимает JavaScript-код, удаляя пробелы и комментарии, а также сокращая имена переменных с помощью движка Terser. Это уменьшает размер файлов, ускоряет загрузку страниц и снижает затраты на трафик, сохраняя при этом полную функциональность кода.

Минификатор запускает Terser локально: удаляет пробелы и комментарии, при включённом mangle переименовывает локальные переменные в одну букву, при включённом compress применяет безопасные AST-преобразования и может убирать вызовы console.log. Инструмент показывает исходный размер, размер после минификации и процент экономии, чтобы выгоду можно было проверить до выкладки.

Как использовать

Вставьте JavaScript-код в редактор или загрузите файл .js.
Выберите параметры минификации: включите манглинг (сокращение имён переменных), сжатие и удаление вызовов console.log.
Нажмите «Minify» для обработки кода. Проверьте процент уменьшения размера, скачайте минифицированный файл или скопируйте в буфер обмена.

Когда использовать

Сжать JS-бандл перед загрузкой на CDN, у которого нет своей сборки.
Очистить библиотеку от комментариев и console-вызовов перед вставкой в тему CMS.
Сделать одноразовый минифицированный сниппет для виджета чата, пикселя рекламы или стороннего тега.

Результат

У вас есть утилитарная библиотека на 45 КБ с подробными комментариями и длинными именами переменных. Вставьте её, включите манглинг и сжатие, и получите результат на 12 КБ — сокращение на 73%, готовое к продакшн-развёртыванию.

Частые вопросы

Может ли минификация сломать код?: Terser по умолчанию ведёт себя осторожно и сохраняет семантику. mangle переименовывает только не экспортируемые переменные, compress пропускает преобразования, которые не может доказать безопасными. Если код опирается на Function.name или eval исходника, отключите mangle для этого файла.
Какой выигрыш в размере обычно получается?: JavaScript обычно ужимается на 40–70%. Код с длинными комментариями, длинными именами или мёртвыми ветвями сжимается сильнее. Уже короткий или полный строковых литералов код — слабее. После gzip разрыв сужается.
Чем отличаются minify, compress и mangle?: Minify — общее название. Compress делает преобразования на уровне кода: сворачивает константы, удаляет мёртвые ветви. Mangle переименовывает идентификаторы в короткие имена. Каждый шаг работает отдельно, вместе они дают самый компактный вывод.
Стоит ли минифицировать, если сервер всё равно отдаёт gzip или brotli?: Стоит. Gzip сокращает повторяемость в тексте, но не переименовывает длинные имена и не удаляет мёртвые ветви. Минифицированный код после gzip получается ещё меньше и быстрее парсится при загрузке. Этапы складываются, а не дублируют друг друга.
Работает ли это с TypeScript или с ES2022?: Чистый TypeScript надо предварительно скомпилировать: Terser принимает только JavaScript. Современный синтаксис до ES2022 (приватные поля, top-level await, опциональная цепочка) парсится напрямую, без Babel.

Минификатор JS

Исходный размер

Настройки

Что такое Минификатор JS?

Как использовать

Когда использовать

Результат

Частые вопросы

Похожие инструменты

Генератор структурированных данных

Веб-страница в PDF

Генератор политики конфиденциальности

Генератор условий использования

Генератор согласия на использование файлов cookie

Минификатор CSS

Минификатор JS

Исходный размер

Настройки