Мініфікатор 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-листі, букмарклет або перевірка, наскільки малою може стати бібліотека. У справжньому проєкті мініфікацію має робити ваш бандлер під час кожної збірки, щоб вихідний код лишався читабельним.