Tree shaking va minifikatsiya: o'lik kodni olib tashlash, sideEffects va /#PURE/

Qisqacha: Tree shaking — bundler ishlatilmagan eksportlarni build'dan tashlab yuborishi. U faqat ESM bilan yaxshi ishlaydi: import/export statik, CommonJS'da esa bundler nima ishlatilishini bilmaydi. Ikki yordamchi signal bor: paketdagi "sideEffects": false ("modullarim yon ta'sirsiz") va kod ichidagi /*#__PURE__*/ ("bu chaqiruv yon ta'sirsiz"). Minifikatsiya esa qolgan kodni siqadi: bo'sh joylar va izohlar o'chadi, ichki nomlar bir harfga qisqaradi (mangling). vazifalar da hajmni asosan minifikatsiya kamaytiradi (−49 %), tree shaking esa kutubxonalarda hal qiluvchi.

Bu darsda

• Tree shaking qanday ishlashini va nega CommonJS'da ishlamasligini o'lchovlar bilan ko'rsatasiz.
• lodash ni to'rt xil import qilib, hajm 0.17 KB dan 26 KB gacha o'zgarishini ko'rasiz.
• sideEffects va /*#__PURE__*/ nima qilishini va qachon xavfli ekanini bilasiz.
• Barrel fayl va import * tuzoqlarini tanisiz.
• Minifikatsiya va mangling'ni, Oxc, terser va esbuild farqini o'lchaysiz.

Oldin bilishingiz kerak: Modul semantikasi, Modul formatlari, Bundler nima, Transpilyatsiya.

1. Nega bu kerak?

Bundler nima darsida price.js dagi formatDollar funksiyasi build'da g'oyib bo'lganini ko'rdik — hech kim uni import qilmagan edi. Shu g'oyani esa Modul semantikasi darsida nazariy o'rgangan edik: ESM statik, shuning uchun "nima ishlatilmaydi" ni oldindan bilish mumkin.

Bugun bu g'oya pulga aylanadi. 15-qismda Zod'ni (vazifalar ga tekshiruv kutubxonasi) bundlersiz o'lchagan edik: 233.7 KB gzip — sahifaning qolgan hammasidan bir necha baravar katta. O'shanda "bundler bilan qayta ko'ramiz" degan edik (Zod darsi). Bundler bilan Zod +23.7 KB bo'ldi — 10 baravar kam. Farqning katta qismi — tree shaking.

Hayotiy o'xshatish: safarga chamadon yig'yapsiz. Uydagi hamma narsani olmaysiz — faqat kerakligini. Tree shaking — "nima kerak?" ro'yxati, minifikatsiya — kiyimlarni ixcham taxlab, vakuum paketga solish.

Maslahat: O'lchovlar 2026-10-10 da Node 24.21.0, Vite 8.3.3 (Rolldown 1.2.12, Oxc minifikatori), lodash va lodash-es 4.18.1 bilan. vazifalar o'lchovlari — build.target qo'shilgan holat (#22).

2. Tree shaking qanday ishlaydi

2.1 Graf bo'yicha "tirik" belgilash

Bundler entry'dan boshlab har ishlatilgan nomni "tirik" deb belgilaydi va undan keladigan importlarni kuzatadi. Belgilanmagan hamma narsa — o'lik kod (dead code), u chiqishga yozilmaydi.

flowchart LR
  M["main.js"] -->|"sum"| L["lodash-es"]
  L --> S["sum ✅"]
  L -.- C["chunk ❌"]
  L -.- D["debounce ❌"]
  L -.- X["… yana 600+ ❌"]
  S --> B["baseSum ✅"]

Nomi "daraxtni silkitish"dan: daraxtni silkitsangiz, quruq barglar tushadi, tiriklari qoladi. Uzluksiz o'qlar — ishlatilgan yo'l, uzuq chiziqlar — tashlab yuborilgan eksportlar.

2.2 Shart: statik ESM

Bu faqat bundler kodni bajarmasdan ko'ra olsa ishlaydi. ESM'da import { sum } from "lodash-es" — aniq: faqat sum. CommonJS'da esa require("lodash") butun module.exports obyektini qaytaradi va undan qaysi xususiyat olinishini bundler odatda bilolmaydi (Modul formatlari darsida ko'rdik: module.exports ga istalgan paytda istalgan narsa yozilishi mumkin).

