Bundlerlar landshafti 2026: Rolldown, Turbopack, Rspack, esbuild

Qisqacha: 2026-yilda ilova uchun asosiy tanlov — Vite (ichida Rust'dagi Rolldown). Next.js loyihalari — Turbopack bilan, katta webpack loyihalari — webpack config'ini tushunadigan Rspack bilan. esbuild (Go) — tez yordamchi vosita, tsdown — kutubxona yig'ish uchun. Bizning o'lchovimizda 1 531 modulli loyihani esbuild, Rolldown, Rspack va Vite 0.3–0.5 soniyada, webpack + Babel esa 7.6 soniyada yig'di. Farqning asosiy sababi — til: Rust va Go JavaScript'dan ko'p marta tez va ko'p yadroni ishlatadi.

Bu darsda

• 2026-yildagi asosiy bundlerlarni va ularning "uyi"ni (qaysi freymvork, qaysi kompaniya) bilasiz.
• Yuklanish statistikasini o'qiysiz va undan to'g'ri xulosa chiqarasiz.
• Bundler tezligini o'zingiz o'lchaysiz — mediana, mashina ma'lumoti bilan.
• Loyiha turiga qarab vosita tanlay olasiz: ilova, kutubxona, Next.js, eski webpack loyiha.

Oldin bilishingiz kerak: Vite V: production build, webpack konseptlari, Transpilyatsiya: Babel, SWC, esbuild va Oxc.

1. Nega bu kerak?

Sardor ish e'lonlarini o'qiyapti: "Vite, Rspack bilan tajriba", "Turbopack", "esbuild", "Rollup plaginlari". Bir xil ishni qiladigan shuncha vosita nega bor? Qaysi birini o'rganish kerak?

Javob: hammasini chuqur o'rganish shart emas. Bundler tushunchalari — graf, chunk, hash, loader/plagin, tree shaking — hammasida bir xil (Bundler nima). Siz ularni Vite misolida bilasiz. Bu dars — xarita: har vosita qayerdan chiqqan, qayerda yashaydi va qachon unga duch kelasiz. Xaritasiz notanish nom qo'rqitadi, xarita bilan — "aha, bu webpack'ning Rust'dagi nusxasi" deysiz.

O'xshatish: bozorda ko'p choyxona bor, lekin choy damlash usuli bir xil — suv, choy, choynak. Biri tezroq qaynatadi, biri katta qozonda, biri faqat o'z mahallasiga xizmat qiladi.

2. Qisqa tarix: nega bundlerlar o'zgardi

flowchart LR
  A["2012<br/>webpack (JS)"] --> B["2015<br/>Rollup (JS)"]
  B --> C["2020<br/>esbuild (Go)<br/>Vite"]
  C --> D["2022–2024<br/>Turbopack, Rspack<br/>(Rust)"]
  D --> E["2026<br/>Rolldown 1.0<br/>Vite 8, Vite+"]

Uch bosqich. Birinchisi — JavaScript'da yozilgan bundlerlar (webpack, Rollup, Parcel): ular imkoniyatlari bilan kuchli, lekin katta loyihada sekin. Ikkinchisi — 2020-yilda esbuild (Go tilida) ko'rsatdiki, bundler o'nlab baravar tez bo'lishi mumkin. Vite shu g'oyani oldi: dev'da esbuild, build'da Rollup. Uchinchisi — Rust: Turbopack (Vercel), Rspack (ByteDance) va nihoyat Rolldown (Vite jamoasi). Vite 8 (2026-yil 12-mart) ikki vositani bittaga — Rolldown'ga almashtirdi.

Nega aynan Go va Rust? Ular mashina kodiga kompilyatsiya qilinadi va ko'p yadroni bir vaqtda ishlatadi: 1 500 faylni 16 ta protsessor ipi parallel o'giradi. JavaScript esa bitta asosiy oqimda ishlaydi (Event loop darsidan bilasiz). Yana bir sabab — bitta o'tish: eski zanjirda kod Babel'da tahlil qilinib, Terser'da yana qayta tahlil qilinardi. Yangi vositalar (Oxc, SWC) AST'ni bir marta quradi va hammasini (o'girish, yig'ish, siqish) shu bilan qiladi.

3. Asosiy vositalar

3.1 Rollup va Rolldown

Rollup (2015) — ESM uchun qurilgan birinchi bundler; tree shaking'ni ommalashtirgan. Kutubxonalar uchun sevimli: toza, o'qiladigan natija. Vite 7 gacha build'ni Rollup qilgan. Uning plagin API'si — standart: Vite plaginlari ham shu shaklda (Vite plaginlari).

Rolldown — Rollup'ning Rust'dagi qayta yozilgani, Vite jamoasi (VoidZero kompaniyasi) tomonidan. Paketning npm tavsifi: "Fast JavaScript/TypeScript bundler in Rust with Rollup-compatible API" — "Rollup bilan mos API'li tez bundler". Uning 1.0 versiyasi 2026-yil 7-mayda chiqdi, hozirgisi — 1.2.12 (npm view). Ichida Oxc — Rust'dagi parser, transformer va minifikator.

Vite 8.3.3 ning package.json ini ochsak, dependencies da: rolldown, lightningcss, postcss, picomatch, tinyglobby. esbuild — endi faqat ixtiyoriy peerDependencies da. Ya'ni Vite 8 esbuild'siz ishlaydi.

Rolldown'ni to'g'ridan-to'g'ri ham ishlatish mumkin, lekin u "toza" bundler. Sardorning bahor-menyu sini (CSS importi bilan) Rolldown CLI'ga berdik:

[UNSUPPORTED_FEATURE] Bundling CSS is no longer supported (experimental support has been removed). See https://github.com/rolldown/rolldown/issues/4271 for details.

Tarjimasi: "CSS yig'ish endi qo'llab-quvvatlanmaydi (tajribaviy qo'llab-quvvatlash olib tashlangan)". CSS'ni Vite qo'shadi (Lightning CSS bilan). Bu — Vite va Rolldown munosabati: Rolldown — dvigatel, Vite — tayyor mashina (dev server, HTML, CSS, public/, .env, HMR).

3.2 esbuild

esbuild — 2020-yil, Go tilida, Evan Wallace (Figma asoschilaridan biri) yozgan. Yuklanish bo'yicha eng ko'p o'rnatiladigan bundler — lekin ko'pincha boshqa vositaning ichida (Vite 7 gacha, tsx, ko'p CLI'lar). O'zi ham to'liq ishlaydi:

npx esbuild src/main.ts --bundle --minify --format=esm --outdir=out

  out\main.js   320b 
  out\main.css   71b 

Done in 33ms

CSS'ni ham yig'di. Cheklovlari: HTML'ni tushunmaydi, dev server sodda, code splitting faqat ESM formatida. Kichik skriptlar, Node uchun yig'ish, tez prototip — juda qulay.

3.3 webpack, Rspack va Rsbuild

webpack — oldingi darsda o'qidik: eng katta ekotizim, eng ko'p eski loyiha. 5.111.1 (2026-09-18) — faol qo'llab-quvvatlanadi, lekin yangi loyihalar uchun kam tanlanadi.

Rspack — ByteDance (TikTok kompaniyasi) jamoasining Rust'dagi bundleri. Asosiy g'oyasi — webpack bilan moslik: entry, module.rules, plugins — o'sha shakl, ko'p webpack plaginlari va loader'lari ishlaydi. 1.0 — 2024-yil avgust, 2.0 — 2026-yil aprel, hozir 2.2.8. Katta webpack loyihasini Vite'ga to'liq ko'chirish qimmat bo'lsa — Rspack'ga o'tish config'ni deyarli o'zgartirmaydi. Biz o'lchovda babel-loader o'rniga Rspack'ning ichki builtin:swc-loader idan foydalandik:

// rspack.config.mjs — webpack bilan bir xil shakl, loader esa Rust'da
export default {
  mode: "production",
  entry: "./src/main.ts",
  target: ["web", "es2022"],
  output: { path: process.cwd() + "/out-rspack", clean: true },
  resolve: { extensions: [".ts", ".js"] },
  module: {
    rules: [
      {
        test: /\.ts$/,
        loader: "builtin:swc-loader",
        options: {
          jsc: { parser: { syntax: "typescript" }, target: "es2022" },
        },
        type: "javascript/auto",
      },
    ],
  },
};

webpack config'idan tanish, to'g'rimi? Rsbuild — Rspack ustidagi tayyor vosita (Vite'ga o'xshash: sozlamasiz dev va build).

3.4 Turbopack

Turbopack — Vercel'ning (Next.js egasi) Rust'dagi bundleri. Mustaqil vosita sifatida tarqatilmaydi: u Next.js ichida yashaydi. Next.js 16 (2025-yil oktabr) uni dev va build uchun sukut bundler qildi. Ya'ni Next.js loyihasida ishlasangiz, Turbopack bilan ishlayapsiz — next.config.js orqali. 23-qismda ko'ramiz.

3.5 Parcel, Bun va kutubxona vositalari

• Parcel — "nol sozlama" g'oyasining kashshofi (2017): parcel index.html va tamom. Hozir 2.16.4; yuklanishlar kam (pastdagi grafikka qarang).
• Bun — Node'ga muqobil JavaScript runtime'i, ichida o'z bundleri bor: bun build ./src/main.ts --outdir out (rasmiy hujjatdan; biz Bun'ni o'rnatmadik — kurs Node 24'da). Bun haqida — Yarn va Bun.
• tsup va tsdown — kutubxona yig'ish uchun: .d.ts turlarini, ESM va CJS formatlarini, package.json dagi exports ni bir buyruqda. tsup README'sida: "This project is not actively maintained anymore. Please consider using tsdown instead" — "Loyiha faol qo'llab-quvvatlanmaydi, tsdown'ni ko'ring". Vosita tsdown (0.23.0) — Rolldown ustida, npm tavsifi "The Elegant Bundler for Libraries". Vite V dagi library mode'dan farqi — turlar va exports ham qamrab olinadi.

