Bundler — bu nima, qanday turlari bor va ishlash prinsipi

Bundler nima?

Bundler (modul yig'uvchi) — kirish nuqtasini (entry point) — ilovaning asosiy faylini — qabul qiladigan va uning barcha bog'liqliklarini rekursiv ravishda aylanib, modul grafigini quradigan buyruq qatori vositasidir. Chiqishda bundler HTML sahifasiga ulanishi yoki mobil ilovada ishga tushirilishi mumkin bo'lgan bir yoki bir nechta faylni yaratadi.

Zamonaviy ishlab chiqishda bundler nima uchun kerak

Brauzerlar uzoq vaqt davomida platforma darajasida JavaScript modul tizimini qo'llab-quvvatlamadi. Bundler bu muammoni hal qilib, yuzlab import va require-ni bitta faylga aylantirdi. Bugungi kunda, brauzerlarda mahalliy ES modullari qo'llab-quvvatlansa ham, bundlerlar qo'shimcha vazifalarni bajaradi: transpilatsiya JSX va TypeScript, minifikatsiya kod, code splitting kechiktirilgan yuklash uchun va hot module replacement (HMR) ishlab chiqishni tezlashtirish uchun.

Mobil ilova ishlab chiqishda React Native standart bundler sifatida Metro-dan foydalanadi, Flutter esa Dart-ga asoslangan o'z qurish tizimidan foydalanadi. Bundler tanlovi to'g'ridan-to'g'ri ishlab chiqish tezligiga, ilova hajmiga va ish vaqti unumdorligiga ta'sir qiladi.

Boglash qanday ishlaydi?

Boglash bir necha bosqichdan o'tadi: kirish fayllarini tahlil qilish, bog'liqlik grafigini qurish, modullarni o'zgartirish va chiqish fayllarini yaratish. Har bir bosqichda bundler manba kodini o'zgartirish uchun loaderlar va optimallashtirish uchun plaginlarni qo'llaydi.

Tahlil qilish bosqichi va bog'liqlik grafigi

Bundler kirish nuqtasidan boshlaydi, faylni o'qiydi va AST (mavhum sintaksis daraxti) quradi. AST-dan barcha import va require operatorlari chiqariladi. Har bir topilgan import uchun bundler jarayonni rekursiv ravishda takrorlaydi, barcha bog'liqliklar bitta grafikda to'planmaguncha.

// Bundlerni soddalashtirilgan tatbiqi
const fs = require('fs');
const path = require('path');

function buildGraph(entry) {
  const content = fs.readFileSync(entry, 'utf-8');
  const imports = content.match(/require\(['"](.+?)['"]\)/g);
  const modulePath = path.resolve(path.dirname(entry), imports[0]);
  return { entry, content, deps: [buildGraph(modulePath)] };
}

Grafik qurilgandan so'ng, bundler loaderlarni qo'llaydi — fayllarni JavaScript-ga aylantiruvchi transformatsiyalar: TypeScript → JS, SCSS → CSS, JSX → JSX funksiyalari. Keyin plaginlar qo'shimcha o'zgartirishlarni amalga oshiradi: minifikatsiya, rasmlarni inline qilish, service worker yaratish.

Bundlerlarning asosiy turlari

Bundlerlar uch avlodga bo'linadi: klassik, ixtisoslashtirilgan va ES modullariga asoslangan yangi avlod. Har bir tur o'z arxitekturasiga va qo'llanish sohasiga ega.

Klassik bundlerlar

Webpack — ulkan ekotizimga ega eng keng tarqalgan bundler. Uning asosiy afzalligi moslashuvchanlik: minglab loader va plaginlar deyarli har qanday yig'ish stsenariysini qamrab oladi. Parcel fayl kengaytmalari asosida kerakli transformatsiyalarni avtomatik aniqlaydigan zero-config yondashuvini taklif qiladi. Ikkala bundler ham code splitting va HMR-ni qo'llab-quvvatlaydi.

Ixtisoslashtirilgan bundlerlar

Metro maxsus React Native uchun yaratilgan va faqat JavaScript va TypeScript bilan ishlaydi. Uning arxitekturasi mobil ishlab chiqish uchun optimallashtirilgan: inline requires qo'llab-quvvatlashi, modullarni asinxron yuklash va Hermes engine bilan integratsiya. Rollup kutubxonalar va npm paketlariga mo'ljallangan bo'lib, keraksiz o'ramlarsiz toza ES modul chiqishini yaratadi.

Webpack, Metro va Vite solishtirish

Bundler tanlovi platforma va loyiha talablariga bog'liq. Webpack universaldir, ammo batafsil sozlashni talab qiladi. Metro React Native uchun muqobilsizdir. Vite mahalliy ES modullari tufayli eng tez ishlab chiqishni ta'minlaydi.

Vite bog'liqliklarni oldindan boglash uchun esbuild-dan va ishlab chiqarish yig'masi uchun Rollup-dan foydalanadi, bu ishlab chiqish rejimida Webpack bilan solishtirganda 5–10 marta tezlikni oshiradi. Metro veb maqsadlarni qo'llab-quvvatlamaydi, ammo React Native bridge va Turbo Modules bilan muammosiz integratsiyani ta'minlaydi.

Loyihada bundlerni sozlash

Konfiguratsiya bundlerning turli fayl turlarini qanday qayta ishlashini, yig'ma qayerda yaratilishini va qanday optimallashtirishlar qo'llanilishini belgilaydi. Oddiy konfiguratsiya fayli kirish nuqtasi, modul qoidalari, plaginlar va chiqish sozlamalarini o'z ichiga oladi.

React Native veb loyihasi uchun Webpack konfiguratsiyasi namunasi

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[contenthash].js',
    clean: true,
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx|ts|tsx)$/,
        exclude: /node_modules/,
        use: { loader: 'babel-loader', options: { presets: ['@babel/preset-react'] } },
      },
      { test: /\.css$/, use: ['style-loader', 'css-loader'] },
    ],
  },
  plugins: [new HtmlWebpackPlugin({ template: './public/index.html' })],
  devServer: { port: 3000, hot: true },
};

