Formater i minimalizator JavaScript

Czym jest formatowanie JavaScript?

Kluczowe funkcje

Przykłady

function add(a,b){return a+b}const doubled=[1,2,3].map(x=>x*2);console.log(doubled)

async function load(id){const r=await fetch(`/api/${id}`);if(!r.ok)throw new Error('bad');return r.json()}

const cfg={retries:3,timeout:5000,headers:{'Content-Type':'application/json'},onError(e){console.warn(e)}}

class Counter{#n=0;inc(){this.#n++}get value(){return this.#n}}

Typowe zastosowania

Odczyt zminimalizowanego kodu

Upiększ zminimalizowany lub zaciemniony skrypt, aby zrozumieć go i debugować.

Przegląd kodu

Sformatuj JavaScript przed pull requestem dla spójnego, łatwego do diffowania kodu.

Mniejsze pakiety na produkcji

Minimalizuj produkcyjny JavaScript z Terser, aby ograniczyć bajty i przyspieszyć ładowanie.

Porządkowanie fragmentu

Przeformatuj szybkie wklejenie z konsoli lub gista do czystego, czytelnego kodu.

Szczegóły techniczne

Upiększanie z js-beautify

Używa sprawdzonego silnika js-beautify dla przewidywalnego, konfigurowalnego wcięcia i odstępów.

Minimalizacja z Terser

Terser jest de facto minimalizatorem JavaScript — zmienia nazwy zmiennych lokalnych, usuwa martwy kod i komentarze, zachowując zachowanie kodu.

Działa w przeglądarce

Uruchamiane w całości po stronie klienta; Twój kod nigdy nie opuszcza urządzenia ani nie trafia na serwer.

Dobre praktyki

Formatuj źródło, minimalizuj na produkcję

Trzymaj czytelny kod w repozytorium i pozwól kompilatorowi minimalizować go z Terser.

Minimalizuj nowoczesną składnię ostrożnie

Terser obsługuje standardowy JavaScript; bardzo nowe propozycje mogą wymagać najpierw kroku transpilacji.

Nie edytuj ręcznie zminimalizowanego wyniku

Zmienione nazwy zmiennych sprawiają, że zminimalizowany kod jest trudny do utrzymania — edytuj źródło, a następnie ponownie minimalizuj.

Najczęściej zadawane pytania