„JavaScript" suspaustuvas ir formatuoklė

Kas yra šis įrankis?

„JavaScript" suspaustuvas iš naujo perrašo kodą, kad jis būtų kuo mažesnis, elgdamasis identiškai: sutrumpina kintamųjų ir funkcijų pavadinimus ten, kur saugu, pašalina komentarus ir tarpus, sujungia konstantas ir pašalina nepasiekiamą kodą.

Šis įrankis sukurtas naudojant Terser, AST pagrindu veikiantį suspaustuvą, naudojamą webpack, Vite, Rollup ir daugumos šiuolaikinių „JavaScript" surinkimo įrankių. Kadangi jis iš tikrųjų perpina jūsų kodą, o ne teksto atitikimą pagal šablonus, jis teisingai atskiria dalybos operatorių nuo regex literalo, nesugadina šablonų eilučių, kuriose yra //-panašios sekos, ir nepervardins kintamojo pavadinimu, kuris susikirtų su kažkuo išorinėje apimtyje.

Kodėl jį naudoti?

• AST pagrindu veikianti suspauda (Terser), tas pats variklis, naudojamas didžiųjų surinkimo įrankių – saugus su regex literalais, šablonų eilutėmis ir uždarymais.
• Trumpina kintamųjų pavadinimus realiam dydžio sutaupymui, ne tik tarpų pašalinimui.
• Pamatykite tiksliai, kiek baitų ir kokį procentą sutaupėte.
• Formatavimo režimas paverčia užšifruotą, vienoje eilutėje suspaustą JS atgal į skaitomą, atitrauktą kodą – naudinga suprasti trečiųjų šalių scenarijus.
• 100% vietinis apdorojimas – nuosavybinis kodas niekada nepalieka jūsų naršyklės.

Kaip naudoti

1. Įklijuokite savo „JavaScript" kodą į įvesties langelį arba spustelėkite „Įkelti pavyzdį", kad išbandytumėte pavyzdį su regex literalu ir šablono eilute.
2. Spustelėkite „Suspausti", kad jį suglaudintumėte, arba „Formatuoti", kad jį pagražintumėte su 2 tarpų atitraukimu.
3. Patikrinkite pranešimą po langeliais – suspaudimo režimas rodo dydžio sumažėjimą; sintaksės klaida jūsų kode rodo aiškų pranešimą, o ne tyliai sukuria sugadintą išvestį.
4. Spustelėkite „Kopijuoti", kad gautumėte rezultatą.

Pavyzdys

Įvestis

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

Išvestis

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

Kintamųjų pavadinimai sutrumpinami, komentaras ir if sakinys suglaudinami į reiškinį, tačiau regex literalas ir šablono eilutė išsaugomi tiksliai, o elgesys nepakinta.

Praktiniai patarimai

• Suspauskite surinkimo metu, ne rankiniu redagavimu – laikykite skaitomą šaltinį versijų kontrolėje ir generuokite suspaustą paketą kaip surinkimo žingsnį.
• Jei suspausta išvestis elgiasi netikėtai, patikrinkite, ar kodas nesiremia Function.prototype.name ar refleksija – pavadinimų trumpinimas pervardina funkcijas, ir tai gali pasireikšti retais atvejais.
• Trečiosios šalies scenarijaus formatavimas prieš jį skaitant yra daug greičiau nei bandymas perprasti vieną 2000 simbolių eilutę.
• Sujunkite su HTML ir CSS suspaustuvais žemiau, jei ruošiate pilną statinį paketą diegimui.

Kur tai naudojama praktiniame darbe

„JavaScript" paprastai yra didžiausias atvaizdavimą ar perpynimą blokuojantis resursas puslapyje, tad jo suspaudimas turi realų, matuojamą poveikį įkėlimo laikui – daugiau nei HTML ar CSS baitas už baito. Dauguma šiuolaikinių karkasų tai daro automatiškai surinkimo metu, tačiau ranka rašyti scenarijai, naršyklės plėtiniai ir bookmarklets dažnai išsiunčiami nesuspausti, nebent kažkas juos praleidžia per tokį įrankį kaip šis.

Formatavimo kryptis dažnai naudojama priešinga tvarka: derinant produkcijos klaidą iš suspausto steko pėdsako yra daug lengviau, kai supantis kodas iš naujo suformatuojamas ir tampa skaitomas, net be originalų kintamųjų pavadinimų.

→ HTML glaudinimo įrankis · CSS minifikatorius

Įprasti naudojimo atvejai

• Atskiro scenarijaus ar bookmarklet sumažinimas prieš jį publikuojant.
• Suspausto scenarijaus, paimto iš gyvos svetainės, performatavimas norint suprasti, ką jis daro.
• „JavaScript" iš forumo įrašo ar AI sugeneruoto fragmento sutvarkymas prieš atidžiai jį skaitant.
• Greitas patikrinimas, ar rankiniu būdu rašytas JS fragmentas turi sintaksės klaidą, nes perpynimo nesėkmė pasireiškia kaip aiškus pranešimas.

Dažniausiai užduodami klausimai