Oddeľte čitateľnosť od veľkosti súboru
Formátovač usporiada medzery a zlomy riadkov, aby človek vedel kód skontrolovať. Minifikátor odstráni niektoré medzery alebo komentáre a zmenší prenášaný text. Sú to rozdielne ciele: čitateľné CSS uľahčuje úpravy, kým kompaktné CSS sa môže hodiť do zverejneného súboru. Ani jedna operácia neopraví chybný kód sama. MultiVerto má samostatné nástroje na formátovanie a minifikáciu CSS a HTML, formátovač JavaScriptu aj čitateľný a kompaktný výstup JSON. Vyberte nástroj podľa skutočného jazyka vstupu. JSON nie je ľubovoľný JavaScript a stránka HTML nie je to isté čo XML. Pôvodný súbor si nechajte, aby ste vedeli výsledok porovnať a nevhodnú úpravu zahodiť.
Konkrétny príklad CSS
Začnite reťazcom h1{color:#334155;margin:0;}p{line-height:1.5;}. Formátovač CSS presunie pravidlá a deklarácie na samostatné odsadené riadky. Ľahšie si všimnete, že h1 má dve deklarácie a p jednu. Minifikátor CSS môže vrátiť reťazec podobný vstupu po odstránení nepotrebných medzier a poslednej bodkočiarky pred uzatváracou zloženou zátvorkou. Po prevode skontrolujte farby, selektory a hodnoty vlastností. Vo vloženom formátovači zmeňte jednu deklaráciu a sledujte, kde sa objaví v čitateľnom výstupe. Potom výsledok preneste do prepojeného minifikátora. Na skutočnom webe porovnajte vypočítané štýly v prehliadači na reprezentatívnych stránkach; syntakticky prijateľný reťazec ešte nedokazuje rovnaké správanie všetkých selektorov.
- Originál → formátovanie pre čítanie
- Kontrola syntaxe a správania v aplikácii
- Minifikovať kópiu → znova otestovať vydaný súbor
Rešpektujte hranice jazykov
Nástroj na čitateľný JSON vstup parsuje a znovu serializuje s odsadením; kompaktný nástroj serializuje naparsovanú hodnotu bez voliteľných medzier. Kontroluje tak syntax JSON, nie schému údajov. Parsovanie a serializácia môžu zmeniť textové detaily, napríklad medzery, zápis čísel alebo poradie prezentácie kľúčov; ak záleží na presnom texte, porovnajte hodnoty. HTML obsahuje textové uzly, v ktorých medzery môžu mať význam, preto konzervatívny minifikátor nemusí odstrániť každú medzeru pri vnorenom obsahu. CSS má reťazce, funkcie a komentáre vyžadujúce znalosť syntaxe. JavaScript je ešte zložitejší: jednoduchý formátovač MultiVerto zámerne odmieta niektoré konštrukcie vrátane šablónových reťazcov a určitých regulárnych výrazov. Na produkčný kód so širšou syntaxou použite plnohodnotný parserový build nástroj.
Kontrolujte v správnom poradí
Najprv pracujte s malou reprezentatívnou kópiou. Spustite formátovanie, porovnajte výstup so vstupom a overte, že reťazce, komentáre a špeciálne znaky zostali tam, kde ich aplikácia potrebuje. Ak nástroj vstup odmietne, prečítajte chybu namiesto jeho presúvania do nástroja pre iný jazyk. Až keď čitateľná verzia prejde kontrolou, podľa potreby použite príslušný minifikátor. Upravený súbor otestujte v skutočnom prehliadači alebo aplikácii vrátane stavov závislých od medzier, selektorov a textových hodnôt. JSON výstup znova naparsujte a porovnajte štruktúru údajov. Pri CSS a HTML potrebujete vizuálnu kontrolu a projektové testy; samotné formátovanie rovnaké správanie nezaručuje.
Poznajte hranice sľubov nástroja
Formátovač nie je čističom nedôveryhodného HTML a minifikácia nechráni zdrojový kód ani tajomstvá. Súkromné kľúče či prihlasovacie údaje nevkladajte do verejnej ukážky. Odstránením komentárov sa môžu stratiť licenčné oznámenia alebo značky, ktoré má proces vydania zachovať; overte si to pred minifikáciou. Ak pravidlo CSS používa nezvyčajnú syntax alebo príklad JavaScriptu obsahuje šablónový reťazec, vyberte nástroj, ktorý danú konštrukciu výslovne podporuje, a výsledok skontrolujte. Pri neúspešnom prevode je chyba lepšia než hádaný kód. Tieto lokálne nástroje v prehliadači pomáhajú pri kontrole a malých úpravách. Pre zverejnenie majú kroky patriť do verziovaného zostavovacieho procesu s testami súborov, ktoré používatelia naozaj načítajú. Pri štýloch okrem úvodnej stránky skontrolujte aj malé obrazovky, tlačový režim a stavy ovládačov, ktoré sa zobrazujú až po kliknutí. Pravidlo CSS môže vyzerať bez zmeny, ale iný súbor, poradie načítania alebo chyba inde v projekte môže výsledok zmeniť. Uchovanie originálu a porovnanie reálneho zobrazenia je preto dôležitejšie než samotný rozdiel počtu znakov.