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

Минифицируйте JavaScript (Terser), CSS (CSSO), HTML, JSON или XML в одном инструменте: выберите язык, вставьте код и узнайте экономию в байтах. В браузере.

Вывод

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

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

Просмотреть Все

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

Минификатор кода — единое место для минификации сразу нескольких языков. Выберите JavaScript, CSS, HTML, JSON или XML, и инструмент применит подходящий минификатор, показав размер исходного и сжатого кода.

Как пользоваться Минификатор кода

  1. Выберите Язык.
  2. Вставьте код в поле ввода.
  3. Нажмите Минифицировать (результат также обновляется по мере ввода).
  4. Скопируйте или скачайте сжатый код.

Пример

Ввод
a { color : red ; }
Вывод
a{color:red}

Язык: CSS.

Когда использовать Минификатор кода

Используйте для быстрой разовой минификации и сравнения размеров. В продакшене минифицируйте в сборочном конвейере с source map. Подробности о каждом движке — на страницах отдельных минификаторов.

Как работает Минификатор кода

Для каждого языка используется отдельный движок: JavaScript — Terser со сжатием и укорачиванием локальных имён; CSS — структурная минификация CSSO после проверки скобок и строк; HTML — безопасный минификатор, который удаляет комментарии и схлопывает пробелы, но не трогает pre, textarea, script и style; JSON — строгий разбор и компактный вывод с сохранением чисел; XML — проверка корректности, затем удаление пробелов между тегами и комментариев.

Распространенные Случаи Использования

  • Минификация фрагмента перед встраиванием в страницу
  • Сравнение размера разных версий кода
  • Сжатие JSON- или XML-данных
  • Удаление комментариев перед публикацией кода

Примечание по Безопасности

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

Часто Задаваемые Вопросы

Какой язык выбран по умолчанию?

JavaScript. Измените его в списке выбора языка.

Создаются ли source map?

Нет.

Можно ли минифицировать TypeScript?

Нет, сначала скомпилируйте TypeScript в JavaScript.

Что сделать дальше

Экранирование строк
Один инструмент для экранирования и обратного преобразования строк для JSON, JavaScript, HTML, XML, компонентов URL, регулярных выражений, SQL, CSS и аргументов оболочки.
Тестер CSS-селекторов
Проверяйте CSS-селекторы на вставленном HTML и смотрите каждый найденный элемент с разметкой и текстом. Использует querySelectorAll, поэтому результат совпадает с браузером.
Генератор CSS box-shadow
Создавайте CSS box-shadow визуально: несколько слоёв, смещение, размытие, растяжение, inset и прозрачность RGBA. Живой предпросмотр и готовый код.
Генератор CSS-градиентов
Создавайте линейные, радиальные и конические CSS-градиенты с точками цвета, углами, повторением и интерполяцией OKLCH. Предпросмотр и готовый код.
Генератор CSS Flexbox
Настраивайте направление, перенос, выравнивание и отступы flex-контейнера, а также рост, порядок и выравнивание каждого элемента визуально. Готовый CSS-код.
Генератор CSS Grid
Стройте CSS Grid визуально: grid-template-columns/rows, именованные области с проверкой, отступы, выравнивание и размещение элементов. Чистый CSS.

Другие категории