Bundler — یہ کیا ہے، کتنی اقسام ہیں اور کام کرنے کا اصول

Bundler کیا ہے؟

Bundler (ماڈیول بنڈلر) ایک کمانڈ لائن ٹول ہے جو انٹری پوائنٹ — ایپلیکیشن کی مرکزی فائل — لیتا ہے اور ایک ماڈیول گراف بنا کر اس کے تمام انحصار کو بار بار تلاش کرتا ہے۔ آؤٹ پٹ پر، بنڈلر ایک یا زیادہ فائلیں جنریٹ کرتا ہے جنہیں HTML صفحہ میں شامل کیا جا سکتا ہے یا موبائل ایپلیکیشن میں چلایا جا سکتا ہے۔

جدید ڈیولپمنٹ میں بنڈلر کیوں ضروری ہے

براؤزر طویل عرصے تک پلیٹ فارم کی سطح پر JavaScript ماڈیول سسٹم کو سپورٹ نہیں کرتے تھے۔ Bundler نے سینکڑوں import اور require کو ایک فائل میں تبدیل کرکے یہ مسئلہ حل کیا۔ آج، براؤزرز میں ES ماڈیولز کی نیٹو سپورٹ کے باوجود، بنڈلر اضافی کام انجام دیتے ہیں: JSX اور TypeScript کا ٹرانسپائل، کوڈ کا منیفکیشن، سست لوڈنگ کے لیے کوڈ سپلٹنگ اور ڈیولپمنٹ تیز کرنے کے لیے ہاٹ ماڈیول ریپلیسمنٹ (HMR)۔

موبائل ڈیولپمنٹ میں، React Native ڈیفالٹ بنڈلر کے طور پر Metro استعمال کرتا ہے، جبکہ Flutter Dart پر مبنی اپنا بلڈ سسٹم استعمال کرتا ہے۔ بنڈلر کا انتخاب براہ راست ڈیولپمنٹ کی رفتار، ایپلیکیشن کے سائز اور رن ٹائم کارکردگی کو متاثر کرتا ہے۔

بنڈلنگ کیسے کام کرتی ہے؟

بنڈلنگ کئی مراحل سے گزرتی ہے: انپٹ فائلوں کا تجزیہ، انحصار گراف کی تعمیر، ماڈیولز کی تبدیلی اور آؤٹ پٹ فائلوں کی تخلیق۔ ہر مرحلے پر، بنڈلر سورس کوڈ کو تبدیل کرنے کے لیے لوڈرز اور اصلاح کے لیے پلگ انز لگاتا ہے۔

تجزیہ اور انحصار گراف کا مرحلہ

بنڈلر انٹری پوائنٹ سے شروع ہوتا ہے، فائل پڑھتا ہے اور ایک AST (خلاصہ نحوی درخت) بناتا ہے۔ AST سے تمام import اور require اسٹیٹمنٹس نکالے جاتے ہیں۔ ہر ملنے والے import کے لیے، بنڈلر اس عمل کو بار بار دہراتا ہے جب تک کہ تمام انحصار ایک گراف میں جمع نہ ہو جائیں۔

// ایک بنڈلر کا آسان نفاذ
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)] };
}

گراف بنانے کے بعد، بنڈلر لوڈرز لگاتا ہے — تبدیلیاں جو فائلوں کو JavaScript میں تبدیل کرتی ہیں: TypeScript → JS، SCSS → CSS، JSX → JSX فنکشنز۔ پھر پلگ انز اضافی تبدیلیاں انجام دیتے ہیں: منیفکیشن، امیج ان لائننگ، سروس ورکر جنریشن۔

بنڈلرز کی اہم اقسام

بنڈلرز تین نسلوں میں تقسیم ہوتے ہیں: کلاسک، خصوصی اور ES ماڈیولز پر مبنی نئی نسل۔ ہر قسم کا اپنا فن تعمیر اور اطلاق کا میدان ہے۔

