Rage JavaScript _

Yadda rage JavaScript ke aiki

Terser yana aiki a matakai huɗu akan Abstract Syntax Tree na lambar ka. Kowane mataki yana da zaman kansa, don haka za ka iya kunna ko kashe kowannensu ba tare da lalata sauran ba.

1. Bincika. Terser yana parse JavaScript ɗinka zuwa AST. Duk kuskuren syntax yana bayyana nan tare da token da layin da ya haifar da shi, don ka sami ainihin matsalar kafin wani canji ya gudana. Parser yana karɓar kowane tsarin ECMAScript na daidaitacce har zuwa mafi ƙarancin shawarwarin matakin-4.
2. Matse. Mai matse yana tafiya cikin AST kuma yana amfani da canje-canje da yawa waɗanda ke adana ma'ana: ninke ƙa'ida, kawar da rassa matattu, haɗa ƙananan ayyuka masu tsarki, haɗa sanarwar var masu jere, da sake rubuta nau'ikan bayanan da suka dace (if/else zuwa ternaries, gajartar sarƙar kwatantawa, ninke dawowa mai sharadi). Kowane canji yana iya jurewa a ka'ida; mai matse ba zai canza halayyar da ake iya gani ba.
3. Rage Sunaye. Mai mangle yana sake suna ɗaurin gida zuwa mafi ƙanƙanta mai gane na keɓe (a, b, c, …) a cikin kowane yanki. Ana sake sunan sunaye kawai waɗanda ba za su iya tserewa iyakar module ba, don haka ɗaurin da aka fitar, makullin kaddarorin, da nassoshi na duniya sun tsira ba tare da canjawa ba. Sakamakon shine mafi girman adanawa na baiti na kowane mataki.
4. Nuna. Terser yana buga AST da aka canza zuwa kirtani JavaScript tare da sarari da aka haɗa kuma manyan masu raba bayanan sun ragu zuwa mafi ƙarancin da nahawu ya karɓa. Ana cirewa sharhi sai dai idan mabuɗin adana-lasisi ya riƙe ɓangarorin /*! … */, waɗanda yawancin lasisin CDN suna buƙatar ka adana.

Dalilin rage JavaScript

• Loda shafi cikin sauri. Rubutun mafi ƙanƙanta suna parse kuma suna aiwatarwa da sauri. A haɗin wayar hannu na 4G raguwar kashi 40 na baiti na iya rage gaske daƙiƙoƙi daga Lokacin Hulɗa, wanda shine ma'aunin da Google's PageSpeed Insights ke aunawa da ƙarfi.
• Rage kuɗin fitar CDN. CloudFront, Cloudflare, da Fastly suna biyan kowane gigabait na fitar. Raguwar rubutun kashi 40 a duk miliyoyin kallon shafi na wata-wata yana tattara cikin gaske kafin wani aikin hoto ko CSS ya sauka. Lissafin yana daidai ma bayan gzip da brotli — rage yana cire tokens da mai matsewa zai kasance dole ya lambar.
• Wannan mai rage baya ɗaukar nauyin shafin ka. Terser yana ~1 MB ba tare da matse ba. Yawancin mai rage na intanet suna aika ɗakin karatu gaba ɗaya lokacin loda shafi, wanda yana lalata nasu makin Lighthouse kuma yana sa shafi ya ji kamar yana da sanyi kafin mai amfani ya buga komi. Wannan shafi yana loda Terser a hankali kawai lokacin da ka danna Rage ko ka kunna yanayin Live — don haka nunin farko ya kasance ƙasa da ƙofar Core Web Vitals kayan aikin kanta yana alƙawarin taimakawa ka cimma.
• Wuce Core Web Vitals. Lighthouse da PageSpeed Insights suna nuna JavaScript mafi girma a matsayin mai ba da gudummawa kai tsaye ga Total Blocking Time mara kyau. Rage ɗakunan karatu na vendor da ɓangarorin aikace-aikacen shine mafi sauri nasara akan gwajin Lighthouse "Rage unused JavaScript" da "Cire duplicate modules" — yawanci raguwa ɗaya ta cancanta wurare goma ko ashirin.

