Форматтер и минификатор JavaScript

Минификатор сжимает JavaScript с помощью Terser — того же инструмента, что используют Vite и webpack: удаляет пробелы и комментарии, сокращает имена локальных переменных и упрощает выражения. Код перед сжатием проверяется, и синтаксическая ошибка подсвечивается на месте. Кнопка «Форматировать» делает обратное: разворачивает минифицированный код в читаемый вид по правилам Prettier — так удобно разобраться в чужом скрипте.

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

Вставьте JavaScript или откройте файл .js; для TypeScript выберите тип «TypeScript» или откройте файл .ts — сжатый код и экономия в процентах появятся сразу. Результат можно скопировать или скачать.

Код обрабатывается в браузере и не отправляется на сервер, не выполняется и не сохраняется. Размер — до 2 МБ. Для CSS есть минификатор CSS.

Для вашего удобства рекомендую использовать полноэкранный режим.

Тип
Операция
Отступ

Код обрабатывается только в вашем браузере, до 2 МБ в UTF-8.

Обрабатываем код…

Исходный код

Файл не выбран
UTF-8, до 2 МБ. Файл можно перетащить на поле. Код обрабатывается только в вашем браузере.
/*! Пример */
const total=(items,rate=0.2)=>items.reduce((sum,{price,count})=>sum+price*count,0)*(1+rate)
console.log(`Итого: ${total([{price:100,count:2}])}`)

Результат

Для обработки кода включите JavaScript.


Что меняется при минификации


    
    
  • Имена локальных переменных и параметров становятся короткими: total → o. Глобальные имена и свойства объектов не переименовываются — от них может зависеть другой код.
    • 
    
  • Удаляются пробелы, переносы и комментарии. Комментарии /*! … */, @license и @preserve сохраняются.
    • 
    
  • Выражения упрощаются без изменения результата: например, if с одним действием превращается в &&.
    • 
    
  • Скрипт с import и export обрабатывается как модуль, остальной код — как обычный скрипт.
    • 



Исходный код и результат:


JavaScript
function sum(numbers) {
  let total = 0
  for (const value of numbers) {
    total += value
  }
  return total
}


JavaScript
function sum(n){let o=0;for(const t of n)o+=t;return o}


Форматирование TypeScript


Тип «TypeScript» форматирует код TypeScript и TSX по тем же правилам Prettier: аннотации типов, интерфейсы и обобщения раскладываются по строкам, а синтаксическая ошибка подсвечивается на месте. Минификации для TypeScript нет: сначала типы удаляет компилятор, а получившийся JavaScript можно сжать здесь же.


JavaScript
interface Item{price:number;count:number}


JavaScript
interface Item {
  price: number;
  count: number;
}




Вопросы и ответы


Это обфускация?


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


Почему код с JSX или TypeScript не сжимается?


Terser работает с обычным JavaScript. Сначала превратите JSX и TypeScript в JavaScript сборщиком или компилятором, а затем сожмите результат. Отформатировать TypeScript можно здесь же: выберите тип «TypeScript».


Как прочитать минифицированный скрипт?


Вставьте его и нажмите «Форматировать»: появятся отступы и переносы. Исходные имена переменных восстановить нельзя — для этого нужна карта исходников (source map).




Изучить JavaScript


Объекты и методы языка описаны в справочнике: например, объект Array и интерфейсы веб API; примеры можно запускать прямо в статьях.