Učinite minificirani kod čitljivim na mreži

Formatirajte odabranu vrstu koda

Svaki format ima vlastitu stranicu s pojedinostima važnima za taj jezik:

• Formatiraj JavaScriptJavaScript
• Formatiraj CSSCSS
• Formatiraj HTMLHTML
• Formatiraj XMLXML
• Formatiraj JSONJSON

Što je minifikacija koda?

Minifikacija smanjuje datoteku koda uklanjanjem teksta koji nije potreban za izvršavanje, primjerice dijela razmaka, prijeloma redaka i komentara. Alati za minifikaciju JavaScripta mogu i skratiti lokalne nazive te preoblikovati izraze. Razvojni programeri zadržavaju čitljive izvorne datoteke, dok alati za izgradnju stvaraju sažete inačice za isporuku. Cilj tih promjena jest očuvati ponašanje, ali njihov točan učinak ovisi o jeziku, alatu za minifikaciju i njegovim postavkama. Produkcijska datoteka zato često izgleda znatno drukčije od izvornika koji je autor uređivao.

Manje datoteke mogu smanjiti količinu prenesenih podataka, osobito u kombinaciji s mrežnim sažimanjem i predmemoriranjem. Ušteda ovisi o izvornoj datoteci i postavkama izgradnje; nema stalnog postotka ni zajamčenog ubrzanja stranice. Cijena je slabija čitljivost. Kad skripta ili stilska datoteka stigne kao zbijen redak, teško je pratiti uvjet ili pronaći selektor. Formatiranje kopije daje pregledan raspored za analizu, a izvorna izgrađena datoteka i postavke isporuke ostaju dostupni za usporedbu.

Što radi ovaj alat za deminifikaciju?

LFUnminify sažeti kod pretvara u čitljiviji raspored. Dodaje uvlake, razmake oko blokova i operatora te prijelome redaka prema odabranom alatu za formatiranje. Rezultat olakšava praćenje ugniježđenih struktura, traženje vrijednosti i pregled funkcije bez čitanja jednog zbijenog retka. Količina promjena u rasporedu ovisi o ulazu i prepoznatom jeziku, a ne o krutom pravilu da svaka naredba mora zauzimati zaseban redak.

U pozadini pokreće Prettier, alat za formatiranje koji većina JavaScript timova već koristi, izravno u vašem pregledniku. Izlaz stoga odgovara onomu što bi vaš uređivač proizveo za običnu izvornu datoteku, pa rezultat djeluje poznato, a ne strojno generirano. Prepoznavanje je automatsko: zalijepite bilo što i alat će utvrditi je li riječ o JavaScriptu, CSS-u, HTML-u, XML-u ili JSON-u te sadržaj formatirati u skladu s tim.

Formatiranje ne rekonstruira izvorni projekt. Nazivi, komentari i izvorne datoteke uklonjeni tijekom izgradnje ne mogu se vratiti samom promjenom rasporeda. Izvorne mape ili izvorni repozitorij mogu pružiti taj kontekst, ali ovaj ih alat ne učitava niti preslikava tragove stoga. Rezultat je čitljiva radna kopija za pregled, s nazivima i strukturom programa koji su ostali u dostavljenoj datoteci.

Podržani formati koda

Jedan uređivač, pet jezika. LFUnminify čita sadržaj koji zalijepite, utvrđuje o kojem je jeziku riječ i zatim ga predaje parseru izrađenom za tu sintaksu. Nikada ne morate birati format iz izbornika, a datoteka s pogrešnim nastavkom svejedno se ispravno obrađuje:

• JavaScript, uključujući ES6 i noviju sintaksu, module, asinkroni kod i JSX. Tipičan primjer je paket izrađen alatima webpack, Vite, esbuild ili Terser.
• CSS, uključujući suvremenu sintaksu, prilagođena svojstva, medijske upite i ugniježđena pravila. Prikladno za stilske datoteke prevedene alatima Tailwind, Sass ili PostCSS.
• HTML, uključujući ugrađene blokove script i style, koji se formatiraju zajedno s oznakama umjesto da ostanu u jednom dugom retku.
• XML, uključujući karte web-mjesta, RSS kanale, SVG datoteke, SOAP omotnice i konfiguracijske datoteke koje su stigle bez ijednog prijeloma retka.
• JSON, uključujući duboko ugniježđene odgovore API-ja, manifeste paketa, konfiguracijske datoteke i sadržaj zapisnika.

Kada vam treba alat za deminifikaciju koda

Deminifikacija rijetko služi samo znatiželji. Obično je najbrži način da odgovorite na konkretno pitanje o tuđem kodu ili vlastitom kodu koji više ne možete pročitati:

