JavaScript-ni kichraytirish _

JavaScript kichraytirish qanday ishlaydi

Terser kodingizning Abstrakt Sintaksis Daraxti ustida toʻrt bosqichda ishlaydi. Har bir bosqich mustaqil, shuning uchun boshqalarini buzmay ularning istalganini yoqib yoki oʻchirib qoʻyishingiz mumkin.

1. Tahlil qilish. Terser JavaScript-ingizni ASTga tahlil qiladi. Har qanday sintaksis xatosi bu yerda uni keltirib chiqargan token va qator bilan birga chiqadi, shuning uchun hech qanday oʻzgartirishdan oldin haqiqiy muammoni topasiz.
2. Siqish. Siquvchi ASTni aylanib oʻtadi va oʻnlab semantika-saqlovchi oʻzgartirishlarni qoʻllaydi: doimiy katlamlash, oʻlik-tarmoq eliminatsiyasi, qisqa sof funksiyalarni inline qilish, ketma-ket var deklaratsiyalarini kamaytirish va ekvivalent ibora shakllarini qayta yozish (if/else-ni uchlik operatorga, taqqoslash-zanjirni qisqartirish). Har bir oʻzgartirish kuzatiladigan xatti-harakatni hech qachon oʻzgartirmaydi.
3. Mangling. Mangler mahalliy bogʻlanishlarni har bir doiradagi eng qisqa noyob identifikatorlarga (a, b, c, …) qayta nomlaydi. Faqat modul chegarasidan chiqib ketmaydigan nomlar qayta nomlanadi, shuning uchun eksport qilingan bogʻlanishlar, xususiyat kalitlari va global havolalar oʻzgarishsiz qoladi.
4. Renderlash. Terser oʻzgartirilgan ASTni boʻsh joylar qisqartirilgan va ibora ajratuvchilar grammatika qabul qiladigan minimumga tushirilgan JavaScript satriga chop etadi. Litsenziyani-saqlash tugmasi /*! … */ bloklarini saqlamasdan izohlar olib tashlanadi.

Nima uchun JavaScript-ni kichraytirish kerak

• Tezroq sahifa yuklash. Kichikroq skriptlar tezroq tahlil qilinadi va bajariladi. 4G mobil ulanishda 40 foizlik bayt qisqartirish Time to Interactive-dan haqiqiy sekundlarni kamaytiradi.
• Pastroq CDN egress hisob-kitoblari. CloudFront, Cloudflare va Fastly chiqish uchun gigabayt boʻyicha hisob qiladi. Oylik millionlab sahifa tashrifi boʻyicha 40 foizlik skript qisqartirish har qanday rasm yoki CSS ishlari tushishidan oldin haqiqiy tejavga toʻplanadi.
• Bu minifikator sahifangizni sekinlashtirmaydi. Terser siqilmagan holda ~1 MB. Koʻpgina onlayn minifikatorlar butun kutubxonani sahifa yuklanishida yetkazib beradi, bu ularning oʻzlari Lighthouse bahosini pasaytiradi va foydalanuvchi biror narsa yozishdan oldin sahifani sekinlatadi. Bu sahifa Terser-ni faqat Kichraytirish tugmasini bosganda yoki Jonli rejimni yoqqanda lazy-load qiladi.
• Core Web Vitals-dan oʻtish. Lighthouse va PageSpeed Insights katta JavaScript-ni yomon Total Blocking Time-ga bevosita hissa qoʻshuvchi sifatida belgilaydi. Vendor kutubxonalari va ilovalar toʻplamlarini kichraytirish Lighthouse-ning "Foydalanilmagan JavaScript-ni kamaytirish" va "Takroriy modullarni olib tashlash" auditlarida eng tez yutishdir.

Keng tarqalgan qoʻllanishlar

JavaScript kichraytirish zamonaviy veb loyihaning deyarli har bir bosqichida paydo boʻladi.