3.6 Vite+ — butun zanjir bitta vositada

Vite+ (vite-plus paketi, MIT) — VoidZero'ning "yagona asboblar zanjiri": 1.0 versiyasi 2026-yil 28-sentabrda chiqdi (npm view vite-plus time), 1.1.0 — 7-oktabr. README'sidan: u Vite, Vitest, Oxlint, Oxfmt, Rolldown, tsdown va Vite Task'ni bitta vp buyrug'iga birlashtiradi: vp dev, vp check (format, lint, tur), vp test, vp build, vp pack (kutubxona). Config — o'sha vite.config.ts, faqat import { defineConfig } from "vite-plus".

Bu — Frontend asboblar zanjiri dagi halqalarni bitta kompaniya vositalari bilan to'ldirish urinishi. Biz kursda zanjirni alohida-alohida o'rgandik — har halqani tushunasiz, shuning uchun Vite+ ni ham tushunasiz. 1.0 — bir necha kunlik; ommalashadimi — vaqt ko'rsatadi.

3.7 Dvigatel ichidagi dvigatellar: Oxc, SWC, Lightning CSS

Bundler — bitta dastur emas, bir nechta qatlam. Eng pastda parser (kodni AST'ga aylantiradi), transformer (TS va JSX'ni olib tashlaydi, sintaksisni eskiroq brauzerga moslaydi) va minifikator turadi. Bu qatlamlar alohida loyihalar sifatida yashaydi va turli bundlerlar ularni qayta ishlatadi:

Shuning uchun "Vite 8 tez" deganda aslida "Rolldown va Oxc tez" deyiladi. Bu qatlamlarni Transpilyatsiya darsida ko'rgansiz. Xuddi shu Oxc linter sifatida ham bor — ESLint'ning Rust'dagi muqobili (Biome va Oxlint). Ya'ni bitta parser bir nechta vositaga xizmat qiladi: kod bir marta tahlil qilinadi, natijadan har vosita foydalanadi. Kelajakdagi "yagona zanjir" (Vite+) g'oyasi ham shundan.

Tekshirib ko'ring: Vite+ chiqdi. vazifalar ni hoziroq unga ko'chirish kerakmi?

Tekshirib ko'ring: "Turbopack Vite'dan tezmi?" degan savolni o'lchov bilan tekshirib bo'ladimi?

4. Raqamlar: kim qancha ishlatiladi

npm statistikasi (api.npmjs.org, 2026-09-29…10-05 haftasi, yuklanishlar):

Bu raqamlarni o'qishda ehtiyot bo'ling:

• Yuklanish ≠ foydalanuvchi. Har CI ishga tushishi, har npm ci — yangi yuklanish. Katta kompaniyaning bitta loyihasi kuniga yuzlab marta yuklashi mumkin.
• Ichki bog'liqliklar. esbuild birinchi o'rinda, chunki uni yuzlab boshqa vosita (Vite 7 va undan eski, tsx, Storybook) o'zi o'rnatadi. Rolldown'ning 130 mln i — asosan Vite 8 ichida. rollup ham hali ko'p: Vite 7 va eski loyihalar.
• Turbopack jadvalda yo'q — u next paketining ichida.

