Mag-minify ng JavaScript _

Paano gumagana ang JavaScript minification

Ang Terser ay gumagana sa apat na yugto sa Abstract Syntax Tree ng iyong code. Ang bawat yugto ay independyente, kaya maaari mo itong i-on o i-off nang hindi sinisira ang iba.

1. I-parse. Pina-parse ng Terser ang iyong JavaScript sa isang AST. Ang anumang syntax error ay lumalabas dito kasama ang token at linya na naging sanhi nito, para mahanap mo ang tunay na problema bago pa man tumakbo ang anumang transform. Tinatanggap ng parser ang bawat standard na ECMAScript construct hanggang sa pinakabagong stage-4 na proposal.
2. I-compress. Ang compressor ay naglalakad sa AST at nag-a-apply ng dose-dosenang semantics-preserving na transform: constant folding, dead-branch elimination, inlining ng mga maikling pure function, pag-collapse ng sequential na var declaration, at pag-rewrite ng katumbas na mga statement form (if/else patungong ternary, pag-ikli ng comparison-chain, pag-collapse ng conditional return). Ang bawat transform ay reversible sa prinsipyo; hindi kailanman binabago ng compressor ang observable na gawi.
3. I-mangle. Ang mangler ay nagpapalit ng pangalan ng lokal na binding sa pinakamaikling natatanging identifier (a, b, c, …) sa loob ng bawat scope. Ang mga pangalan lamang na hindi makakatawid sa hangganan ng module ang pinalilitan ng pangalan, kaya ang mga exported na binding, property key, at global na sanggunian ay nakakaligtas nang hindi nababago. Ang resulta ay ang pinakamalaking single byte saving sa anumang yugto.
4. I-render. Inilalabas ng Terser ang transformed na AST pabalik sa isang JavaScript string na may collapsed na whitespace at ang mga statement separator ay nabawasan sa minimum na tinatanggap ng grammar. Ang mga komento ay naitatanggal maliban kung ang preserve-license toggle ay nagpapanatili ng mga /*! … */ block, na karaniwang kailangan mong panatilihin ng karamihang CDN license.

Bakit mag-minify ng JavaScript

• Mas mabilis na pag-load ng page. Ang mas maliliit na script ay nag-pa-parse at tumatakbo nang mas maaga. Sa isang 4G na mobile na koneksyon ang 40-porsyentong pagbabawas ng byte ay nagtatanggal ng tunay na segundo mula sa Time to Interactive, na siyang metric na pinaka-agresibong sinusukat ng Google PageSpeed Insights.
• Mas mababang CDN egress na bayad. Ang CloudFront, Cloudflare, at Fastly ay nagsi-singil bawat gigabyte ng egress. Ang 40-porsyentong pagbabawas ng script sa milyun-milyong buwanang page view ay nagiging tunay na pagtitipid bago pa man dumating ang anumang image o CSS work. Ang math ay nananatili kahit pagkatapos ng gzip at brotli — inaalis ng minification ang mga token na kung hindi man ay kailangan pang i-encode ng compressor.
• Ang minifier na ito ay hindi nagpapahirap sa iyong page. Ang Terser ay ~1 MB uncompressed. Karamihang online na minifier ay nagsi-ship ng buong library sa page load, na lumilikha ng mababang Lighthouse score sa kanilang sarili at nagpapagana ng page na maantala bago pa man mag-type ang user ng anuman. Ang page na ito ay lazy-load lamang ng Terser kapag nag-click ka ng Minify o nag-switch ng Live mode — kaya ang paunang render ay nananatiling nasa ilalim ng mga Core Web Vitals threshold na pinangako ng tool mismo na matulungan kang maabot.
• Pagpasa ng Core Web Vitals. Ang Lighthouse at PageSpeed Insights ay nag-i-flag ng malalaking JavaScript bilang direktang kontribyutor sa mahinang Total Blocking Time. Ang pag-minify ng mga vendor library at application bundle ay ang pinakamabilis na panalo sa mga Lighthouse audit na "Bawasan ang hindi nagamit na JavaScript" at "Alisin ang mga duplicate na module" — kadalasan ay isang beses na pagbabawas na nagkakahalaga ng sampung o dalawampung puntos.