2.3 Tajriba: lodash to'rt xil

lodash — mashhur yordamchi funksiyalar to'plami, CommonJS'da. lodash-es — xuddi shu kod, ESM'da. Faqat sum ni (yig'indini hisoblash) to'rt xil import qilib, Vite bilan yig'dik:

Ikkinchi qatorga qarang: { sum } deb nomli import qildik — baribir 71 KB. Sintaksis ESM, lekin paket CommonJS: bundler butun lodash.js faylini olib kirishga majbur. lodash/sum.js — bitta faylni to'g'ridan-to'g'ri olish, CommonJS bo'lsa ham kichik (893 B, ichida yordamchi modullar). lodash-es — 340 baravar kichik.

Tekshirib ko'ring: Sardor kodda import { sum } from "lodash" yozdi va "nomli import — demak tree shaking ishlaydi" dedi. Nega 71 KB chiqdi?

3. Yon ta'sir: nega bundler ehtiyot

3.1 Muammo

Ba'zan modulning o'zi — yuklangan paytda — nimadir qiladi: global o'zgaruvchiga yozadi, document ga element qo'shadi, polyfill o'rnatadi. Bu yon ta'sir (side effect). Undan hech narsa import qilinmasa ham, uni o'chirish xulqni o'zgartiradi.

Kichik bahor-ui paketi — barrel fayl bilan. Barrel — boshqa modullarni qayta eksport qiladigan "yig'uvchi" index.js:

// index.js — "barrel" fayl: hamma narsa bitta eshikdan
export * from "./button.js";
export * from "./chart.js";

chart.js — og'ir modul, yuklanganda o'zini ro'yxatga yozadi:

// chart.js — og'ir modul; yuklanganda o'zini ro'yxatga yozadi
const COLORS = Array.from(
  { length: 200 },
  (_, i) => `hsl(${i} 60% 50%)`,
);
globalThis.chartTypes = ["ustun", "chiziq"]; // yon ta'sir!

export function drawChart(data) {
  return data.map((value, i) => `${COLORS[i]}:${value}`).join(";");
}

Ilova faqat tugmani oladi: import { button } from "bahor-ui";. Build natijasi (Prettier bilan formatladik):

function e(e) {
  return `<button>${e}</button>`;
}
(Array.from({ length: 200 }, (e, t) => `hsl(${t} 60% 50%)`),
  (globalThis.chartTypes = [`ustun`, `chiziq`]),
  (document.body.innerHTML = e(`Buyurtma`)));

drawChart tashlandi — u ishlatilmaydi. Lekin chart.js ning yuqori darajadagi ikki qatori qoldi. globalThis.chartTypes = … — aniq yon ta'sir, to'g'ri. Array.from(…) esa natijasi hech qayerga yozilmagan, lekin bundler buni bilmaydi: Array.from ichida nima bo'lishi mumkin? Ehtiyot bo'lib, qoldirdi. 0.17 kB.

3.2 "sideEffects": false

Paket muallifi package.json da va'da berishi mumkin:

{
  "name": "bahor-ui",
  "type": "module",
  "exports": "./index.js",
  "sideEffects": false
}

"Mening hech bir modulimda yon ta'sir yo'q — ishlatilmasa, butunlay tashla". Natija:

function e(e) {
  return `<button>${e}</button>`;
}
document.body.innerHTML = e(`Buyurtma`);

0.08 kB. chart.js butunlay yo'qoldi — Array.from ham, globalThis.chartTypes ham. Agar ilova chartTypes ga tayangan bo'lsa — endi u undefined. Va'da yolg'on edi, va bundler unga ishondi.

