Tree shaking — JavaScript va boshqa modul tizimlarida yakuniy dastur ishlatmaydigan eksport va kod yo‘llarini bundle’dan chiqarib tashlash optimallashtirishidir. Bundler import–export grafigini tahlil qilib, kirish nuqtasidan yetib bo‘lmaydigan qismlarni olib tashlaydi. Natija kichikroq fayl, kamroq yuklash va parse xarajati bo‘lishi mumkin.
Statik modul grafigi
ES modulesdagi import va export odatda statik tuzilishga ega: qaysi nom qayerdan kelishi build vaqtida ma’lum. Shu sabab bundler foydalanilgan eksportlarni belgilaydi. CommonJSdagi dinamik require() va runtime hisoblangan nomlar tahlilni qiyinlashtirib, butun modulni saqlashga majbur qilishi mumkin.
// math.js
export const add = (a, b) => a + b;
export const unused = () => expensiveSetup();
// app.js
import { add } from './math.js';
Agar unusedning nojo‘ya ta’siri yo‘q deb isbotlansa, production bundle’dan chiqarilishi mumkin. Faqat minifier nomni qisqartirishi tree shaking hisoblanmaydi; modul darajasidagi reachability tahlili kerak.
Side effect masalasi
Modul import qilinganda global ro‘yxatga plugin qo‘shishi, CSS import qilishi yoki polyfill o‘rnatishi mumkin. Eksport ishlatilmasa ham bu side effect zarur. Package manifestdagi sideEffects belgisi bundlerga qaysi fayllarni xavfsiz olib tashlash mumkinligini bildiradi. Noto‘g‘ri false foydali boshlang‘ich kodni yo‘qotadi.
Pure annotation funksiya chaqiruvi natijasi ishlatilmasa va chaqiruv yon ta’sirsiz bo‘lsa, minifierga uni o‘chirishga yordam beradi. Lekin aslida log, registratsiya yoki global holatni o‘zgartiradigan chaqiruvni pure deb belgilash xatti-harakatni buzadi.
Kutubxona dizayni
Kutubxona named export va kichik, mustaqil modullar bersa, iste’molchi faqat kerakli qismini oladi. Bitta umumiy obyektni yaratib eksport qilish yoki import paytida barcha pluginni ro‘yxatdan o‘tkazish tahlilni cheklaydi. ESM build taqdim etish bundlerga CommonJS builddan ko‘ra ko‘proq ma’lumot beradi.
Barrel file qulay import yo‘li yaratadi, ammo noto‘g‘ri tuzilsa ko‘plab modulni bir joyda ishga tushiradi yoki circular dependency hosil qiladi. Zamonaviy bundler uni tahlil qilishi mumkin, lekin paket side effectlari natijaga ta’sir qiladi.
Chegaralar
Dinamik property access, reflection va eval qaysi kod ishlatilishini build vaqtida noma’lum qiladi. Framework registratsiyasi nomlar orqali runtime topilsa, “ishlatilmaydi” deb ko‘ringan kod aslida zarur bo‘lishi mumkin. Bunday joylar explicit manifest yoki import bilan ko‘rsatiladi.
Tree shaking faqat production buildda yoqilishi mumkin, chunki development build tezlik va source mapni ustun qo‘yadi. Test faqat dev serverda bajarilsa, production optimizatsiyasi buzgan modul topilmay qoladi. CI final artefaktni ham ishga tushiradi.
Tekshirish
Bundle analyzer modul va eksportlarning hajmini ko‘rsatadi. Source map explorer kutilmagan katta dependency qayerdan kelganini topadi. Ikki buildni solishtirish o‘zgarishning haqiqiy transfer hajmiga ta’sirini ko‘rsatadi; gzip yoki Brotli siqilishi ham hisobga olinadi.
“Import faqat bitta funksiya” yozuvi avtomatik ravishda kichik bundle kafolati emas. Paketning modul formati, side effect metadata va bundler sozlamasi tekshiriladi. O‘lchash initial chunk bilan birga lazy chunklar va takrorlangan kodni ham qamrab oladi.
Code splitting bilan aloqasi
Tree shaking keraksiz kodni butunlay olib tashlaydi. Code splitting zarur kodni turli vaqtda yuklanadigan qismlarga ajratadi. Foydalaniladigan, ammo faqat admin sahifasida kerak modul tree shaking bilan o‘chmaydi; dynamic import orqali alohida chunkka chiqariladi. Ikki optimizatsiya mustaqil, lekin odatda bir build pipeline’da ishlaydi.
Bog‘liq tushunchalar
Dead code elimination, ES modules, Bundler, Code splitting, Minification, Side effect, Bundle analysis