Doshaji wa JavaScript _

Jinsi udogoshaji wa JavaScript unavyofanya kazi

Terser inafanya kazi katika hatua nne juu ya Abstract Syntax Tree ya msimbo wako. Kila hatua ni huru, kwa hivyo unaweza kuwasha au kuzima yoyote bila kuvunja nyingine.

1. Changanua. Terser inachambua JavaScript yako kuwa AST. Kosa lolote la sintaksia linaonekana hapa na tokeni na mstari uliousababisha, ili upate tatizo halisi kabla ya mabadiliko yoyote kufanywa. Mchanganuzi anakubali kila muundo wa kawaida wa ECMAScript hadi mapendekezo ya hatua ya 4 ya hivi karibuni.
2. Kandamiza. Compressor inapita AST na kutumia mabadiliko mengi ya kuhifadhi semantiki: kukunja mara kwa mara, kuondoa matawi yaliyokufa, kuingia kwa kazi fupi safi, kukunja matamko ya var yanayofuatana, na kuandika upya fomu sawa za taarifa (if/else kuwa ternaries, kufupisha mnyororo wa ulinganisho, kukunja kurudi kwa masharti). Kila mabadiliko yanaweza kugeuzwa kwa kanuni; compressor haibadilishi tabia inayoonekana.
3. Punguza Majina. Mangler inabadilisha majina ya ndani kuwa vitambulisho vifupi zaidi vya kipekee (a, b, c, …) ndani ya kila wigo. Majina tu ambayo hayawezi kutoroka mpaka wa moduli yanabadilishwa, kwa hivyo majina ya kusindika, funguo za mali, na marejeo ya kimataifa yanabaki bila kuguswa. Matokeo ni akiba kubwa zaidi ya byte kati ya hatua zote.
4. Tekeleza. Terser inachapisha AST iliyobadilishwa kurudi kwa mfuatano wa JavaScript na nafasi zilizokunja na vitenganishi vya taarifa vimepunguzwa hadi kiwango cha chini kabisa kinachokubalika na sarufi. Maoni huondolewa isipokuwa kama kitufe cha kuhifadhi leseni kinaweka bloki za /*! … */, ambazo leseni nyingi za CDN zinahitaji kuzihifadhi.

Kwa nini uominify JavaScript

• Kurasa zinaopakia haraka zaidi. Hati ndogo zaidi zinachambulika na kutekelezwa haraka zaidi. Kwa muunganisho wa simu ya 4G kupunguzwa kwa asilimia 40 kwa byte kunaokoa sekunde halisi kutoka Time to Interactive, ambayo ndiyo kigezo Google PageSpeed Insights hupima kwa nguvu zaidi.
• Bili ndogo za egress ya CDN. CloudFront, Cloudflare, na Fastly zinatoza kwa gigabyte ya egress. Kupunguzwa kwa hati kwa asilimia 40 katika mamilioni ya maoni ya ukurasa kila mwezi kunajumlika kuwa akiba halisi kabla ya kazi yoyote ya picha au CSS. Hisabati inashikilia hata baada ya gzip na brotli — udogoshaji huondoa tokeni ambazo compressor ingepaswa kuzisimba.
• Kiminifier hiki hakuodhi ukurasa wako. Terser ni ~1 MB isiyosindikwa. Viminifier vingi vya mtandaoni hupakua maktaba nzima wakati wa kupakia ukurasa, ambacho huzamisha alama yao ya Lighthouse na kufanya ukurasa uonekane kuchelewa kabla mtumiaji hajaandika chochote. Ukurasa huu hupakia Terser kivirinji tu unapobonyeza Minify au kuwasha hali ya moja kwa moja — kwa hivyo utoaji wa awali unabaki chini ya mipaka ya Core Web Vitals ambayo zana yenyewe inadai kukusaidia kufika.
• Kupita Core Web Vitals. Lighthouse na PageSpeed Insights zinaashiria JavaScript kubwa kama mchangiaji wa moja kwa moja wa Total Blocking Time duni. Kuominify maktaba za wauzaji na vifurushi vya programu ni ushindi wa haraka zaidi katika ukaguzi wa Lighthouse "Punguza JavaScript isiyotumika" na "Ondoa moduli zilizorudiwa" — kwa kawaida kupunguzwa mara moja kunastahili pointi kumi au ishirini.