Xulosa: ekotizim Vite atrofida jamlangan, webpack hali katta (eski loyihalar), Rust vositalari tez o'smoqda.

5. Tezlik: o'zimiz o'lchadik

5.1 Usul

Bundler'lar "X marta tez" deb reklama qiladi — har biri o'zi tanlagan loyihada. Halol yo'l — o'z loyihangizda o'lchash. Sinov loyihasi: yasa.mjs skripti 30 ta "bo'lim" va har birida 50 ta modul yaratdi (har modulda interfeys, funksiya, #private maydonli klass) — jami 1 531 ta .ts fayl. Har vosita 5 marta, butun jarayon vaqti (Node'dan to'g'ridan-to'g'ri, npx siz), mediana. Hammasi minifikatsiya bilan.

Mashina: Intel Core i5-12500H (16 ip), 16 GB, Windows 11, Node 24.21.0.

5.2 Natijani o'qish

• Rust/Go to'rtligi bir guruhda: 0.26–0.50 s. Ular orasidagi farq bu loyihada ahamiyatsiz.
• Vite Rolldown'dan sekinroq — chunki u ko'proq ish qiladi: index.html ni o'qiydi, CSS bosqichi, gzip hajmini hisoblaydi, modulepreload polyfill'ini qo'shadi. Dvigatel bir xil.
• webpack + Babel — 7.6 s. Bu loyihada Rspack'dan taxminan 19 baravar sekin. Asosiy sabab — babel-loader: har fayl JavaScript'da alohida tahlil qilinadi va o'giriladi.

Halol cheklovlar: loyiha sun'iy (bir xil shakldagi modullar), vaqtning bir qismi — Node va vositaning ishga tushishi; real loyihada nisbatlar boshqa bo'ladi. Va mashina yuki muhim: xuddi shu o'lchovni boshqa paytda (kompyuterda boshqa ishlar bor edi) takrorlaganimizda hamma natija qariyb ikki baravar oshdi (esbuild 0.47 s, Vite 1.01 s), lekin tartib o'zgarmadi. Shuning uchun bitta raqamga emas, mediana va tartibga qarang. Natija fayllar hajmini esa bu sun'iy loyihada solishtirmadik — bir xil kod juda yaxshi siqiladi va raqam aldaydi.

Tekshirib ko'ring: Hamkasbingiz vite build ni bir marta ishga tushirib, 1.2 s oldi, Rspack'ni ham bir marta — 0.9 s. "Rspack tezroq ekan" demoqda. Bu xulosa ishonchlimi?

6. Qachon nima: tanlov jadvali

vazifalar uchun javob — Vite: biz uni Bundler nima darsidan beri ishlatyapmiz, va 17-qismdagi React ham Vite bilan.

7. Ko'p uchraydigan xatolar

7.1 Benchmark reklamasiga ishonish

"10 baravar tez" — muallifning loyihasida, muallifning mashinasida. O'z loyihangizda o'lchang (3-mashq).

7.2 Tezlik uchun ko'chish

Build 20 s dan 2 s ga tushdi — yaxshi. Lekin ko'chish bir hafta oldi, ikki plagin ishlamay qoldi. Tezlik — mezonlardan biri, yagonasi emas.

7.3 Vositalarni aralashtirish

Rolldown'ga to'g'ridan-to'g'ri CSS berish — xato (yuqoridagi UNSUPPORTED_FEATURE). Har vosita o'z vazifasiga: ilova — Vite orqali.

8. Mashqlar

1-mashq (oson): Vosita va uyi

Har vositani tavsifga moslang: Rolldown, Turbopack, Rspack, esbuild, tsdown.

1. Next.js ichida, mustaqil tarqatilmaydi —
2. webpack config'ini tushunadi, Rust'da —
3. Vite 8 ning dvigateli —
4. Go'da yozilgan, ko'p vositalar ichida —
5. Kutubxona va .d.ts uchun —

