Pārveidojiet saspiestu kodu lasāmā veidā tiešsaistē

Izvēlieties formatējamo koda veidu

Katram formātam ir sava lapa ar konkrētajai valodai svarīgu informāciju:

• Formatēt JavaScriptJavaScript
• Formatēt CSSCSS
• Formatēt HTMLHTML
• Formatēt XMLXML
• Formatēt JSONJSON

Kas ir koda minificēšana?

Izstrādātāji raksta kodu tā, lai to saprastu arī citi izstrādātāji. Tāpēc tajā ir komentāri, atkāpes, tukšas rindas starp blokiem un mainīgo nosaukumi, kas paskaidro to saturu. Tas viss palīdz cilvēkiem, bet pārlūkam nav vajadzīgs. Minificēšana ir būvēšanas posms, kurā noņem mašīnai nevajadzīgo: atstarpes, rindu pārnesumus, komentārus un bieži arī sākotnējos mainīgo un funkciju nosaukumus, aizstājot tos ar atsevišķiem burtiem. Programmas darbība paliek tā pati, mainās tikai tās pieraksts.

Ieguvums ir jūtams. Minificēta JavaScript pakotne parasti ir par 30 līdz 70 procentiem mazāka par avota kodu. Tīklā jāpārsūta mazāk baitu, pirmais attēlojums notiek ātrāk un uzlabojas Core Web Vitals rādītāji. Tādēļ gandrīz visas publiskās vietnes piegādā minificētu JS, CSS un HTML. Taču lejupielādētais fails var būt viena blīva, cilvēkam nelasāma rinda. Lai saprastu šādu failu, meklētu tajā kļūdas vai pārbaudītu tā darbību, vispirms jāatjauno lasāms formatējums.

Ko dara šis koda formatēšanas rīks?

LFUnminify paņem minificētu kodu un atjauno tam lasāmu struktūru. Rīks ievieto atkāpes, izvieto priekšrakstus atsevišķās rindās, atdala blokus un operatorus ar atstarpēm un piemēro noteiktajai valodai atbilstošus formatēšanas noteikumus. Četrus tūkstošus rakstzīmju gara vienrindas pakotne pārtop vairākos simtos pareizi ligzdotu rindu, kurās var pārvietoties, meklēt un izsekot programmas loģikai.

Pamatā darbojas Prettier, formatētājs, kuru jau izmanto daudzas JavaScript komandas. Tas tiek palaists tieši jūsu pārlūkā. Tāpēc rezultāts atbilst tam, ko jūsu redaktors izveidotu parastam avota failam, un izskatās pazīstams. Formātu nosaka automātiski: ielīmējiet kodu, un rīks atpazīs JavaScript, CSS, HTML, XML vai JSON, pirms piemēros attiecīgo formatējumu.

Jāņem vērā viena būtiska robeža. Lasāma formatējuma atjaunošana nav dekompilēšana. Komentāri, sākotnējie mainīgo nosaukumi un izstrādātāja piezīmes būvēšanas laikā tika dzēsti, un neviens rīks tos nespēj atgūt. Jūs saņemat labi strukturētu kodu, kurā var orientēties, taču minificētāja saīsinātie nosaukumi paliek. Praksē ar to parasti pietiek, lai izsekotu loģikai, atrastu funkciju vai pamanītu, kādus datus skripts sūta un uz kurieni.

Atbalstītie koda formāti

Viens redaktors, piecas valodas. LFUnminify nolasa ielīmēto saturu, nosaka valodu un nodod to attiecīgajai sintaksei paredzētam parsētājam. Nav jāizvēlas formāts izvēlnē, un arī fails ar nepareizu paplašinājumu tiek apstrādāts pēc tā satura:

• JavaScript, tostarp ES6 un jaunāka sintakse, moduļi, asinhrons kods un JSX. Tipisks piemērs ir ar webpack, Vite, esbuild vai Terser izveidota pakotne.
• CSS, tostarp mūsdienu sintakse, pielāgotie rekvizīti, mediju vaicājumi un ligzdotas kārtulas. Piemērots ar Tailwind, Sass vai PostCSS apstrādātām stila lapām.
• HTML, tostarp iekļautie script un style bloki, kas tiek formatēti kopā ar marķējumu, nevis atstāti vienā garā rindā.
• XML, tostarp vietņu kartes, RSS plūsmas, SVG faili, SOAP aploksnes un konfigurācijas faili, kuros nav neviena rindas pārnesuma.
• JSON, tostarp dziļi ligzdotas API atbildes, pakotņu manifesti, konfigurācijas faili un žurnālu ierakstu dati.

Kad noder minificēta koda formatēšana

Minificēta koda lasīšana reti ir tikai ziņkāre. Parasti tā ir ātrākā iespēja atbildēt uz konkrētu jautājumu par svešu kodu vai paša rakstītu kodu, kas pēc būvēšanas vairs nav salasāms:

• Kļūdas meklēšana publicētā vietnē. Steka izsekojums norāda uz pakotnes 1. rindas 24815. kolonnu. Formatēšana dod īstus rindu numurus un palīdz atrast funkciju, kurā radās kļūda.
• Trešās puses skripta pārbaude. Pirms ievietojat vietnē analītikas tagu, tērzēšanas logrīku vai partnera skriptu, sakārtojiet tā kodu un apskatiet, ko tas vāc, ar kādiem domēniem sazinās un ko saglabā.
• Kompilētas stila lapas lasīšana. Palīgklašu ietvari veido milzīgus vienrindas CSS failus. Formatējums ļauj izsekot kaskādei, atrast noteicošo kārtulu un saprast, kāpēc jūsu pārrakstīšana nedarbojas.
• API atbildes izpēte. No tīkla cilnes kopēts JSON bez formatējuma ir grūti lasāms. Pēc sakārtošanas dažu sekunžu laikā kļūst redzama struktūra, ligzdojums un trūkstošais lauks.
• Mācīšanās no reāla koda. Lasot, kā labi veidota bibliotēka risina problēmu, var ātri papildināt zināšanas. Pareizi formatēts fails ļauj to darīt bez liekas piepūles.

Kā lietot LFUnminify

Kodu redaktorā var ievietot trīs veidos. Ielīmējiet to kreisajā panelī, nospiediet Izvēlēties failu, lai atvērtu failu no datora, vai ievelciet failu ievades laukā. Lai izpētītu vietnes piegādātu resursu, atveriet tā avotu pārlūka view-source skatā vai izstrādātāja rīkos, nokopējiet saturu un ielīmējiet šeit. Varat arī saglabāt .js, .css, .html, .xml vai .json failu un atvērt to ar faila izvēli.

Formatēšana sākas pati, nav jāmeklē īpaša poga. Rīks nogaida, līdz beidzat rakstīt, nosaka valodu un parāda sakārtoto rezultātu labajā panelī ar sintakses iekrāsojumu. Pēc tam ar vienu klikšķi varat kopēt visu rezultātu starpliktuvē vai lejupielādēt to failā ar piemērotu nosaukumu, lai atvērtu savā redaktorā.

Darbā ar gariem failiem noder divas lietas. Ieslēdziet rindu numurus, ja jānorāda precīza vieta vai blakus jāsalīdzina divas versijas; izvēle saglabāsies arī nākamajam apmeklējumam. Ja noteiktais formāts neatbilst gaidītajam, tā bieži ir norāde uz pašu saturu. Piemēram, par JSON uzskatīts fails, kuru rīks atpazīst kā JavaScript, var izrādīties JSONP atbilde vai konfigurācija, kas ietverta piešķīruma izteiksmē.

Jūsu kods paliek jūsu ierīcē

To ir svarīgi pateikt skaidri. Formatēšana notiek lokāli jūsu pārlūkā, izmantojot JavaScript, kas vienreiz ielādēts kopā ar lapu. Jūsu kods netiek augšupielādēts, ievietots servera rindā, ierakstīts datubāzē vai saglabāts žurnālos. Pēc lapas ielādes varat atvienoties no tīkla, un rīks joprojām darbosies. Tas ir vienkāršākais apliecinājums, ka saturs nekur netiek sūtīts.

Tāpēc varat ielīmēt slēgtu avota kodu, iekšēju pakotni, klienta projektu vai konfigurācijas failu ar struktūru, kuru nevēlaties izpaust. Nekas no ielīmētā vai atvērtā satura neatstāj jūsu pārlūku. Rīks arī neiegūst failus jūsu vārdā, tāpēc mūsu serveris neuzzina, kādu kodu vai vietnes aplūkojat. Nav jāveido konts, un ielīmētā satura izsekošana nenotiek.

Kāpēc LFUnminify ir bez maksas?

LFUnminify ir viens no Ludovic Frank izveidotajiem bezmaksas rīkiem līdzās paroļu ģeneratoram, favicon ģeneratoram, krāsu palešu veidotājam un citām utilītprogrammām. Iemesls ir vienkāršs: nelieliem rīkiem, kas izstrādātājiem vajadzīgi vairākas reizes nedēļā, jābūt pieejamiem bez reģistrācijas, reklāmu sienas vai kredītu ierobežojuma. Šim rīkam nav kontu, kvotu vai aicinājumu iegādāties papildu iespējas.

Tas vienlaikus ir arī praktisks darba piemērs. Katrs šīs saimes rīks ir īsta lietotne, kas tiek izstrādāta un uzturēta tāpat kā klientu projekti. Tas par mūsu pieeju pasaka vairāk nekā portfolio lapa. Ja jums nepieciešama pielāgota tīmekļa izstrāde, nopietna lietotne vai tehniska konsultācija, saiti uz mūsu pakalpojumiem atradīsiet kājenē.

Biežāk uzdotie jautājumi