Matumizi ya kawaida

Udogoshaji wa JavaScript unaonekana karibu kila hatua ya mradi wa kisasa wa wavuti.

• Hooks za pre-commit: miniify hati za matumizi za mtu binafsi kabla ya kuahidi kwa hifadhi ili kitu kilichoahidiwa kiwe tayari kwa uzalishaji na tofauti inaonyesha mabadiliko ya mantiki badala ya mzunguko wa nafasi.
• Ukaguzi wa widget za watu wengine: bandika kipande cha mwana programu cha muuzaji na uangalie kama tayari imeaminifiwa au inaweza kupunguzwa zaidi kabla ya kuitumikia mamilioni ya watumiaji.
• Usafi wa hati za zamani: sinda programu jalizi za jQuery za zamani na hati zilizoandikwa kwa mkono ambazo zilipita kabla ya mfululizo wako wa kujenga wa sasa, bila kugusa mti wa chanzo.

Mfano uliofanyiwa kazi

Chukua kazi ndogo: function add(firstNumber, secondNumber) { /* sums two numbers */ return firstNumber + secondNumber; } console.log(add(1, 2)); — karibu bytes 130 ikijumuisha maoni. Bandika hapo juu na Mangle na Compress zote zimewashwa. Matokeo yanafupisha hadi takriban function add(n,o){return n+o}console.log(add(1,2)); — karibu bytes 55, kupunguzwa kwa asilimia 58. Jina la kazi add linaishi kwa sababu linarejelewa katika simu ya console.log; majina ya vigezo firstNumber na secondNumber yanafupishwa hadi herufi moja kwa sababu ni za ndani ya mwili wa kazi. Zima Mangle ili kuweka majina ya vigezo yanayosomeka huku bado ukikunja nafasi na kuacha maoni.

FAQ

Je, hii inafanya kazi kwenye kivinjari changu?

Ndiyo. Terser inapakia kivirinji mara ya kwanza unapobonyeza Minify au kuwasha hali ya moja kwa moja — karibu 200 KB iliyosindikwa inaingia kwenye akiba ya kivinjari chako, kisha hakuna kinachopakiwa zaidi. Msimbo wako hauachi ukurasa.

Mangling ya majina ni nini na je, ni salama?

Mangling inabadilisha vigezo vya ndani hadi herufi moja kuokoa bytes. Ni salama kwa hati za kujitegemea na vifurushi vya IIFE kwa sababu mabadiliko hayaacha wigo kamwe. SIYO salama kwa hati zinazoweka globals kwa jina (mfano window.myLib = …) bila kiozia. Zima Mangle unaposhuku.

Kwa nini msimbo wangu ulivunjika baada ya udogoshaji?

Washukiwa watatu wa kawaida: eval au with inayorejelea vigezo kwa mfuatano; Function.name au arguments.callee inasoma inayotegemea kitambulisho asili; au globals zilizowekwa kwa jina lililobinafsishwa. Zima Mangle kwanza kutenga kama kubadilisha jina au mabadiliko ya Compress ndiyo sababu.

Je, hii inasaidia sintaksia ya kisasa (ES2020+)?

Ndiyo. Weka lengo la ECMAScript kuwa ES2020 au Ijayo na Terser inahifadhi mnyororo wa chaguo, kuunganisha nullish, await ya kiwango cha juu, na waendeshaji wa logical-assignment. Weka kuwa ES5 na Terser itatekeleza down-compile inapowezekana, lakini si mtekelezaji kamili — tumia Babel kwa sintaksia ambayo ES5 haiwezi kuiwakilisha kabisa.

Udogoshaji wa JavaScript upande wa kivinjari na Terser unakupa matokeo ya ubora wa uzalishaji bila kuongeza zana ya kujenga. Bandika hati, chagua lengo la ECMAScript, nakili au pakua matokeo. Hakuna kinachopakiwa, hakuna akaunti, hakuna mfululizo wa kujenga. Kiminifier chenyewe kinapakia tu unakoomba — kwa hivyo kufungua ukurasa huu kukugharimu kilobytes chache, si megabyte.