Bundler nima va Webpack Vite'dan nimasi bilan farq qiladi?

Savol

Bundler nima qiladi va Webpack bilan Vite o'rtasidagi tub farq nimada?

Qisqa javob

Bundler loyihaning bog'liqliklar grafini (import/require) tahlil qiladi, modullarga transformatsiyalar qo'llaydi (Babel/TS/CSS-loaderlar) va ularni bitta yoki bir nechta optimallashtirilgan bundlga yig'adi. Webpack dev-serverni ishga tushirishdan oldin har doim bundlni yig'ib bo'ladi, Vite esa development rejimida original ES-modullarni to'g'ridan-to'g'ri brauzerga uzatadi, shu sababli deyarli bir zumda ishga tushadi.

Batafsil javob

Har qanday bundlerning vazifasi to'rtta narsaga to'g'ri keladi:

• Modullarni resolving qilish — entry-fayllardan boshlab bog'liqliklar grafini qurish.
• Transformatsiyalar — fayllarni loaders/plugins orqali o'tkazish: TS → JS, SCSS → CSS, JSX → JS va h.k.
• Code-splitting — grafni chunklarga bo'lish (route bo'yicha, import() bo'yicha), butun ilovani birdaniga yuklamaslik uchun.
• Chiqishni optimallashtirish — tree shaking, minifikatsiya, keshlash uchun fayl nomlarini xeshlash.

Webpack boshqalardan oldin paydo bo'lgan va bularning barchasini yagona loaders/plugins konveyeri orqali hal qiladi. Hatto dev-rejimda ham u brauzerga biror narsa uzatishdan oldin to'liq (yoki deyarli to'liq) bundlni qurishi kerak — katta loyihalarda bu start va hot reload paytida soniyalar, hatto o'nlab soniyalarni oladi. Buning evaziga uning eng yetuk plagin ekotizimi va konfiguratsiya bo'yicha maksimal moslashuvchanligi bor.

Vite yondashuvni aynan development uchun o'zgartiradi: u ilovani butunlay bundlamaydi. Brauzerlar allaqachon ES-modullarni nativ tarzda yuklashni bilishadi (<script type="module">), shuning uchun Vite fayllarni so'rov bo'yicha uzatadi — modul so'ralganda, Vite uni tez orada (Go tilida yozilgan esbuild orqali, bu JS-transformerlarga qaraganda 10–100 marta tezroq) transformatsiya qilib beradi. node_modules ichidagi og'ir bog'liqliklarni (react, lodash va h.k.) Vite oldindan bir marta xuddi shu esbuild bilan CommonJS→ESM formatiga "pre-bundle" qiladi, paketning ichki fayllariga yuzlab alohida HTTP-so'rov yubormaslik uchun. Shu sababli dev-server ilova hajmidan qat'i nazar deyarli bir zumda ishga tushadi.

Prod-bundling uchun Vite brauzerning nativ ESM-importlaridan foydalanmaydi (prodda juda ko'p so'rov bo'ladi), balki qopqoq ostida Rollup orqali bundl yig'adi — ya'ni prodda Vite ham to'liq bundling qiladi, faqat kichik va toza chiqish uchun moslashtirilgan boshqa vosita bilan.

Alohida o'rin egallaydigan esbuild va Turbopack (Vercel'dan, Rust'da) — yangi avlod bundlerlari, JS o'rniga kompilyatsiya qilinadigan tillarda yozilgan, shu tufayli transformatsiya va parsing bir necha barobar tezroq. Ular ko'pincha Webpack/Vite'ni butunlay almashtirish uchun emas, balki boshqa vositalar ichida tezlashtiruvchi qatlam sifatida ishlatiladi.

Misol

// vite.config.js — minimal konfiguratsiya
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  build: {
    // prod-bundling qopqoq ostida Rollup orqali boradi
    rollupOptions: {
      output: {
        // og'ir vendor kutubxonalari uchun qo'lda code-splitting
        manualChunks: {
          vendor: ['vue', 'vue-router'],
        },
      },
    },
  },
})

// webpack.config.js — solishtirish uchun xuddi shu mazmun Webpack'da
module.exports = {
  entry: './src/main.js',
  optimization: {
    splitChunks: { chunks: 'all' }, // manualChunks'ning analogi
  },
  module: {
    rules: [{ test: /\.vue$/, loader: 'vue-loader' }],
  },
}

Qo'shimcha savollar

• Nega Vite dev'da esbuild, prodda esa Rollup ishlatadi, hamma joyda esbuild emas?
• Tree shaking nima va u qanday holatlarda ishlamaydi (masalan, moduldagi side-effectlar tufayli)?
• HMR (Hot Module Replacement) qanday ishlaydi va u sahifani to'liq qayta yuklashdan nimasi bilan farq qiladi?