Bundler — bu nədir, hansı növləri var və iş prinsipi

Bundler nədir?

Bundler (modul yığıcı) — giriş nöqtəsini (entry point) — tətbiqin əsas faylını — qəbul edən və onun bütün asılılıqlarını rekursiv şəkildə gəzərək modul qrafiki quran komanda sətri alətidir. Çıxışda bundler HTML səhifəsinə qoşula və ya mobil tətbiqdə işlədilə bilən bir və ya bir neçə fayl yaradır.

Müasir inkişafda bundler niyə lazımdır

Brauzerlər uzun müddət platforma səviyyəsində JavaScript modul sistemini dəstəkləmirdi. Bundler bu problemi həll edərək yüzlərlə import və require-i vahid fayla çevirirdi. Bu gün, brauzerlərdə yerli ES modul dəstəyi olsa belə, bundlerlər əlavə tapşırıqlar yerinə yetirir: transpilasiya JSX və TypeScript, minifikasiya kod, code splitting gec yükləmə üçün və hot module replacement (HMR) inkişafı sürətləndirmək üçün.

Mobil tətbiq inkişafında React Native standart bundler kimi Metro-dan istifadə edir, Flutter isə Dart əsaslı öz yığma sistemindən istifadə edir. Bundler seçimi birbaşa inkişaf sürətinə, tətbiq ölçüsünə və iş vaxtı performansına təsir edir.

Bundle necə işləyir?

Bundle etmə bir neçə mərhələdən keçir: giriş fayllarının parsellənməsi, asılılıq qrafikinin qurulması, modulların çevrilməsi və çıxış fayllarının yaradılması. Hər mərhələdə bundler mənbə kodunu çevirmək üçün loader-lər və optimallaşdırma üçün plaginlər tətbiq edir.

Parselləmə mərhələsi və asılılıq qrafiki

Bundler giriş nöqtəsindən başlayır, faylı oxuyur və AST (abstrakt sintaksis ağacı) qurur. AST-dən bütün import və require operatorları çıxarılır. Tapılan hər import üçün bundler prosesi rekursiv şəkildə təkrarlayır, ta ki bütün asılılıqlar vahid qrafikdə toplanana qədər.

// Bundlerin sadələşdirilmiş tətbiqi
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)] };
}

Qrafik qurulduqdan sonra bundler loader-lər tətbiq edir — faylları JavaScript-ə çevirən transformasiyalar: TypeScript → JS, SCSS → CSS, JSX → JSX-funksiyaları. Sonra plaginlər əlavə çevrilmələr həyata keçirir: minifikasiya, şəkillərin inline edilməsi, service worker yaradılması.

Bundlerlərin əsas növləri

Bundlerlər üç nəslə bölünür: klassik, ixtisaslaşdırılmış və ES modulları əsasında yeni nəsil. Hər tip öz arxitekturasına və tətbiq sahəsinə malikdir.

Klassik bundlerlər

Webpack — nəhəng ekosistemə malik ən geniş yayılmış bundler. Onun əsas üstünlüyü çeviklikdir: minlərlə loader və plagin demək olar ki, hər yığma ssenarisini əhatə edir. Parcel fayl uzantıları əsasında lazımi transformasiyaları avtomatik təyin edən zero-config yanaşması təklif edir. Hər iki bundler code splitting və HMR dəstəkləyir.

İxtisaslaşdırılmış bundlerlər

Metro xüsusi olaraq React Native üçün yaradılmışdır və yalnız JavaScript və TypeScript ilə işləyir. Onun arxitekturası mobil inkişaf üçün optimallaşdırılmışdır: inline requires dəstəyi, modulların asinxron yüklənməsi və Hermes engine ilə inteqrasiya. Rollup kitabxanalar və npm paketləri üçün nəzərdə tutulmuşdur, lazımsız bükücü olmadan təmiz ES modul çıxışı yaradır.

Webpack, Metro və Vite müqayisəsi

Bundler seçimi platformadan və layihə tələblərindən asılıdır. Webpack universaldır, lakin ətraflı konfiqurasiya tələb edir. Metro React Native üçün alternativsizdir. Vite yerli ES modulları sayəsində ən sürətli inkişafı təmin edir.