کلاسک بنڈلرز

Webpack سب سے وسیع بنڈلر ہے جس کا بہت بڑا ماحولیاتی نظام ہے۔ اس کا اہم فائدہ لچک ہے: ہزاروں لوڈرز اور پلگ انز تقریباً کسی بھی بلڈ منظرنامے کو کور کرتے ہیں۔ Parcel زیرو کنفیگ طریقہ پیش کرتا ہے، فائل ایکسٹینشن کی بنیاد پر ضروری تبدیلیوں کو خود بخود پہچانتا ہے۔ دونوں بنڈلر کوڈ سپلٹنگ اور HMR کو سپورٹ کرتے ہیں۔

خصوصی بنڈلرز

Metro خاص طور پر React Native کے لیے بنایا گیا ہے اور صرف JavaScript اور TypeScript کے ساتھ کام کرتا ہے۔ اس کا فن تعمیر موبائل ڈیولپمنٹ کے لیے بہتر بنایا گیا ہے: ان لائن ریکوائرز، ماڈیولز کی غیر ہم آہنگ لوڈنگ اور Hermes انجن کے ساتھ انضمام۔ Rollup لائبریریوں اور npm پیکجز پر مرکوز ہے، غیر ضروری ریپرز کے بغیر صاف ES ماڈیول آؤٹ پٹ جنریٹ کرتا ہے۔

Webpack، Metro اور Vite کا موازنہ

بنڈلر کا انتخاب پلیٹ فارم اور پروجیکٹ کی ضروریات پر منحصر ہے۔ Webpack ہمہ گیر ہے لیکن تفصیلی ترتیب درکار ہے۔ Metro React Native کے لیے واحد آپشن ہے۔ Vite نیٹو ES ماڈیولز کی بدولت تیز ترین ڈیولپمنٹ تجربہ فراہم کرتا ہے۔

Vite انحصار کی پری بنڈلنگ کے لیے esbuild اور پروڈکشن بلڈ کے لیے Rollup استعمال کرتا ہے، جو ڈیولپمنٹ موڈ میں Webpack کے مقابلے میں 5–10 گنا رفتار بہتری فراہم کرتا ہے۔ Metro ویب اہداف کو سپورٹ نہیں کرتا لیکن React Native برج اور Turbo Modules کے ساتھ ہموار انضمام فراہم کرتا ہے۔

پروجیکٹ میں بنڈلر کی ترتیب

ترتیب اس بات کا تعین کرتی ہے کہ مختلف فائل کی اقسام کو کیسے پروسیس کیا جاتا ہے، بلڈ کہاں جنریٹ ہوتی ہے اور کون سی اصلاحات لگائی جاتی ہیں۔ ایک عام ترتیب فائل میں انٹری پوائنٹ، ماڈیول کے قواعد، پلگ انز اور آؤٹ پٹ سیٹنگز شامل ہوتی ہیں۔

React Native ویب پروجیکٹ کے لیے Webpack ترتیب کی مثال

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 ترتیب کے لیے علیحدہ فائلیں metro.config.js اور babel.config.js استعمال کرتا ہے۔ Webpack کے برعکس، Metro کی ترتیب کافی آسان ہے کیونکہ بنڈلر React Native کے لیے مخصوص ہے اور اسٹائل یا امیجز کے لیے لوڈرز ترتیب دینے کی ضرورت نہیں۔

عام بلڈ غلطیاں

تجربہ کار ڈیولپرز بھی بنڈلنگ غلطیوں کا سامنا کرتے ہیں۔ Duplicate module سب سے عام مسائل میں سے ایک ہے، جب package.json میں ورژن کی عدم مطابقت کی وجہ سے ایک ہی انحصار بنڈل میں کئی بار آتا ہے۔ Module not found اس وقت ہوتا ہے جب import کا راستہ غلط ہو یا پیکج انسٹال نہ ہو۔