Uchinchi shakl eng ko'p uchraydi: kutubxonalar "sideEffects": ["*.css"] yozadi. Sabab: import "./button.css" dan hech narsa import qilinmaydi — u sof yon ta'sir (sahifaga stil qo'shadi). webpack'da sideEffects: false bunday CSS importlarini ham tashlab yuborishi mashhur tuzoq. Vite 8.3.3 da sinadik — CSS saqlandi (Vite CSS'ni alohida ishlaydi), lekin kutubxona hamma bundler uchun yoziladi.

3.3 /*#__PURE__*/

Butun modul emas, bitta chaqiruv haqida va'da — pure annotatsiya: /*#__PURE__*/ yoki /* @__PURE__ */ izohi. "Bu chaqiruvning natijasi ishlatilmasa, uni o'chirsang bo'ladi". chart.js da sideEffects siz, faqat bitta izoh bilan:

const COLORS = /* @__PURE__ */ Array.from(
  { length: 200 },
  (_, i) => `hsl(${i} 60% 50%)`,
);

function e(e) {
  return `<button>${e}</button>`;
}
((globalThis.chartTypes = [`ustun`, `chiziq`]),
  (document.body.innerHTML = e(`Buyurtma`)));

0.12 kB: Array.from ketdi, haqiqiy yon ta'sir (chartTypes) qoldi. Aniq va xavfsiz. Transpilyatsiya darsida to'rttala transpiler JSX chaqiruvlari oldiga aynan shu izohni qo'ygan edi: ishlatilmagan komponent elementi ham shunday tashlanadi.

Tekshirib ko'ring: Nega bundler Array.from(...) ni o'zi "pure" deb bilmaydi? Axir bu standart funksiya-ku.

4. Ikki tuzoq: barrel va import *

4.1 Barrel fayl

Barrel qulay: import { button, drawChart } from "bahor-ui" — bitta yo'l. Lekin bundler barrel orqali kelgan hamma modulni ochishi kerak: export * qaysi nomlarni berishini bilish uchun. Yon ta'siri bor modul (chart.js) — sideEffects siz — build'ga tushadi, hatto undan hech narsa ishlatilmasa ham («Muammo» bo'limidagi 0.17 kB). Katta UI kutubxonalarida bu yuzlab modul.

Davolar uchta. Kutubxona sideEffects ni to'g'ri yozsin. Yoki to'g'ridan-to'g'ri yo'ldan import qiling (bahor-ui/button.js, agar exports ruxsat bersa). O'z loyihangizda esa ichki barrel'lardan (src/utils/index.ts hammasini qayta eksport qiladi) ehtiyot bo'ling — ular dev server'ni ham sekinlashtiradi: bitta funksiya uchun o'nlab fayl so'raladi.

4.2 import *

import * as _ from "lodash-es" — "hammasi" degan ma'noda ko'rinadi. Lekin:

Statik ishlatilsa (_.sum), bundler ko'radi: faqat sum. Nom runtime'da hisoblansa (_[name]), bundler qaysi biri kerakligini bilolmaydi — hammasini (600+ funksiya) qo'shadi. Qoida: import * dan keyin faqat nuqta bilan, aniq nom bilan murojaat qiling.

5. Minifikatsiya va mangling

5.1 Nima o'zgaradi

Tree shaking ishlatilmagan kodni olib tashlaydi, minifikatsiya esa qolgan kodni siqadi. Kichik misol — main.js:

// main.js — chegirma hisoblash
function applyDiscount(orderTotal, discountPercent) {
  const discountAmount = (orderTotal * discountPercent) / 100;
  return {
    total: orderTotal - discountAmount,
    discount: discountAmount,
  };
}

const result = applyDiscount(63000, 10);
console.log(result.total, result.discount); // 56700 6300

--minify false bilan build — 0.31 kB, izohlar o'rniga //#region belgisi, nomlar to'liq. Sukut bilan (Oxc) — 0.10 kB, bitta qator:

function e(e,t){let n=e*t/100;return{total:e-n,discount:n}}var t=e(63e3,10);console.log(t.total,t.discount);

Mangling ("nomlarni ezish") — mahalliy o'zgaruvchi va parametr nomlarini qisqartirish. Faqat tashqaridan ko'rinmaydigan nomlar: applyDiscount ham e bo'ldi, chunki u eksport qilinmagan. Obyekt xususiyatlari (total) esa tegilmaydi — ularni boshqa kod, JSON yoki server nomi bilan o'qishi mumkin.

5.2 Uch minifikator

Vite 8 da build.minify: "oxc" (sukut), "terser" yoki "esbuild" (ikkalasi alohida o'rnatiladi), false. vazifalar (holat #22) da har biri 5 marta, index chunk:

Mashina: Intel Core i5-12500H, Windows 11; vaqt — butun vite build. terser eng kichik (−0.05 kB gzip), lekin 4 baravar sekin. Oxc — deyarli terser hajmida, esbuild tezligida. Shuning uchun Vite 8 uni sukut qilib tanlagan. Asosiy farq esa minifikatsiyaning o'zida: 49.61 → 25.33 kB (−49 %).

5.3 vazifalar da tree shaking qancha berdi?

Kanon o'lchovi (QADAMLAR, vite.config.ts ga vaqtincha treeshake: false qo'shib):

Tree shaking o'chsa — deyarli hech narsa o'zgarmadi (gzip'da hatto 10 bayt kam). Sabab: bu — ilova kodi, uni o'zimiz yozganmiz va ishlatilmaydigan funksiya deyarli yo'q (bo'lsa, knip darsida topamiz). web-vitals ham kichik va ESM. Tree shaking kutubxonada seziladi — Zod misolida:

Zod bundlersiz 233.7 KB edi — tree shaking va minifikatsiya uni 23.7 KB ga tushirdi. Bu yerda import { z } from "zod" yozilgan va Vite (Rolldown) uni to'g'ri kesdi. esbuild esa xuddi shu yozuvda Zod'ning hamma til (locale) xabarlarini ham olib kelgan edi — 90.6 KB (Paket tanlash darsidagi «import { z }» tuzog'i). Demak, tree shaking natijasi bundlerga ham bog'liq: o'z bundleringizda o'lchang. Valibot esa modulli qurilgan (har tekshiruv — alohida funksiya), shuning uchun tree shaking undan faqat ishlatilganini oladi — +1.34 KB. Shunga qaramay, kanonda kutubxona yo'q: uch maydonli tekshiruvga eng arzon variant ham +14 % hajm va yangi bog'liqlik qo'shadi (Paket tanlash darsida batafsil).