Mga karaniwang paggamit

Ang JavaScript minification ay lumalabas sa halos bawat yugto ng isang modernong web project.

• Mga pre-commit hook: mag-minify ng mga indibidwal na utility script bago mag-commit sa isang repo para ang committed na artifact ay production-ready at ang diff ay nagpapakita ng mga pagbabago sa lohika sa halip na whitespace na palitan.
• Mga third-party widget audit: i-paste ang embed snippet ng isang vendor at suriin kung ito ay minified na o maaaring higit pang mapaliit bago ito ihain sa milyun-milyong user.
• Paglilinis ng legacy na script: i-compress ang mga lumang jQuery plugin at hand-authored na script na nauna sa iyong kasalukuyang build pipeline, nang hindi hinahawakan ang source tree.

Isang halimbawang trabaho

Kunin ang isang maliit na function: function add(firstNumber, secondNumber) { /* sums two numbers */ return firstNumber + secondNumber; } console.log(add(1, 2)); — humigit-kumulang 130 bytes kasama ang komento. I-paste ito sa itaas na naka-on ang parehong Mangle at Compress. Ang output ay nagpapaikli sa humigit-kumulang function add(n,o){return n+o}console.log(add(1,2)); — humigit-kumulang 55 bytes, isang 58-porsyentong pagbabawas. Nakakaligtas ang pangalang add ng function dahil ito ay sanggunian sa console.log na tawag; ang mga pangalan ng parameter na firstNumber at secondNumber ay nagpapaikli sa mga solong titik dahil lokal ang mga ito sa function body. I-off ang Mangle para mapanatili ang mababasang mga pangalan ng parameter habang niko-collapse pa rin ang whitespace at inaalis ang komento.

FAQ

Tumatakbo ba ito sa aking browser?

Oo. Ang Terser ay lazy-loaded sa unang pagkakataon na nag-click ka ng Minify o nag-enable ng Live mode — humigit-kumulang 200 KB compressed ang dumarating sa iyong browser cache, pagkatapos ay wala nang iba pang dina-download. Ang iyong code ay hindi kailanman umaalis sa page.

Ano ang name mangling at ligtas ba ito?

Ang mangling ay nagpapalit ng pangalan ng mga lokal na variable sa mga solong titik para makatipid ng byte. Ito ay ligtas para sa mga self-contained na script at IIFE bundle dahil ang mga pagpapalit ng pangalan ay hindi kailanman lumalabas sa scope. HINDI ito ligtas para sa mga script na naglalantad ng mga global sa pamamagitan ng pangalan (hal. window.myLib = …) nang walang wrapper. I-off ang Mangle kapag hindi sigurado.

Bakit nasira ang aking code pagkatapos ng minification?

Tatlong karaniwang suspetsado: eval o with na sanggunian ang mga variable sa pamamagitan ng string; Function.name o arguments.callee na nagbabasa na umaasa sa orihinal na identifier; o mga global na inilantad sa pamamagitan ng isang pangalang pinalitan. I-off muna ang Mangle para ihiwalay kung ang pagpapalit ng pangalan o isang Compress transform ang sanhi.

Sinusuportahan ba nito ang modernong syntax (ES2020+)?

Oo. Itakda ang ECMAScript target sa ES2020 o Next at pinapanatili ng Terser ang optional chaining, nullish coalescing, top-level await, at logical-assignment operator. Itakda ito sa ES5 at nag-do-down-compile ang Terser kung maaari, ngunit hindi ito buong transpiler — gumamit ng Babel para sa syntax na hindi kayang katawanin ng ES5.

Ang browser-side JavaScript minification gamit ang Terser ay nagbibigay sa iyo ng production-quality na output nang hindi nagdaragdag ng build tool. Mag-paste ng script, pumili ng ECMAScript target, kopyahin o i-download ang resulta. Walang upload, walang account, walang build pipeline. Ang minifier mismo ay nilo-load lamang kapag hiningi mo ito — kaya ang pagbubukas ng page na ito ay nagkakahalaga ng ilang kilobyte, hindi isang megabyte.