• Istraživanje pogreške u produkciji. Formatiranje paketa otkriva funkcije i grane koje je teško čitati u jednom retku. Izvorni položaji iz traga stoga ne preslikavaju se automatski na novi raspored; koristite razvojne alate preglednika i izvorne mape kada su dostupni.
• Provjera skripte treće strane. Prije nego što na web-mjesto dodate analitičku oznaku, dodatak za razgovor ili partnersku skriptu, formatirajte je i pročitajte koje podatke prikuplja, s kojim domenama komunicira i što zapisuje u pohranu.
• Čitanje prevedene stilske datoteke. Radni okviri s pomoćnim klasama stvaraju goleme CSS datoteke u jednom retku. Formatiranje omogućuje pregled kaskade, pronalazak pravila koje prevladava i razumijevanje zašto se vaše nadjačavanje zanemaruje.
• Pregled odgovora API-ja. JSON kopiran s kartice mrežnih zahtjeva teško je čitati dok se ne formatira. Nakon formatiranja struktura, ugniježđenost i polje koje nedostaje postaju jasni za nekoliko sekundi.
• Učenje iz stvarnog koda. Čitanjem načina na koji kvalitetna biblioteka rješava problem brzo napredujete, a formatirana datoteka omogućuje ugodno čitanje.

Kako koristiti LFUnminify

Kod možete unijeti u uređivač na tri načina. Zalijepite ga izravno u lijevo okno, kliknite Odaberi datoteku za uvoz datoteke s računala ili je povucite i ispustite na područje za unos. Za pregled resursa s aktivnog web-mjesta otvorite ga putem prikaza izvornog koda ili razvojnih alata preglednika, kopirajte i zalijepite ovdje. Možete i spremiti datoteku .js, .css, .html, .xml ili .json pa je otvoriti gumbom Odaberi datoteku.

Formatiranje počinje automatski, bez traženja gumba. Alat čeka da prestanete tipkati, prepoznaje jezik i u desnom oknu prikazuje formatirani rezultat s istaknutom sintaksom. Cijeli izlaz zatim možete jednim klikom kopirati u međuspremnik ili preuzeti kao datoteku odgovarajućeg naziva i otvoriti u vlastitom uređivaču.

Dvije sitnice koje pomažu kod dugih datoteka. Uključite brojeve redaka kada trebate navesti točan položaj ili usporediti dvije verzije jednu uz drugu, a odabir se pamti za sljedeći posjet. Ako prepoznati format nije onaj koji ste očekivali, to je obično trag samo po sebi: datoteka prepoznata kao JavaScript, a mislili ste da je JSON, često se pokaže kao JSONP odgovor ili konfiguracija omotana u naredbu dodjele.

Vaš kod nikada ne napušta računalo

Formatiranje se izvodi lokalno u pregledniku pomoću koda učitanog sa stranicom. LFUnminify ne šalje sadržaj uređivača poslužitelju za formatiranje, ne sprema ga u bazu podataka i ne zahtijeva račun za obradu. Datoteke otvorene odabirom ili povlačenjem i ispuštanjem također se čitaju lokalno. Nakon učitavanja potrebnih resursa stranice nije potreban mrežni zahtjev za formatiranje svakog unosa.

Lokalna obrada korisna je kada želite pregledati interni paket koda, projekt klijenta ili konfiguracijsku datoteku bez slanja sadržaja ovom servisu. Zadržavate nadzor nad datotekama koje otvarate i kopijama koje preuzimate. Alat ne dohvaća udaljene datoteke umjesto vas: najprije ih sami spremite ili kopirajte. Za korištenje uređivača nije potreban račun, a formatiranje ne ovisi o redu čekanja za udaljenu obradu.

Zašto je LFUnminify besplatan?

LFUnminify dio je obitelji besplatnih alata koje je izradio Ludovic Frank, uz generator lozinki, generator ikona web-mjesta, alat za izradu paleta boja i druge. Razlog je jednostavan: mali uslužni alati koje programeri koriste nekoliko puta tjedno ne bi trebali biti skriveni iza registracije, oglasa ili ograničenih kredita. Ovaj alat nema korisničke račune, kvote ni ponude za nadoplatu unutar proizvoda.

Ujedno je riječ o praktičnom primjeru našeg rada. Svaki alat iz obitelji stvarna je aplikacija, izrađena i održavana jednako kao projekti za klijente, što o našem radu govori više od bilo koje stranice s portfeljem. Ako trebate razvoj web-rješenja po mjeri, ozbiljnu aplikaciju umjesto predloška ili tehničko savjetovanje, pronađite nas putem poveznice u podnožju.

Često postavljana pitanja