• Topshirishdan oldingi ilgaklar: repoga topshirishdan oldin individual utility skriptlarini kichraytiring, shunda topshirilgan artefakt ishlab chiqarishga tayyor boʻladi va diff mantiq oʻzgarishlarini koʻrsatadi.
• Uchinchi tomon vidjet auditi: vendorning oʻrnatish boʻlagini joylashtiring va uni millionlab foydalanuvchilarga xizmat qilishdan oldin allaqachon kichraytirilgan yoki yanada qisqartirilishi mumkinligini tekshiring.
• Eski skriptlarni tozalash: hozirgi qurish quvuringizdan oldingi jQuery plaginlari va qoʻlda yozilgan skriptlarni manba daraxtiga tegmasdan siqing.

Ishlangan misol

Kichik funksiyani oling: function add(firstNumber, secondNumber) { /* sums two numbers */ return firstNumber + secondNumber; } console.log(add(1, 2)); — izoh bilan birga taxminan 130 bayt. Mangling va Compress ikkalasi ham yoqilgan holda yuqoriga joylashtiring. Natija taxminan function add(n,o){return n+o}console.log(add(1,2)); ga qisqaradi — taxminan 55 bayt, 58 foizlik qisqarish. add funksiya nomi saqlanadi, chunki u console.log chaqiruvida ishlatiladi; firstNumber va secondNumber parametr nomlari bitta harfga qisqaradi, chunki ular funksiya tanasiga mahalliy.

FAQ

Bu brauzerimda ishlaydimi?

Ha. Terser Kichraytirish tugmasini birinchi marta bosganda yoki Jonli rejimni yoqqanda lazy-load qilinadi — brauzer keshingizga taxminan 200 KB siqilgan tushadi, keyin boshqa narsa yuklanmaydi. Kodingiz sahifadan hech qachon chiqmaydi.

Nom mangling nima va u xavfsizmi?

Mangling mahalliy oʻzgaruvchilarni bayt tejash uchun bitta harflarga qayta nomlaydi. U oʻz-oʻzini oʻz ichiga olgan skriptlar va IIFE toʻplamlari uchun xavfsiz, chunki qayta nomlashlar hech qachon doiradan chiqmaydi. Bu window.myLib = … kabi qoʻshuvchisiz nom bilan globalslarni ochib qoʻyadigan skriptlar uchun XAVFSIZ EMAS. Noaniq holda Mangling-ni oʻchiring.

Kichraytirishdan keyin kodim nima uchun buzildi?

Uchta odatiy sabab: satr boʻyicha oʻzgaruvchilarga murojaat qiluvchi eval yoki with; asl identifikatorga tayanuvchi Function.name yoki arguments.callee oʻqishlari; yoki qayta nomlangan nom boʻyicha ochilgan globallar. Avval Mangling-ni oʻchiring — qayta nomlash yoki Compress oʻzgartirishi sabab ekanligini ajrating.

Bu zamonaviy sintaksisni (ES2020+) qoʻllab-quvvatlaydimi?

Ha. ECMAScript maqsadini ES2020 yoki Keyingi-ga oʻrnating va Terser ixtiyoriy zanjirlash, nullish birlashtirish, yuqori darajali await va mantiqiy-tayinlash operatorlarini saqlaydi. ES5-ga oʻrnating va Terser imkon qadar pastga kompilyatsiya qiladi, lekin u toʻliq transpayler emas — ES5 umuman ifodalay olmaydigan sintaksis uchun Babel-dan foydalaning.

Terser bilan brauzer tomonida JavaScript kichraytirish qurish vositasini qoʻshmasdan ishlab chiqarish sifatidagi natijani beradi. Skriptni joylashtiring, ECMAScript maqsadini tanlang, natijani nusxalang yoki yuklab oling. Hech narsa yuklanmaydi, hisob yoʻq, qurish quvuri yoʻq. Minifikatorning oʻzi faqat soʻragan paytingizda yuklanadi.