Vite asılılıqların ilkin bundle edilməsi üçün esbuild-dan və istehsal yığması üçün Rollup-dan istifadə edir ki, bu da inkişaf rejimində Webpack ilə müqayisədə 5–10 dəfə sürət artımı verir. Metro veb hədəfləri dəstəkləmir, lakin React Native bridge və Turbo Modules ilə problemsiz inteqrasiya təmin edir.

Layihədə bundlerin konfiqurasiyası

Konfiqurasiya bundlerin müxtəlif fayl növlərinin necə işlənəcəyini, yığmanın harada yaradılacağını və hansı optimallaşdırmaların tətbiq olunacağını müəyyən edir. Tipik konfiqurasiya faylına giriş nöqtəsi, modul qaydaları, plaginlər və çıxış parametrləri daxildir.

React Native veb layihəsi üçün Webpack konfiqurasiyası nümunəsi

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 konfiqurasiya üçün ayrıca metro.config.js və babel.config.js fayllarından istifadə edir. Webpack-dən fərqli olaraq, Metro konfiqurasiyası xeyli sadədir, çünki bundler React Native üçün ixtisaslaşdırılmışdır və stillər və ya şəkillər üçün loader konfiqurasiyası tələb etmir.

Yığma zamanı tipik səhvlər

Hətta təcrübəli proqramçılar bundle səhvləri ilə qarşılaşır. Duplicate module — ən çox rast gəlinən problemlərdən biri, eyni asılılıq package.json-da versiya uyğunsuzluğu səbəbindən bundle-a bir neçə dəfə düşdükdə baş verir. Module not found import yolu səhv göstərildikdə və ya paket quraşdırılmadıqda yaranır.

Metro üçün xas səhvlər

Metro mobil cihazlar üçün bundle ölçüləri ilə məhdudlaşır. 2–5 MB həddi aşıldıqda, cihazda yaddaş çatışmazlığı səbəbindən Unable to resolve module xətası yaranır. Həll yolu — modulların gec yüklənməsi üçün inline requires və RAM bundles istifadə edin. Metro həmçinin simlinklərə həssasdır, buna görə monorepozitoriyalar üçün konfiqurasiyada əlavə watchFolders parametri tələb olunur.

Webpack üçün tipik problem — Module parse failed, fayl gözlənilməz formata malik olduqda və ya lazımi loader olmadıqda baş verir. Fayl uzantısını yoxlamaq və module.rules-da müvafiq qayda əlavə etmək problemi həll edir. source-map-explorer istifadə etmək son bundle-da təkrarlanan modulları və artıq asılılıqları tapmağa kömək edir.

Yığmanı sürətləndirmək üçün konfiqurasiya optimallaşdırması

Yavaş yığma — bundlerlərlə işləyərkən əsas problemlərdən biridir. Sürətləndirmək üçün modul transformasiya nəticələrini işə salmalar arasında saxlayan persistent caching istifadə edin. Webpack 5 cache: { type: 'filesystem' } vasitəsilə fayl keşini dəstəkləyir, Vite ilkin bundle üçün esbuild-dan istifadə edir, Metro isə RAM-da modul keşinə əsaslanır. Əlavə olaraq, artıq hazır paketləri təkrar emal etməmək üçün loader-lərdə node_modules üçün exclude təyin edin.

Kod bölgüsü strategiyasının seçilməsi

Code splitting — bundle-ın tələb əsasında yüklənən hissələrə bölünməsi. Müxtəlif bundlerlər bu strategiyanı özünəməxsus şəkildə həyata keçirir. Webpack hər modul üçün ayrıca hissələr yaradan dinamik import import()-u dəstəkləyir. Metro gec yükləmə üçün inline requires istifadə edir. Vite əlavə konfiqurasiya olmadan vendor hissələrini və dinamik importları avtomatik bölür. Strategiya seçimi layihə tələblərindən asılıdır: mobil tətbiqlər üçün gec yükləmə ilə daha kiçik ilkin bundle-lar üstünlük təşkil edir.

Code splitting-in React Native-də düzgün işləməsi üçün əlavə konfiqurasiya tələb olunur: Metro inlineRequires vasitəsilə asinxron hissələrlə işləmək üçün konfiqurasiya edilməlidir. Webpack və Vite-də code splitting dinamik import() sintaksisindən istifadə edərək qutudan çıxan kimi işləyir, avtomatik olaraq bölmə nöqtələri yaradır. Maksimum effektivlik üçün code splitting-i kritik hissələr üçün <link rel="preload"> vasitəsilə preload ipuçları ilə birləşdirin.