Metro sozlash uchun alohida metro.config.js va babel.config.js fayllaridan foydalanadi. Webpack-dan farqli o'laroq, Metro konfiguratsiyasi ancha sodda, chunki bundler React Native uchun ixtisoslashtirilgan va uslublar yoki rasmlar uchun loader sozlashni talab qilmaydi.

Yig'ishdagi odatiy xatolar

Hatto tajribali dasturchilar ham boglash xatolariga duch kelishadi. Duplicate module — eng keng tarqalgan muammolardan biri, bir xil bog'liqlik package.json-da versiya nomuvofiqligi sababli bir necha marta boglashga tushganda yuz beradi. Module not found import yo'li noto'g'ri ko'rsatilganda yoki paket o'rnatilmaganda paydo bo'ladi.

Metro uchun xos xatolar

Metro mobil qurilmalar uchun boglash hajmi bilan cheklangan. 2–5 MB chegaradan oshib ketganda, qurilmada xotira yetishmasligi sababli Unable to resolve module xatosi yuz beradi. Yechim — modullarni kechiktirilgan yuklash uchun inline requires va RAM bundles dan foydalaning. Metro shuningdek simlinklarga sezgir, shuning uchun monorepozitoriyalar uchun konfiguratsiyada qo'shimcha watchFolders sozlanishi talab qilinadi.

Webpack uchun odatiy muammo — Module parse failed, fayl kutilmagan formatga ega bo'lganda yoki kerakli loader yo'q bo'lganda yuz beradi. Fayl kengaytmasini tekshirish va module.rules-da tegishli qoidani qo'shish muammoni hal qiladi. source-map-explorer dan foydalanish yakuniy boglashda takrorlanuvchi modullarni va ortiqcha bog'liqliklarni topishga yordam beradi.

Yig'ishni tezlashtirish uchun konfiguratsiyani optimallashtirish

Sekin yig'ish — bundlerlar bilan ishlashdagi asosiy muammolardan biri. Tezlashtirish uchun modul transformatsiyalari natijalarini ishga tushirishlar orasida saqlaydigan persistent caching dan foydalaning. Webpack 5 cache: { type: 'filesystem' } orqali fayl keshlashni qo'llab-quvvatlaydi, Vite oldindan boglash uchun esbuild-dan foydalanadi, Metro esa RAM-dagi modul keshlashga tayanadi. Qo'shimcha ravishda, tayyor paketlarni qayta ishlamaslik uchun loaderlarda node_modules uchun exclude ni o'rnating.

Kod bo'linishi strategiyasini tanlash

Code splitting — boglashni talab bo'yicha yuklanadigan qismlarga bo'lish. Turli bundlerlar bu strategiyani o'ziga xos tarzda amalga oshiradi. Webpack har bir modul uchun alohida qismlar yaratadigan dinamik import import()-ni qo'llab-quvvatlaydi. Metro kechiktirilgan yuklash uchun inline requires dan foydalanadi. Vite qo'shimcha konfiguratsiyasiz vendor qismlari va dinamik importlarni avtomatik ravishda ajratadi. Strategiya tanlash loyiha talablariga bog'liq: mobil ilovalar uchun kechiktirilgan yuklash bilan kichikroq boshlang'ich boglashlar afzalroqdir.

Code splitting ning React Native-da to'g'ri ishlashi uchun qo'shimcha sozlash talab qilinadi: Metro inlineRequires orqali asinxron qismlar bilan ishlash uchun sozlanishi kerak. Webpack va Vite-da code splitting dinamik import() sintaksisidan foydalanilganda qutidan tashqarida ishlaydi va avtomatik ravishda bo'linish nuqtalarini yaratadi. Maksimal samaradorlik uchun code splitting-ni muhim qismlar uchun <link rel="preload"> orqali preload maslahatlari bilan birlashtiring.