Ayyuka na gari

Rage JavaScript yana bayyana a kusan kowane mataki na aikin yanar gizo na zamani.

• Kugiyoyin kafin-commit: rage rubutun aiki na mutum-mutumi kafin committawa zuwa repo don artifact da aka commit ya kasance shirye-shirye kuma bambancin yana nuna canje-canje na dabaru maimakon juyin sarari.
• Gwaje-gwajen widget na waje: liƙa ɓangaren da aka saka na vendor ka kuma duba ko an riga an rage shi ko za a iya rage shi ƙari kafin hidima ga miliyoyin masu amfani.
• Tsabtace rubutun gargajiya: matse plugins na jQuery da tsofaffi da rubutun da aka rubuta da hannu waɗanda suka riga layin ginin ka na yanzu, ba tare da taɓa bishiyar tushe ba.

Misali da aka yi aiki

Ɗauki ƙaramin aiki: function add(firstNumber, secondNumber) { /* sums two numbers */ return firstNumber + secondNumber; } console.log(add(1, 2)); — kusan baits 130 ciki har da sharhin. Liƙa shi a sama tare da Mangle da Compress duk a kan. Fitarwa tana gajartar zuwa kusan function add(n,o){return n+o}console.log(add(1,2)); — kusan baits 55, raguwa ta kashi 58. Sunan aiki add ya tsira saboda ana nassoshi shi a cikin kiran console.log; sunan sigogin firstNumber da secondNumber sun gajartar zuwa haruffa guda ɗaya saboda suna gida ga jikin aiki. Kashe Mangle don adana sunan sigogin da za a iya karanta yayin har yanzu haɗa sarari da cire sharhin.

FAQ

Shin wannan yana gudana a cikin burauzarki?

Eh. Terser yana loda a hankali a karo na farko da ka danna Rage ko kunna yanayin Live — kusan 200 KB compressed yana sauka cikin cache ɗin burauzarka, sannan babu ƙari da za a sauke. Lambar ka ba ta taba barin shafin ba.

Menene mangle na suna kuma shin lafiya ne?

Mangling yana sake sunan masu canji na gida zuwa haruffa guda ɗaya don adana baits. Lafiya ne ga rubutun da ke cikin kansu da ɓangarorin IIFE saboda sake sunayen ba su taba barin yankin ba. BA lafiya ba ne ga rubutun da ke bayyana duniyar ta suna (misali window.myLib = …) ba tare da mai rufi ba. Kashe Mangle idan ba a tabbata ba.

Me ya sa lambar ta karye bayan rage?

Uku masu tuhuma na gari: eval ko with suna nassoshi masu canji ta kirtani; Function.name ko arguments.callee karantawa waɗanda suka dogara da mai gane na asali; ko duniyoyi da aka bayyana ta suna wanda aka sake sunansu. Kashe Mangle da farko don keɓe ko sake suna ko canji na Compress shine dalilin.

Shin wannan yana goyan bayan syntax na zamani (ES2020+)?

Eh. Saita manufar ECMAScript zuwa ES2020 ko Next kuma Terser yana adana haɗaɗɗen zaɓi, nullish coalescing, top-level await, da masu aiki na logical-assignment. Saita zuwa ES5 kuma Terser yana ƙasa-compiling inda zai iya, amma ba cikakken transpiler ba — yi amfani da Babel don syntax da ES5 ba zai iya wakilta gaba ɗaya ba.

Rage JavaScript na gefen burauzar da Terser yana ba ka fitarwa mai ingancin samarwa ba tare da ƙara kayan aikin gini. Liƙa rubutun, zaɓi manufar ECMAScript, kwafi ko sauke sakamakon. Ba a loda komi, babu asusun, babu layin gini. Mai rage kansa yana loda ne kawai lokacin da ka roƙe shi — don haka buɗe wannan shafi yana ɗaukar kilobytes kaɗan, ba megabyte ba.