6. Ko'p uchraydigan xatolar

To'rtinchi qator: mangling applyDiscount.name ni "e" qiladi. Funksiya yoki klass nomi bo'yicha mantiq yozgan kod (if (err.constructor.name === "VazifaXatosi")) build'dan keyin buziladi. vazifalar dagi VazifaXatosi da this.name = "VazifaXatosi" aniq satr bilan yozilgani shuning uchun (Asboblar zanjiri darsidagi minifikatsiya parchasida ko'rinadi).

7. Mashqlar

Mashqlar kurs/mashqlar/16/23-tree-shaking/ da.

1-mashq (oson): Qoladimi?

import { button } from "bahor-ui" bilan, sideEffects siz build'da nima qoladi?

• drawChart funksiyasi:
• globalThis.chartTypes = … qatori:
• COLORS massivini yasash (Array.from, izohsiz):
• /* @__PURE__ */ qo'shilgandan keyin Array.from:

2-mashq (o'rta): Paket formatini tekshiring

npm view bilan uch paket tree shaking'ga qanchalik tayyorligini aniqlang: lodash, lodash-es, web-vitals. Har biri uchun type, module, sideEffects maydonlarini so'rang.

npm view lodash-es@4.18.1 type sideEffects

3-mashq (qiyin): O'lchov skripti

olcha.mjs yozing: bir nechta import variantini Vite'ning JavaScript API'si (build() funksiyasi) bilan, dist/ ga yozmasdan yig'ib, har birining xom va gzip hajmini chiqarsin. Variantlar — darsdagi to'rt lodash importi.

Ishoralar: build({ configFile: false, logLevel: "silent", build: { write: false, rolldownOptions: { input: "src/entry.js" } } }) — natija xotirada. Natija massiv bo'lishi mumkin — Array.isArray bilan tekshiring. output dagi type === "chunk" elementlarning code maydoni — JS matni. gzipSync — Asboblar zanjiri darsidagi hajm.mjs dan tanish. modulePreload: { polyfill: false } — o'lchovga Vite yordamchisi aralashmasin.

// olcha.mjs — bir nechta import usulini Vite bilan yig'ib, hajmini
// o'lchaydi (dist/ ga yozmasdan, xotirada)
import { writeFileSync } from "node:fs";
import { gzipSync } from "node:zlib";
import { build } from "vite";

const variants = {
  "lodash (default)": 'import _ from "lodash"; log(_.sum(a));',
  "lodash { sum }": 'import { sum } from "lodash"; log(sum(a));',
  "lodash/sum.js": 'import sum from "lodash/sum.js"; log(sum(a));',
  "lodash-es": 'import { sum } from "lodash-es"; log(sum(a));',
};
const PRELUDE = "const a = [35000, 28000];\nconst log = console.log;";

export async function measure(code) {
  writeFileSync("src/entry.js", `${code}\n${PRELUDE}\n`);
  const result = await build({
    configFile: false,
    logLevel: "silent",
    build: {
      write: false,
      modulePreload: { polyfill: false },
      rolldownOptions: { input: "src/entry.js" },
    },
  });
  const { output } = Array.isArray(result) ? result[0] : result;
  const js = output.filter((f) => f.type === "chunk");
  const raw = js.reduce((s, f) => s + Buffer.byteLength(f.code), 0);
  const gzip = js.reduce((s, f) => s + gzipSync(f.code).length, 0);
  return { raw, gzip };
}

if (import.meta.main) {
  for (const [name, code] of Object.entries(variants)) {
    const { raw, gzip } = await measure(code);
    const r = String(raw).padStart(6);
    const g = String(gzip).padStart(6);
    console.log(`${name.padEnd(18)} ${r} B  gzip ${g} B`);
  }
}

npm i -E lodash@4.18.1 lodash-es@4.18.1
npm i -D -E vite@8.3.3
node olcha.mjs

lodash (default)    71739 B  gzip  26029 B
lodash { sum }      71230 B  gzip  25806 B
lodash/sum.js         893 B  gzip    499 B
lodash-es             211 B  gzip    169 B

4-mashq: Amaliy tajriba — vazifalar da o'lchov

Bu darsda vazifalar kodi o'zgarmaydi — faqat o'lchaymiz. O'z loyihangizda:

1. npx vite build --minify false — index chunk hajmi?
2. vite.config.ts ning build.rolldownOptions iga vaqtincha treeshake: false qo'shib, build qiling. Farq qancha?
3. O'zgarishni qaytaring (git restore vite.config.ts).

8. Real ishda

• Kutubxona tanlash: npm view <paket> type module sideEffects va bundlephobia.com kabi saytlar — "bu paket menga qancha turadi?" savoliga birinchi javob.
• Kutubxona yozsangiz: ESM, "sideEffects": false (yoki ["*.css"]), modulli eksportlar — foydalanuvchilaringiz bundle'i kichik bo'ladi.
• Intervyu savollari: "Tree shaking nima va qachon ishlamaydi?", "sideEffects nima?", "Minifikatsiya va mangling farqi?", "Nega lodash emas, lodash-es?".

Xulosa

• Tree shaking — ishlatilmagan eksportlarni tashlash; faqat statik ESM bilan ishonchli, CommonJS paketda (lodash) nomli import ham yordam bermaydi.
• "sideEffects": false — butun modullarni tashlashga ruxsat (yolg'on bo'lsa, yon ta'sir yo'qoladi); ["*.css"] — xavfsiz shakl; /* @__PURE__ */ — bitta chaqiruvga ruxsat.
• Barrel fayl va import * + hisoblangan nom — bundle'ni jimgina kattalashtiradi.
• Minifikatsiya: bo'sh joy, izoh, mangling (mahalliy nomlar), siqish; xususiyat nomlari saqlanadi. Vite 8 — Oxc (terser hajmida, esbuild tezligida).
• vazifalar da hajmni minifikatsiya kamaytirdi (−49 %), tree shaking — kutubxonada (Zod 233.7 → 23.7 KB).

Keyingi dars: Source map'lar — minifikatsiyadan keyin e(e,t) dagi xatoni qanday qilib asl .ts fayl va qatorga qaytarish mumkin; vazifalar ga source map qo'shamiz.

Manbalar

• Rollup/Rolldown: "Tree-shaking", treeshake va moduleSideEffects — rollupjs.org/configuration-options/#treeshake, rolldown.rs
• webpack: "Tree Shaking → Mark the file as side-effect-free" (sideEffects, CSS tuzog'i) — webpack.js.org/guides/tree-shaking
• Vite: "Build Options → build.minify" — vite.dev/config/build-options
• Oxc: "Minifier" — oxc.rs/docs/guide/usage/minifier
• lodash-es — npmjs.com/package/lodash-es