JavaScript saīsinātājs un formatētājs

Kas ir šis rīks?

JavaScript saīsinātājs pārraksta kodu, lai tas būtu pēc iespējas mazāks, saglabājot identisku uzvedību: tas saīsina mainīgo un funkciju nosaukumus, kur tas ir droši, noņem komentārus un atstarpes, saliec konstantes un novērš nesasniedzamu kodu.

Šis rīks ir veidots uz Terser bāzes, AST balstīta saīsinātāja, ko izmanto webpack, Vite, Rollup un lielākā daļa mūsdienu JavaScript būvēšanas rīku. Tā kā tas faktiski parsē jūsu kodu, nevis meklē teksta modeļus, tas pareizi atšķir dalīšanas operatoru no regex literāļa, nesalauž veidņu virknes, kas satur //-izskatīgas sekvences, un nepārdēvēs mainīgo par nosaukumu, kas sadursies ar kaut ko ārējā darbības jomā.

Kāpēc to izmantot?

• AST balstīta saīsināšana (Terser), tas pats dzinējs, ko izmanto lielākie pakotāji — droši ar regex literāļiem, veidņu virknēm un slēgumiem.
• Sagroza mainīgo nosaukumus reālam izmēra ietaupījumam, ne tikai atstarpju noņemšanai.
• Redziet precīzi, cik baitu un procentuāli ietaupījāt.
• Formāta režīms pārvērš aizsegtu, vienas rindas saīsinātu JS atpakaļ lasāmā, ievilktā kodā — noderīgi, lai saprastu trešo pušu skriptus.
• 100% lokāla apstrāde — patentēts kods nekad neatstāj jūsu pārlūku.

Kā to lietot

1. Ielīmējiet savu JavaScript ievades lodziņā, vai nospiediet "Ielādēt piemēru", lai izmēģinātu paraugu ar regex literāli un veidnes virkni.
2. Nospiediet "Saīsināt", lai to saspiestu, vai "Formatēt", lai to skaistinātu ar 2-atstarpju ievilkumu.
3. Pārbaudiet ziņojumu zem lodziņiem — saīsināšanas režīms parāda izmēra samazinājumu; sintakses kļūda jūsu kodā parāda skaidru ziņojumu, nevis klusi rada salauztu izvadi.
4. Nospiediet "Kopēt", lai iegūtu rezultātu.

Piemērs

Ievade

function greet(name) {
  const pattern = /^[a-z]+$/i;
  const msg = `Hello, ${name}!`;
  if (pattern.test(name)) {
    // simple check
    return msg;
  }
  return "Hi there";
}

Izvade

function greet(n){const e=/^[a-z]+$/i,g=`Hello, ${n}!`;return e.test(n)?g:"Hi there"}

Mainīgo nosaukumi ir saīsināti, komentārs un if-instrukcija ir sakļauta izteiksmē, bet regex literālis un veidnes virkne tiek saglabāta tieši, un uzvedība nemainās.

Praktiski padomi

• Saīsiniet būvēšanas laikā, nevis rediģējot ar roku — glabājiet lasāmu avota kodu versiju kontrolē un ģenerējiet saīsinātu pakotni kā būvēšanas soli.
• Ja saīsinātā izvade uzvedas negaidīti, pārbaudiet, vai kods nepaļaujas uz Function.prototype.name vai refleksiju — sagrozīšana pārdēvē funkcijas, un tas var izpausties retos malas gadījumos.
• Trešās puses skripta formatēšana pirms tā lasīšanas ir daudz ātrāka nekā mēģinājums parsēt vienu 2000 rakstzīmju garu rindu.
• Apvienojiet ar HTML un CSS saīsinātājiem zemāk, ja sagatavojat pilnu statisku pakotni izvietošanai.

Kā tas iekļaujas reālās darbplūsmās

JavaScript parasti ir lielākais renderēšanu vai parsēšanu bloķējošais resurss lapā, tāpēc tā saīsināšanai ir reāla, izmērāma ietekme uz ielādes laiku — vairāk nekā HTML vai CSS baits pret baitu. Lielākā daļa mūsdienu ietvaru to dara automātiski būvēšanas laikā, taču rokrakstā rakstīti skripti, pārlūka paplašinājumi un grāmatzīmju sīklietotnes bieži tiek izlaisti nesaīsinātā veidā, ja vien kāds tos nepalaiž caur šādu rīku.

Formāta virziens bieži tiek izmantots pretējā virzienā: produkcijas kļūdas atkļūdošana no saīsinātas steka izsekošanas ir daudz vieglāka, kad apkārtējais kods ir pārformatēts un lasāms, pat bez oriģinālajiem mainīgo nosaukumiem.

→ HTML minificētājs · CSS minifikators

Biežākie lietošanas gadījumi

• Atsevišķa skripta vai grāmatzīmes sīklietotnes saīsināšana pirms publicēšanas.
• Saīsināta skripta, kas iegūts no reālas vietnes, pārformatēšana, lai saprastu, ko tas dara.
• JavaScript, kas ielīmēts no foruma ieraksta vai AI ģenerēta fragmenta, sakārtošana pirms rūpīgas izlasīšanas.
• Ātra pārbaude, vai rokrakstā rakstītam JS fragmentam ir sintakses kļūda, jo parsēšanas kļūme parādās kā skaidrs ziņojums.

Biežāk uzdotie jautājumi