Изменит ли минификация поведение моего кода?

Сама по себе нет. Terser разбирает код и делает только те преобразования, безопасность которых может доказать. Сломать вас может лишь сокращение имён - и только когда что-то ищет имя как текст: eval, new Function или внедрение зависимостей, читающее имена параметров. Этот переключатель на панели.

Может ли он вернуть сжатый файл к оригиналу?

Читаемым - да, оригинальным - нет. Форматирование возвращает отступы и переносы, логику можно проследить. Комментарии удалены, а короткие имена такими и останутся; из «e» никак не получить «errorMessage». Если сборка ваша, выкладывайте карту исходников - это единственный настоящий ответ.

Что меняет настройка цели?

Она говорит Terser, какой синтаксис ему разрешено выдавать. При ES2020+ он может использовать стрелочные функции и другие короткие современные формы, при ES5 - нет, так что результат заработает в старых браузерах. Ваш код он не переводит: написали стрелочную функцию и выбрали ES5 - она такой и останется. Для этого нужен компилятор вроде Babel.

Отправляется ли мой код на сервер?

Нет. Сам Terser скачивается в ваш браузер и работает там, так что код никогда не покидает вашу машину. Это и решило, как построить страницу: в минификатор обычно вставляют исходник чего-то приватного, и инструмент, которому нужно его увидеть, чтобы сжать, просит слишком много.

Минификатор и форматировщик JavaScript - Terser в браузере

Инструменты / / Разработка / Форматировщики / Минификатор JavaScript

Минификатор и форматировщик JavaScript

Цель

Сокращать имена

Сокращение локальных имён экономит больше всего байтов, но ломает код, который ищет имена как текст: eval, new Function или фреймворк, читающий имена параметров. Выключите, если полагаетесь на это.

Ваш JavaScript

var firstName = "Ada";
var lastName  = "Lovelace";
var fullName  = firstName + " " + lastName;

function greet(person, greeting) {
  // Минификация удаляет этот комментарий, форматирование сохраняет.
  const message = `${greeting}, ${person}!`;
  return message;
}

console.log(greet(fullName, "Hello"));

Минификация JavaScript - частые вопросы

Terser - преемник UglifyJS и минификатор по умолчанию в webpack, Rollup и Vite. Это тот же движок, который уже запускает ваша сборка, поэтому результат здесь совпадает со сборочным, а не приближается к нему.

Самые популярные форматировщики

За всё время

JSON форматтер

Формат XML

Минификация CSS

Формат HTML

Формат SQL

Новое

Редактор Markdown Пишите Markdown и смотрите результат рядом. Поддерживаются заголовки, списки, таблицы, блоки кода и ссылки; скопируйте HTML или скачайте файлы .md и .html. Работает в вашем браузере.

Просмотр страницы

Что делает этот инструмент

Минифицировать JavaScript - это не убрать пробелы. Сделанное поиском с заменой, оно даёт файлы, которые выглядят нормально и ведут себя иначе, а разница вылезает в продакшене. Эта страница запускает Terser - тот самый движок за шагом сборки большинства проектов - прямо в вашем браузере.

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

1 Вставьте JavaScript в поле.
2 Выберите цель и решите, сокращать ли имена.
3 Нажмите «Минифицировать» - или «Форматировать», чтобы снова раскрыть сжатый файл.

Почему разбор, а не поиск с заменой

JavaScript сам ставит точки с запятой там, где вы их не поставили. Уберите перенос строки между «return» и значением - и функция начнёт возвращать undefined: файл всё ещё корректен, он просто делает другое. Один и тот же символ здесь деление, а там регулярное выражение. Различить это можно только по грамматике, а не по шаблону; поэтому здесь настоящий разборщик.

Что на самом деле уменьшается

Пробелы и комментарии - самая малая часть. Настоящая экономия идёт от переименования локальных переменных в одну букву, слияния отдельных объявлений, вычисления констант и выбрасывания недостижимого кода. Всё это операции над деревом: минификатор должен знать, что два имени - одна и та же связь и что между ними её никто не читает.

Где сокращение имён кусается

Минификатор может переименовать то, что видит. Он не видит имя, написанное как текст: eval("count + 1"), new Function("a", "return a") или фреймворк, читающий имена параметров, чтобы решить, что подставить. Они продолжают искать старое имя и не находят. Это свойство языка, а не изъян инструмента - поэтому переключатель оставлен вам.

Форматирование не возвращает исходный файл

Форматирование возвращает отступы и переносы, так что сжатый файл снова читается. Выброшенное оно не вернёт: комментариев нет, а если имена сокращали - они останутся короткими; ни один инструмент не угадает, что «e» когда-то было «errorMessage». Для отладки продакшен-файла оригинал возвращает только карта исходников.

Связанные инструменты разработчика

JSON форматтер Форматируйте, сжимайте и проверяйте JSON прямо в браузере. Ошибка указывается по строке и столбцу, а дерево показывает структуру.

Формат HTML Расставьте отступы в запутанном HTML, чтобы его читать, или сожмите его. Работает и с фрагментами, а разметку не переписывает.

Минификация CSS Сожмите CSS, убрав комментарии и пробелы, или разверните обратно с ровными отступами. Пробелы в calc(), строки и лицензии остаются нетронутыми.

Формат XML Расставьте отступы в запутанном XML или сожмите его. Понимает RSS, CDATA и пространства имён и никогда не переписывает ваш документ.

Формат SQL Разложите длинный запрос по читаемым строкам или сожмите обратно в одну. Регистр ключевых слов, имена в кавычках и строки остаются как есть.

Другие инструменты, которые могут вам понравиться

Word в PDF Конвертируйте Word в PDF бесплатно: загрузите DOC, DOCX, ODT или RTF и скачайте аккуратно свёрстанный PDF за считаные секунды.

PDF в Word Конвертируйте PDF в Word бесплатно: загрузите PDF и скачайте редактируемый DOCX за секунды - без регистрации и водяных знаков.

Счетчик слов Бесплатный счётчик слов: вставьте текст, чтобы узнать число слов, символов, предложений и абзацев, а также время чтения. Текст остаётся в браузере.

Счетчик символов Бесплатный счётчик символов: символы с пробелами и без, слова и строки, а также проверка SEO-лимитов для заголовков и описаний.

Проверка плотности ключевых слов Бесплатный анализ плотности ключевых слов: вставьте текст или ссылку и посмотрите частоту каждого слова и фразы в процентах.