Metro کے لیے مخصوص غلطیاں

Metro موبائل آلات کے لیے بنڈل سائز کی حد رکھتا ہے۔ جب 2–5 MB کی حد سے تجاوز ہو جاتا ہے، تو ڈیوائس پر میموری کی کمی کی وجہ سے Unable to resolve module کی غلطی ہوتی ہے۔ حل — ماڈیولز کی سست لوڈنگ کے لیے inline requires اور RAM bundles کا استعمال۔ Metro symlinks کے لیے بھی حساس ہے، اس لیے مونو ریپو میں ترتیب میں اضافی watchFolders کی ضرورت ہوتی ہے۔

Webpack کے لیے ایک عام مسئلہ Module parse failed ہے، جو اس وقت ہوتا ہے جب فائل کی غیر متوقع شکل ہو یا ضروری لوڈر غائب ہو۔ فائل ایکسٹینشن چیک کرنا اور module.rules میں مناسب قاعدہ شامل کرنا مسئلہ حل کرتا ہے۔ source-map-explorer کا استعمال فائنل بنڈل میں نقل شدہ ماڈیولز اور اضافی انحصار تلاش کرنے میں مدد کرتا ہے۔

بلڈ تیز کرنے کے لیے ترتیب کی اصلاح

سست بلڈ بنڈلرز کے ساتھ کام کرتے وقت اہم مسائل میں سے ایک ہے۔ تیز کرنے کے لیے مستقل کیشنگ استعمال کریں، جو رنز کے درمیان ماڈیول تبدیلی کے نتائج محفوظ کرتی ہے۔ Webpack 5 cache: { type: 'filesystem' } کے ذریعے فائل کیشنگ کو سپورٹ کرتا ہے، Vite پری بنڈلنگ کے لیے esbuild استعمال کرتا ہے، اور Metro میموری ماڈیول کیش پر انحصار کرتا ہے۔ اضافی طور پر، لوڈرز میں node_modules کے لیے exclude بتائیں تاکہ پہلے سے تیار پیکجز کو دوبارہ پروسیس نہ کرنا پڑے۔

کوڈ سپلٹنگ کی حکمت عملی کا انتخاب

کوڈ سپلٹنگ بنڈل کو ٹکڑوں میں تقسیم کرتی ہے جو ضرورت پر لوڈ ہوتے ہیں۔ مختلف بنڈلرز اس حکمت عملی کو مختلف طریقے سے لاگو کرتے ہیں۔ Webpack ڈائنامک import import() کو سپورٹ کرتا ہے، جو ہر ماڈیول کے لیے علیحدہ ٹکڑے بناتا ہے۔ Metro تاخیری لوڈنگ کے لیے inline requires استعمال کرتا ہے۔ Vite اضافی ترتیب کے بغار خود بخود وینڈر چنکس اور ڈائنامک imports کو تقسیم کرتا ہے۔ حکمت عملی کا انتخاب پروجیکٹ کی ضروریات پر منحصر ہے: موبائل ایپلیکیشنز کے لیے تاخیری لوڈنگ کے ساتھ چھوٹے ابتدائی بنڈل ترجیح دی جاتے ہیں۔

React Native میں کوڈ سپلٹنگ کے درست کام کرنے کے لیے اضافی ترتیب درکار ہے: Metro کو inlineRequires کے ذریعے غیر ہم آہنگ ٹکڑوں کے لیے ترتیب دینا چاہیے۔ Webpack اور Vite میں، ڈائنامک import() نحو استعمال کرنے پر کوڈ سپلٹنگ ڈیفالٹ طور پر کام کرتی ہے، جو خود بخود تقسیم کے پوائنٹس بناتا ہے۔ زیادہ سے زیادہ کارکردگی کے لیے، اہم ٹکڑوں کے لیے <link rel="preload"> کے ذریعے کوڈ سپلٹنگ کو پری لوڈ اشاروں کے ساتھ ملائیں۔