Минифициране / Форматиране

Минифицирайте или форматирайте код. Всичко остава в браузъра ви.

Как работи Минифициране / Форматиране

Минифицирането и разкрасяването на код компресира HTML, CSS и JavaScript чрез премахване на коментари, ненужни бели пространства и излишни символи, или разширява минифицирания код обратно в четлива форма с отстъп. Цялата обработка се извършва в браузъра с пакетирани анализатори; нищо, което поставите, не се предава никъде. Нищо, което въведете тук, не напуска устройството ви.

Минификацията пряко влияе на производителността при зареждане на страница: по-малките файлове се прехвърлят по-бързо, анализират се по-бързо и използват по-малко честотна лента. За продукционни разгръщания минифицираните ресурси са стандарт. Инструментът е полезен, когато получавате минифициран файл, който трябва да прочетете (разкрасяване), когато искате да проверите какво прави минификаторът на фрагмент, преди да го интегрирате в пайплайн за изграждане, или когато ви трябва бърза еднократна минификация без настройване на инструмент за изграждане.

Написано от Bastien Sulyan

Как да използвате Минифициране / Форматиране, стъпка по стъпка

Поставете HTML, CSS или JavaScript кода в областта за въвеждане.
Изберете типа на езика от падащото меню (HTML, CSS или JavaScript).
Щракнете върху бутона за минифициране, за да получите компресираната версия, или бутона за разкрасяване, за да разширите и отстъпите кода.
Копирайте резултата от изходната зона с бутона за копиране.
Поставете различен код и повторете, ако е необходимо.

Често срещани приложения

Front-end разработчик иска да минифицира критичен CSS фрагмент, за да го вгради в HTML хедъра за производителност над сгъването.
Разработчик получава минифициран скрипт на трета страна и трябва да го разкраси, за да разбере логиката му по време на проверка на сигурността.
Технически автор се нуждае от разкрасена версия на минифициран JSON-LD таг за скрипт за включване в документация.
Уеб разработчик проверява спестяването на байтове от минифицирането на CSS файл, преди да реши дали да добави стъпка за изграждане.

Често задавани въпроси

Изпраща ли се кодът, поставен тук, на сървър за минифициране?

Не. Минификацията и разкрасяването се извършват от собствения код на страницата, написан специално за този инструмент, а не взет от минификатор на трета страна. Цялата обработка остава в раздела на браузъра. Нищо, което поставите тук, не се предава на Sunasty или трета страна.

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

Добрият минификатор запазва поведението, само премахвайки бялото пространство, съкращавайки имена на променливи в контролиран обхват и изтривайки коментари. Инструментът е насочен към безопасни трансформации. Агресивни оптимизации като елиминиране на мъртъв код или вграждане на функции обикновено не се прилагат, тъй като изискват пълен анализ на програмата.

Мога ли да минифицирам и след това да разкрася резултата, за да го проверя?

Да. Минифицирайте кода, след което поставете минифицирания изход обратно в областта за въвеждане и щракнете върху разкрасяване. Разкрасената версия ще изглежда различно от оригиналния код (имената на променливите може да са съкратени, коментарите премахнати), но ще бъде структурно еквивалентна.

Премахва ли HTML минификацията всички коментари?

Инструментът изтрива стандартните HTML коментари () по време на минифициране. Условните коментари, използвани от стари версии на IE (), винаги се запазват, така че изтриването на коментари не може да наруши наследено поведение, което зависи от тях.

Има ли ограничение за размера на кода, който мога да минифицирам?

Ограничението е наличната памет на раздела на браузъра. Кодът до няколкостотин килобайта се обработва бързо. За големи JavaScript пакети (мегабайти) специализиран инструмент за изграждане като esbuild, Terser или Lightning CSS е по-бърз и по-подходящ за продукционна употреба.

Свързани инструменти

Пазете всичко локално, разгледайте допълнителни инструменти.

Всички инструменти за разработчици