JS минимизатор

JS минимизатор е безплатен инструмент, който премахва ненужните символи от JavaScript и показва броя на символите преди и след минимизирането.

Какъв проблем решава минимизирането на JavaScript?

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

По-малкият скрипт може да намали обема на прехвърляните данни и работата по синтактичния анализ, особено когато сайтът зарежда няколко големи пакета. HTTP компресията с Brotli или gzip също е важна, тъй като минимизирането и компресирането при прехвърляне решават различни части от проблема. Минимизирането премахва символи от изходния код, а компресията кодира повтарящите се данни в по-компактен вид при прехвърлянето.

Операцията обикновено се изпълнява при компилирането преди внедряване. Полезна е и когато проверяваш неминимизиран скрипт от външен източник, сравняваш размерите на пакети или подготвяш самостоятелен файл за сайт без автоматизиран процес за компилиране.

Успешното минимизиране не доказва, че JavaScript кодът работи правилно. Скриптът може да бъде минимизиран без грешка, но все пак да съдържа неправилни извиквания към API, недостъпни променливи или код, който се проваля едва по време на изпълнение.

Как се използва JS минимизаторът?

Постави JavaScript кода в полето JS, стартирай инструмента и копирай резултата от Минимизиран JS. Запази оригиналния файл с изходния код в системата за контрол на версиите и внедри компактното копие, вместо да заменяш четимия изходен код.

1. Първо провери синтаксиса и изпълни линтер и автоматизирани тестове върху изходния код.
2. Постави целия скрипт в JS, включително всички импорти на модули и обвиващи функции, които са част от файла.
3. Провери Символи в JS и Символи в минимизирания JS, за да видиш промяната в броя на символите.
4. Провери дали минимизираният JavaScript се изпълнява правилно в същия браузър и среда за внедряване като файла в продукционната среда.
5. Използвай разпознаваемо име, например app.min.js, ако минимизираната и четимата версия ще се съхраняват заедно.

Обработката се извършва на сървъра. Въведените данни се изпращат до него през HTTPS и не се съхраняват. Сървърът все пак трябва да получи JavaScript кода, за да го обработи, затова не изпращай изходен код, който организацията ти забранява да бъде предаван на външна услуга.

Какво съдържа минимизираният резултат?

Резултатът съдържа компактния JavaScript код и два броя на символите. Символи в JS показва дължината на входните данни, а Символи в минимизирания JS показва дължината на върнатия Минимизиран JS.

Броят се изчислява чрез функцията mb_strlen на PHP, която измерва дължината на многобайтов низ, а не просто броя на байтовете. Затова броят на символите не е равен на крайния размер на данните, прехвърлени по мрежата. Символите в UTF-8 може да заемат повече от един байт, а gzip или Brotli могат допълнително да намалят размера на предавания файл.

Инструментът не връща отделно поле за проверка или диагностика. Не очаквай да открие всяка липсваща скоба, неправилно оформен регулярен израз или неподдържана езикова възможност. По-специално грешки, свързани с JSON, като имена на свойства без кавички или запетаи след последния елемент, не са надежден начин за проверка на JavaScript, защото синтаксисът на обектните литерали в JavaScript се различава от синтаксиса на JSON. За JSON данни използвай инструмента „JSON валидатор и форматиране“.

Кратки примери и проблемни входни данни

Ето пример за проста промяна в интервалите.

Входни данни

function add(a, b) { return a + b; }

Компактен вид

function add(a,b){return a+b;}

Форматирането около обект също може да бъде премахнато, без да се променят стойностите на свойствата му.

Входни данни

const settings = { theme: "dark", retries: 2 };

Компактен вид

const settings={theme:"dark",retries:2};

Точното форматиране може да се различава между отделните минимизатори, особено при незадължителните точки и запетаи. JavaScript не може да се свие безопасно чрез изтриване на всеки интервал или нов ред. Безопасното минимизиране трябва да отчита лексикалния и синтактичния контекст, за да разграничава форматирането от символите, които влияят върху програмата.

• Интервалите в низове са данни. Интервалите в "Newcastle upon Tyne" трябва да се запазят.
• Пунктуацията може да има синтактично значение. Премахването на интервала от a + +b може да създаде различна последователност от лексикални единици.
• Новите редове понякога влияят върху автоматичното добавяне на точка и запетая, включително при код след return, break или continue. Нов ред непосредствено след throw не е допустим, защото изразът трябва да започне на същия ред.
• Символите с диакритични знаци и символите извън латиницата могат да присъстват в низове и, когато правилата на JavaScript го позволяват, в идентификатори. Размерът им в байтове може да се различава от броя на символите.
• Числата са лексикални единици в изходния код, а не указания за броене на символи. Минимизаторът трябва да запази числовото им значение, дори ако избере по-кратък еквивалентен запис.

Кога не си струва да минимизирам JavaScript?

Обикновено няма смисъл да повтаряш минимизирането, ако файлът вече е минимизиран. Второто изпълнение може да спести малко или никакво място, като същевременно затрудни проследяването на резултата от компилирането и евентуално наруши съществуващите карти на изходния код.

Няма особен смисъл и първо да форматираш, а после да минимизираш JavaScript, който ще се чете само от машина. Поддържай четим за хора изходен код и създавай от него файловете за внедряване. За утвърдено приложение инструмент за компилиране като esbuild, Rollup или webpack обикновено е по-подходящ, защото може да автоматизира обединяването на модули и генерирането на карти на изходния код. Минимизирането може да е вградено или да се добави чрез конфигурация или приставка, а Terser е специализиран минимизатор.

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

Ако подготвяш всички статични ресурси на дадена страница, CSS минимизаторът и HTML минимизаторът могат да извършат съответната операция за тези формати. Обработвай всеки формат в отделния му инструмент, защото правилата за синтактичен анализ и празни пространства са различни.

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

Инструментът създава ли карта на изходния код?

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

Може ли минимизирането да попречи на хората да копират моя JavaScript?

Не. Браузърите трябва да получат изпълнимия клиентски код, затова всеки посетител може да го изтегли и прегледа. Минимизирането прави изходния код по-труден за четене, но не осигурява поверителност, налагане на лицензионни ограничения или съществена защита на вградените тайни.

Мога ли да поставя код, който съдържа API ключове?

Не поставяй тайни API ключове, токени или частни идентификационни данни. Въведените данни се изпращат през HTTPS и не се съхраняват, но обработката се извършва на сървъра. Публичните ключове за браузъри, които умишлено се предоставят на всеки посетител, пак трябва да имат ограничения за домейн, origin, квота или разрешения, когато съответната услуга ги поддържа.

По-малкият брой символи винаги ли ускорява зареждането на страницата?

Не. Ефектът зависи от първоначалния размер на файла, кеширането, условията на връзката, сървърната компресия и количеството JavaScript, което браузърът трябва да анализира и изпълни. Проверявай както размера на компресираните данни при прехвърляне и поведението по време на изпълнение, така и общия брой символи.

Трябва ли да запазя разширението .js след минимизиране?

Да. Минимизираният JavaScript обикновено запазва разширението .js, а .min.js се използва като конвенция за именуване, когато присъстват и двете версии. Преди внедряване провери дали сървърът изпраща подходящ тип съдържание за JavaScript и дали HTML кодът или импортът на модула сочи към правилния файл.