JavaScript-minifioija ja -muotoilija

Mikä tämä työkalu on?

JavaScript-minifioija kirjoittaa koodin uudelleen mahdollisimman pieneksi käyttäytymisen pysyessä identtisenä: se lyhentää muuttujien ja funktioiden nimiä turvallisissa kohdissa, poistaa kommentit ja tyhjän tilan, laskee vakiot etukäteen ja poistaa saavuttamattoman koodin.

Tämä työkalu perustuu Terseriin, AST-pohjaiseen minifioijaan, jota käyttävät webpack, Vite, Rollup ja useimmat nykyaikaiset JavaScript-työkalut. Koska se todella jäsentää koodisi tekstin sovittamisen sijaan, se erottaa oikein jakolaskuoperaattorin regex-literaalista, ei riko template-merkkijonoja, jotka sisältävät //-näköisiä sarjoja, eikä nimeä muuttujaa uudelleen nimeksi, joka törmää johonkin ulompaan scopeen.

Miksi käyttää sitä?

• AST-pohjainen minifiointi (Terser), sama moottori jota käyttävät suuret bundlerit — turvallinen regex-literaalien, template-merkkijonojen ja closuresien kanssa.
• Muuttaa muuttujanimiä oikeiden kokosäästöjen saamiseksi, ei vain tyhjän tilan poistoa.
• Näe tarkalleen kuinka monta tavua ja kuinka monta prosenttia säästit.
• Muotoilutila kääntää obfuskoidun, yhden rivin minifioidun JS:n takaisin luettavaksi, sisennetyksi koodiksi — hyödyllinen kolmannen osapuolen skriptien ymmärtämiseen.
• 100 % paikallinen käsittely — omistusoikeudellinen koodi ei koskaan poistu selaimestasi.

Käyttöohje

1. Liitä JavaScriptisi syöttölaatikkoon, tai klikkaa "Load Example" kokeillaksesi esimerkkiä regex-literaalilla ja template-merkkijonolla.
2. Klikkaa "Minify" pakataksesi sen, tai "Format" kaunistaaksesi sen 2 välilyönnin sisennyksellä.
3. Tarkista laatikoiden alla oleva viesti — minify-tila näyttää koon pienenemisen; syntaksivirhe koodissasi näyttää selkeän viestin sen sijaan, että se tuottaisi hiljaa rikkinäistä tulostetta.
4. Klikkaa "Copy" napataksesi tuloksen.

Esimerkki

Syöte

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

Tuloste

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

Muuttujien nimet lyhennetään, kommentti ja if-lauseke tiivistetään lausekkeeksi, mutta regex-literaali ja template-merkkijono säilyvät täsmälleen ennallaan eikä käyttäytyminen muutu.

Käytännön vinkkejä

• Minifioi build-vaiheessa, älä käsin muokkaamalla — pidä luettava lähdekoodi versionhallinnassa ja luo minifioitu paketti build-vaiheena.
• Jos minifioitu tuloste käyttäytyy odottamattomasti, tarkista, luottaako koodi Function.prototype.name-ominaisuuteen tai reflektioon — nimien muuttaminen nimeää funktioita uudelleen, ja se voi näkyä harvinaisissa reunatapauksissa.
• Kolmannen osapuolen skriptin muotoileminen ennen lukemista on paljon nopeampaa kuin yrittää jäsentää yhtä 2000 merkin riviä.
• Yhdistä alla oleviin HTML- ja CSS-minifioijiin, jos valmistelet täyttä staattista pakettia julkaisua varten.

Mihin tämä liittyy käytännössä

JavaScript on yleensä sivun suurin renderöintiä tai jäsentämistä estävä resurssi, joten sen minifiointi vaikuttaa mitattavasti latausaikaan — enemmän kuin HTML tai CSS tavu tavulta. Useimmat nykyaikaiset kehykset tekevät tämän automaattisesti build-vaiheessa, mutta käsin kirjoitetut skriptit, selainlaajennukset ja bookmarkletit julkaistaan usein minifioimattomina, ellei joku aja niitä tällaisen työkalun läpi.

Format-suuntaa käytetään yhtä usein päinvastoin: tuotantovirheen debuggaus minifioidusta pinovedoksesta on paljon helpompaa, kun ympäröivä koodi on muotoiltu ja luettava, jopa ilman alkuperäisiä muuttujanimiä.

→ HTML-tiivistäjä · CSS-minifioija

Yleiset käyttötapaukset

• Itsenäisen skriptin tai bookmarkletin pienentäminen ennen julkaisua.
• Julkiselta sivustolta haetun minifioidun skriptin uudelleenmuotoilu sen toiminnan ymmärtämiseksi.
• Foorumipostauksesta tai tekoälyn generoimasta katkelmasta liitetyn JavaScriptin siistiminen ennen huolellista lukemista.
• Sen nopea tarkistaminen, onko käsin kirjoitetussa JS-katkelmassa syntaksivirhe, koska jäsentämisen epäonnistuminen näkyy selkeänä viestinä.

Usein kysytyt kysymykset