Muuda tihendatud kood veebis loetavaks
Kleebi tihendatud JavaScripti, CSS-i, HTML-i, XML-i või JSON-i kood ja saa tagasi loetav, taandatud tulemus. Tasuta ja kohe, täielikult sinu brauseris.
Muuda kindel vorming loetavaks
Igal vormingul on oma leht, kus käsitletakse just selle keele olulisi üksikasju:
Mis on koodi tihendamine?
Arendajad kirjutavad koodi teistele arendajatele. See tähendab kommentaare, taandeid, tühje ridu plokkide vahel ja muutujanimesid, mis ütlevad, mida need sisaldavad. Kõik see aitab inimest, kuid brauser seda ei vaja. Tihendamine ehk minifitseerimine on järgu loomise etapp, mis eemaldab masinale ebavajaliku: tühikud, reavahetused, kommentaarid ning sageli ka algsed muutuja- ja funktsiooninimed, mis asendatakse üksikute tähtedega. Programmi käitumine jääb täpselt samaks, muutub ainult selle kuju.
Kasu on märgatav. Tihendatud JavaScripti pakett on sageli lähtekoodist 30 kuni 70 protsenti väiksem. Võrgu kaudu liigub vähem baite, leht kuvatakse kiiremini ja Core Web Vitals näitajad paranevad. Seetõttu pakuvad peaaegu kõik tootmiskeskkonna veebilehed tihendatud JS-i, CSS-i ja HTML-i. Puuduseks on see, et veebilehelt saadud fail koosneb ühest tihedast reast, mida inimene lugeda ei suuda. Kui pead faili mõistma, siluma või selle tegelikku tegevust auditeerima, tuleb see esmalt loetavaks muuta.
Mida see koodivormindaja teeb?
LFUnminify võtab tihendatud koodi ja loob selle ümber uuesti loetava struktuuri. See taastab taanded, paigutab iga lause eraldi reale, eraldab plokid ja operaatorid ning rakendab tuvastatud keelele ühtseid vormindusreegleid. Nelja tuhande märgi pikkusest üherealisest paketist saab mõnisada korrektselt pesastatud rida, mida saad sirvida, otsida ja analüüsida.
Tööriist kasutab otse sinu brauseris Prettierit, mida enamik JavaScripti meeskondi juba tunneb. Seega vastab tulemus sellele, mida sinu enda redaktor tavalisest lähtefailist teeks, ning mõjub tuttavalt. Vorming tuvastatakse automaatselt: kleebi kood ja tööriist teeb enne vormindamist kindlaks, kas tegu on JavaScripti, CSS-i, HTML-i, XML-i või JSON-iga.
Üks piirang tuleb kohe selgelt välja öelda. Loetavaks muutmine ei ole dekompileerimine. Kommentaarid, algsed muutujanimed ja arendaja märkused kustutati järgu loomisel ning ükski tööriist ei saa neid tagasi tuua. Tulemuseks on hästi struktureeritud, loetav ja hõlpsasti sirvitav kood, milles tihendaja lühikesed nimed jäävad alles. Praktikas piisab sellest loogika jälgimiseks, funktsiooni leidmiseks või selle nägemiseks, milliseid andmeid skript kuhu saadab.
Toetatud koodivormingud
Üks redaktor, viis keelt. LFUnminify loeb sinu kleebitud sisu, tuvastab keele ja annab selle seejärel vastava süntaksi parserile. Sa ei pea menüüst vormingut valima ning ka vale laiendiga faili käsitletakse õigesti:
- JavaScript, sealhulgas ES6 ja uuem süntaks, moodulid, asünkroonne kood ja JSX. Tavaline näide on webpacki, Vite'i, esbuildi või Terseri loodud pakett.
- CSS, sealhulgas tänapäevane süntaks, kohandatud omadused, meediapäringud ja pesastatud reeglid. Sobib hästi Tailwindi, Sassi või PostCSS-iga koostatud laadilehtedele.
- HTML, sealhulgas dokumendisisesed script- ja style-plokid, mis vormindatakse koos märgendusega ega jää üheks pikaks reaks.
- XML, sealhulgas saidikaardid, RSS-vood, SVG-failid, SOAP-ümbrised ja seadistusfailid, milles pole ühtegi reavahetust.
- JSON, sealhulgas sügavalt pesastatud API vastused, paketimanifestid, seadistusfailid ja logikirjete andmed.
Millal on koodi loetavaks muutmisest abi?
Koodi ei muudeta loetavaks tavaliselt pelgalt uudishimust. Enamasti on see kiireim viis vastata konkreetsele küsimusele võõra koodi või enda kirjutatud, kuid nüüdseks loetamatu koodi kohta:
- Tootmiskeskkonna vea silumine. Pinujälg osutab paketi 1. rea 24815. veerule. Vormindamine annab failile päris reanumbrid ja aitab leida funktsiooni, mis vea tegelikult tekitas.
- Kolmanda osapoole skripti audit. Enne analüütikamärgise, vestlusvidina või partnerprogrammi skripti lisamist oma lehele muuda see loetavaks ja vaata, mida see kogub, milliste domeenidega suhtleb ning mida salvestab.
- Kompileeritud laadilehe lugemine. Abiklassidel põhinevad raamistikud väljastavad tohutuid üherealisi CSS-faile. Vormindamine näitab kaskaadi, aitab leida peale jääva reegli ja mõista, miks sinu ülekirjutust eiratakse.
- API vastuse uurimine. Võrgupaneelilt kopeeritud JSON-andmed on enne vormindamist raskesti loetavad. Pärast vormindamist tulevad struktuur, pesastus ja puuduv väli mõne sekundiga esile.
- Päris koodist õppimine. Hästi tehtud teegi tegeliku lahenduse lugemine aitab kiiresti areneda ning vormindatud fail on ainus viis seda mugavalt teha.
Kuidas LFUnminifyd kasutada?
Koodi saab redaktorisse tuua kolmel viisil. Kleebi see otse vasakule paneelile, vajuta nuppu Vali fail ja impordi fail oma arvutist või lohista fail sisestusalale. Veebilehe avaldatud faili uurimiseks ava see brauseri lähtekoodivaates või arendustööriistades, kopeeri ja kleebi siia. Võid ka .js-, .css-, .html-, .xml- või .json-faili salvestada ja failivalijaga avada.
Vormindamine algab ise, eraldi nuppu pole vaja otsida. Tööriist ootab, kuni lõpetad kirjutamise, tuvastab keele ja kuvab paremal paneelil süntaksivärvidega vormindatud tulemuse. Sealt saad kogu väljundi ühe klõpsuga lõikelauale kopeerida või sobiva nimega failina alla laadida, et see oma redaktoris avada.
Pikkade failide puhul aitavad kaks väikest võimalust. Lülita sisse reanumbrid, kui pead viitama täpsele kohale või võrdlema kõrvuti kahte versiooni. Eelistus jääb järgmiseks külastuseks meelde. Kui tuvastatud vorming erineb oodatust, võib see ise olla vihje: fail, mida pidasid JSON-iks, kuid mis parsitakse JavaScriptina, osutub sageli JSONP-vastuseks või omistamislause sisse pakitud seadistuseks.
Sinu kood ei lahku kunagi sinu arvutist
See on piisavalt tähtis, et otse välja öelda. Vormindamine toimub kohapeal sinu brauseris, kasutades koos lehega laaditud JavaScripti. Sinu koodi ei laadita üles, ei panda serveris järjekorda, ei kirjutata andmebaasi ega logita. Pärast lehe laadimist võid võrguühenduse katkestada ja tööriist töötab edasi. See on lihtsaim tõend, et midagi ei saadeta.
Seega saad siia kleepida ettevõttesisest koodi, sisemise paketi, kliendiprojekti või seadistusfaili, mille struktuuri sa jagada ei soovi. Ükski kleebitud või avatud sisu ei lahku brauserist. Tööriist ei hangi sinu eest faile, nii et meie server ei saa teada, millist koodi või milliseid lehti sa uurid. Kontot pole vaja luua ning kleebitud sisu ei jälgita.
Miks on LFUnminify tasuta?
LFUnminify kuulub Ludovic Franki loodud tasuta tööriistade perre koos parooligeneraatori, favicon'i generaatori, värvipaleti koostaja ja teistega. Mõte on lihtne: väikesed abivahendid, mida arendajad mitu korda nädalas vajavad, ei peaks peituma registreerimisvormi, reklaamimüüri või kasutuslimiidi taga. Siin pole kontot, kvooti ega rakendusesisest tasulise paketi pakkumist.
See on ühtlasi näide meie tööst. Iga selle pere tööriist on päris rakendus, mida arendatakse ja hooldatakse samamoodi nagu kliendiprojekte. See ütleb meie tööviisi kohta rohkem kui portfoolioleht. Kui vajad kohandatud veebiarendust, tõsiseltvõetavat rakendust või tehnilist nõustamist, leiad meid jaluses oleva lingi kaudu.
Korduma kippuvad küsimused
Kas tihendatud failist saab algse lähtekoodi taastada?
Mitte täielikult ning tasub olla ettevaatlik tööriistadega, mis seda lubavad. Tihendamine kustutab kommentaarid jäädavalt ja asendab muutujanimed tavaliselt üksikute tähtedega, seega seda teavet failis enam pole. LFUnminify taastab struktuuri, taanded ja reavahetused, et koodi saaks taas lugeda ja sirvida, kuid ei saa välja mõelda nimesid ega kommentaare, mis järgu loomisel eemaldati. Kui koos paketiga on avaldatud lähtekoodikaart ehk source map, on see ainus viis päris algse koodi taastamiseks.
Kas minu kood saadetakse serverisse?
Ei. Vormindamine toimub täielikult sinu brauseris JavaScriptiga, mis laaditi koos lehega. Midagi ei laadita üles, salvestata ega logita. Meie server ei hangi ka sinu eest midagi. Kui soovid uurida mõne veebilehe faili, kopeerid või salvestad selle ise ja avad siin, nii et kogu töö jääb sinu ja sinu brauseri vahele.
Milliseid vorminguid toetatakse?
JavaScript, CSS, HTML, XML ja JSON. Vorming tuvastatakse automaatselt sisu põhjal, seega ei pea sa seda ise valima. Iga keelt käsitleb selle jaoks mõeldud parser. JavaScripti puhul toetatakse tänapäevast süntaksit, sealhulgas ES-mooduleid ja JSX-i, CSS-i puhul kohandatud omadusi ja pesastatud reegleid ning XML-i puhul kõike saidikaartidest ja RSS-voogudest SVG-failideni.
Kas faili suurusel on piirang?
Kleebitud sisule pole kindlat suurusepiirangut, kuid väga suured failid võtavad rohkem aega, sest töö toimub serveri asemel sinu arvuti protsessoris. Mõne megabaidised paketid vormindatakse tavalisel sülearvutil mugavalt. Failivalijaga avatud või sisestusalale lohistatud failidele kehtib sama põhimõte, sest neid loetakse kohapeal ega laadita üles.
Mis vahe on tihenduse eemaldamisel ja vormindamisel?
Praktikas kirjeldavad need sõnad sama toimingut ning tööriist teeb mõlemat korraga. Tihenduse eemaldamine tähendab tavaliselt faili kokkusurumisega tehtud paigutuse muutmist loetavaks. Vormindamine tähendab iga koodi, tihendatud või mitte, ühtsete stiilireeglite järgi korrastamist. Kuna LFUnminify kasutab sisendi töötlemiseks Prettierit, saad sellega parandada ka halvasti taandatud koodi, mida pole kunagi tihendatud.
Kas seda saab kasutada hägustatud JavaScriptiga?
Seda saab vormindada ja see on sageli kasulik esimene samm, kuid vormindamine ei eemalda hägustamist. Hägustajad lähevad tihendajatest kaugemale: kodeerivad stringe, tükeldavad juhtvoogu ja lisavad tahtlikult kasutut koodi. Sellise faili vormindamine annab loetava struktuuri, milles on lihtsam loogikat jälgida, kuid tahtlik eksitamine jääb alles.