2-mashq (o'rta): esbuild va Vite — bir loyiha

bahor-menyu da (darsdagi): npx esbuild src/main.ts --bundle --minify --format=esm --outdir=out va npx vite build. Solishtiring: qaysi fayllar chiqdi, index.html bormi, hash bormi?

3-mashq (qiyin): O'z o'lchovingiz

kurs/mashqlar/16/34-landshaft/ da: npm i -D -E vite@8.3.3 esbuild@0.28.2 rolldown@1.2.12 @rspack/core@2.2.8 @rspack/cli@2.2.8. Darsdagi yasa.mjs bilan sinov loyihasini yarating, keyin har vositani 5 marta ishga tushiring va mediana chiqaring (node:child_process dagi spawnSync, performance.now()). Jadvalga mashinangiz ma'lumotini ham yozing (os.cpus(), os.totalmem()).

Ishora: Performansni o'lchash darsidagi qoidalar — isitish, bir necha marta, mediana.

// olcha.mjs — har bundler 5 marta, mediana (devor soati)
import { spawnSync } from "node:child_process";
import { cpus, totalmem } from "node:os";

const node = process.execPath;
const runs = {
  esbuild: [node, "node_modules/esbuild/bin/esbuild", "src/main.ts",
    "--bundle", "--minify", "--format=esm", "--outdir=out-esbuild"],
  rolldown: [node, "node_modules/rolldown/bin/cli.mjs", "src/main.ts",
    "--minify", "-d", "out-rolldown"],
  "vite build": [node, "node_modules/vite/bin/vite.js", "build",
    "--outDir", "out-vite", "--logLevel", "silent"],
  rspack: [node, "node_modules/@rspack/cli/bin/rspack.js", "build",
    "-c", "./rspack.config.mjs"],
};
const cpu = cpus();
console.log(cpu[0].model, cpu.length, "ip,",
  Math.round(totalmem() / 2 ** 30), "GB, Node", process.version);
for (const [name, [cmd, ...args]] of Object.entries(runs)) {
  const times = [];
  for (let i = 0; i < 5; i++) {
    const start = performance.now();
    const result = spawnSync(cmd, args, { stdio: "ignore" });
    if (result.status !== 0) throw new Error(`${name}: xato`);
    times.push(performance.now() - start);
  }
  times.sort((a, b) => a - b);
  console.log(name.padEnd(12), "mediana", Math.round(times[2]), "ms");
}

9. Real ishda

• Vakansiyada "webpack" — eski loyiha bor demak; "Vite" — yangi; "Rspack" — kompaniya katta webpack loyihasini tezlashtirgan; "Turbopack" — Next.js.
• Monorepo'larda bir nechta vosita yonma-yon: ilovalar — Vite, kutubxonalar — tsdown, server — esbuild bilan bitta faylga.
• Intervyu savollari: "Nega Rust asosidagi vositalar tez?", "Vite 8 da nima o'zgardi?" (Rollup va esbuild o'rniga Rolldown), "Kutubxona uchun qaysi vosita?".

Xulosa

• Uch davr: JavaScript bundlerlar (webpack, Rollup) → esbuild (Go) → Rust (Turbopack, Rspack, Rolldown). Sabab — tezlik: mashina kodi, ko'p yadro, bitta AST.
• Vite 8 = Rolldown + Oxc + Lightning CSS; esbuild — faqat ixtiyoriy. Rolldown — dvigatel, Vite — dev server, HTML, CSS bilan to'liq vosita.
• Turbopack — Next.js ichida, Rspack — webpack bilan mos, tsdown — kutubxonalar (tsup o'rniga), Vite+ — yagona zanjir (1.0, 2026-09-28).
• O'lchovimiz (1 531 modul): esbuild 0.26 s, Rolldown 0.27, Rspack 0.40, Vite 0.50, webpack + Babel 7.57 s. Yuklanish va benchmark raqamlarini manbasi va sharti bilan o'qing.

Keyingi dars: SVG va ikonka pipeline — SVG'ni fayl, inline yoki sprite sifatida ulash, SVGO bilan kichraytirish va vazifalar dagi ikonka.

Manbalar

• Vite 8 e'loni va migratsiya — vite.dev/blog, vite.dev/guide/migration (Vite 8.0.0 — npm'da 2026-03-12)
• Rolldown — rolldown.rs; Rspack/Rsbuild — rspack.rs; esbuild — esbuild.github.io; Turbopack — nextjs.org/docs
• Vite+ — viteplus.dev (vite-plus 1.0.0 — npm'da 2026-09-28); tsdown — tsdown.dev
• npm yuklanish statistikasi: api.npmjs.org/downloads/point/2026-09-29:2026-10-05/
• O'lchov: olcha.mjs, i5-12500H, Windows 11, Node 24.21.0, 2026-10-10