JavaScript Форматировщик и Минификатор

Что такое форматирование JavaScript?

Ключевые возможности

Примеры

function add(a,b){return a+b}const doubled=[1,2,3].map(x=>x*2);console.log(doubled)

async function load(id){const r=await fetch(`/api/${id}`);if(!r.ok)throw new Error('bad');return r.json()}

const cfg={retries:3,timeout:5000,headers:{'Content-Type':'application/json'},onError(e){console.warn(e)}}

class Counter{#n=0;inc(){this.#n++}get value(){return this.#n}}

Типичные сценарии

Чтение минифицированного кода

Сделайте красивый вывод минифицированного или обфусцированного скрипта, чтобы понять его и отладить.

Code review

Отформатируйте JavaScript перед пул-реквестом для единообразного и читаемого кода.

Меньший размер бандлов

Минифицируйте production-JavaScript с помощью Terser, чтобы сократить байты и ускорить загрузку.

Приведение в порядок фрагмента

Переформатируйте быструю вставку из консоли или gist в чистый, читаемый код.

Технические детали

Красивый вывод с js-beautify

Использует проверенный движок js-beautify для предсказуемых и настраиваемых отступов и интервалов.

Минификация с Terser

Terser — де-факто стандартный минификатор JavaScript: переименовывает локальные переменные, удаляет мёртвый код и комментарии, сохраняя поведение.

Работа в браузере

Выполняется полностью на стороне клиента; ваш код никогда не покидает устройство и не попадает на сервер.

Лучшие практики

Форматируйте исходники, минифицируйте для production

Храните читаемый код в репозитории и позвольте сборке минифицировать его с помощью Terser.

С осторожностью минифицируйте современный синтаксис

Terser нацелен на стандартный JavaScript; очень новые предложения могут потребовать предварительного шага транспиляции.

Не редактируйте минифицированный вывод вручную

Переименованные переменные делают минифицированный код трудным для поддержки — редактируйте исходник, затем минифицируйте снова.

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