JavaScript Bundling-এর ব্যাখ্যা
আপনি অনেকগুলো ফাইল ব্যবহার করে React বা Angular অ্যাপ তৈরি করেন। আপনি components, services এবং libraries ব্যবহার করেন।
অনেকগুলো ফাইল নিয়ে ব্রাউজার কাজ করতে হিমশিম খায়। ২০০টি ফাইল লোড করার অর্থ হলো ২০০টি network request। এটি আপনার অ্যাপকে ধীরগতির করে তোলে।
Bundlers এই সমস্যার সমাধান করে। তারা আপনার কোড এবং imports গুলো নিয়ে সেগুলোকে একটি বা কয়েকটি ছোট ফাইলে একত্রিত করে। এটি লোডিং প্রক্রিয়াকে দক্ষ করে তোলে।
আধুনিক bundlers শুধু ফাইল একত্রিত করার কাজই করে না। তারা নিচের কাজগুলোও সম্পন্ন করে:
- Minification: তারা স্পেস এবং কমেন্ট সরিয়ে ফেলে। জায়গা বাঁচাতে তারা variable নাম ছোট করে দেয়।
- Tree shaking: তারা আপনার অব্যবহৃত কোড সরিয়ে ফেলে।
- Code splitting: তারা কোডকে ছোট ছোট অংশে (chunks) ভাগ করে। ব্যবহারকারীরা শুধুমাত্র তাদের প্রয়োজনীয় অংশটুকুই লোড করে।
ছোট ফাইল মানেই দ্রুতগতির অ্যাপ।
প্রধানত দুটি টুল রয়েছে: Webpack এবং Vite।
Webpack আপনার পুরো অ্যাপটি সার্ভ করার আগে bundle করে। এটি অত্যন্ত শক্তিশালী এবং নমনীয় (flexible)। বড় প্রজেক্টের ক্ষেত্রে এটি ধীরগতির মনে হতে পারে কারণ পরিবর্তনের সময় এটি সবকিছু পুনরায় bundle করে।
Vite একটি আধুনিক পছন্দ। এটি development চলাকালীন native ES modules ব্যবহার করে সরাসরি ফাইল সার্ভ করে। এটি শুধুমাত্র আপনার পরিবর্তন করা ফাইলটি আপডেট করে। এর ফলে আপডেটগুলো তাৎক্ষণিক হয়।
তুলনা:
Webpack:
- Dev speed: ধীরগতির
- Config: জটিল
- Best for: বড় legacy প্রজেক্ট
Vite:
- Dev speed: দ্রুত
- Config: সহজ
- Best for: নতুন আধুনিক প্রজেক্ট
নতুন প্রজেক্টের জন্য Vite ব্যবহার করুন।
প্রতিটি bundler তিনটি ধাপ অনুসরণ করে:
- Build a dependency graph: Bundler ফাইলগুলো একে অপরের সাথে কীভাবে যুক্ত তা ম্যাপ করে।
- Transform code: এটি TypeScript বা JSX-কে সাধারণ JavaScript-এ রূপান্তর করে।
- Output the bundle: এটি deployment-এর জন্য চূড়ান্ত ফাইলগুলো একটি ফোল্ডারে লিখে রাখে।
এই টিপসগুলো অনুসরণ করে আপনার bundle-কে হালকা (lean) রাখুন:
- Lazy loading: ব্যবহারকারীর প্রয়োজন হলেই কেবল components লোড করুন।
- Specific imports: পুরো library ইমপোর্ট করবেন না। শুধুমাত্র আপনার ব্যবহৃত নির্দিষ্ট function গুলো ইমপোর্ট করুন।
- Analyze your bundle: কোন ফাইলগুলো সবচেয়ে বেশি জায়গা দখল করছে তা দেখতে টুল ব্যবহার করুন।
- Use production builds: সবসময় development build-এর পরিবর্তে production build deploy করুন।
Bundlers কম এবং ছোট ফাইল প্রদানের মাধ্যমে আপনার অ্যাপকে দ্রুততর করে তোলে।
উৎস: https://dev.to/kavya1205/javascript-bundling-explained-from-zero-to-optimised-f7p