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

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

Минификация удаляет всё, что не нужно браузеру для выполнения кода: пробелы, переносы строк, комментарии и длинные имена. Файлы меньшего размера загружаются быстрее, что улучшает время загрузки страницы и Core Web Vitals, особенно в мобильных сетях.

Этот инструмент минифицирует JavaScript с помощью Terser — минификатора, который используют webpack, Rollup и Vite, — и CSS с помощью CSSO, который ещё и реструктурирует таблицы стилей: сокращает цвета (#ffffff в #fff), убирает лишние единицы и значения (0px 0px в 0) и объединяет правила с общими селекторами или объявлениями.

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

1. Вставьте код в поле Ввод, перетащите на него файл .js или .css либо нажмите Пример.
2. Выберите JavaScript или CSS.
3. Для JavaScript опция Сокращать имена переменных переименовывает локальные переменные и параметры в однобуквенные. Экспортируемые и глобальные имена никогда не меняются.
4. Для CSS опция Объединять повторяющиеся правила сводит вместе правила с одинаковыми объявлениями.
5. Скопируйте или скачайте результат. Счётчики размера под каждым полем показывают, сколько удалось сэкономить.

Если в JavaScript есть синтаксическая ошибка, в сообщении будут строка и столбец, и к ней можно сразу перейти.

Пример

// Sum the price of every item
export function cartTotal(items, discountPercent = 0) {
  const subtotal = items.reduce(function (sum, item) {
    return sum + item.price * item.quantity
  }, 0)
  return subtotal * (1 - discountPercent / 100)
}

превращается в

export function cartTotal(t,r=0){return t.reduce(function(t,r){return t+r.price*r.quantity},0)*(1-r/100)}

Когда это пригодится

Для быстрых разовых задач: фрагмент для CDN, встроенный скрипт в HTML-письме, букмарклет или проверка того, насколько маленькой может стать библиотека. В реальном проекте минифицировать при каждой сборке должен ваш сборщик, чтобы исходники оставались читаемыми.