JavaScript Bundling-এর ব্যাখ্যা
আপনি অনেকগুলো ফাইল ব্যবহার করে React বা Angular অ্যাপ তৈরি করেন। আপনার কম্পোনেন্ট (components), সার্ভিস (services) এবং লাইব্রেরি (libraries) থাকে। এই সুসংগঠিত পদ্ধতি আপনাকে সাহায্য করে।
ব্রাউজার আপনার ফোল্ডার নিয়ে মাথা ঘামায় না। আপনি যদি ২০০টি ফাইল লোড করেন, তবে ব্রাউজার ২০০টি নেটওয়ার্ক রিকোয়েস্ট পাঠায়। এটি আপনার অ্যাপকে ধীরগতির করে তোলে।
Bundler এই সমস্যার সমাধান করে। একটি bundler আপনার কোড, ইমপোর্ট (imports) এবং মডিউলগুলো (modules) গ্রহণ করে। এটি সেগুলোকে একটি বা কয়েকটি ছোট ফাইলে একত্রিত করে। এটি লোডিং প্রক্রিয়াকে আরও দক্ষ করে তোলে।
আধুনিক bundler-গুলো শুধু ফাইল একত্রিত করার চেয়েও বেশি কিছু করে:
• Minification: এটি অতিরিক্ত স্পেস এবং কমেন্ট সরিয়ে ফেলে। ফাইল ছোট করার জন্য এটি ভেরিয়েবল (variable) নাম ছোট করে দেয়। • Tree shaking: এটি আপনার অব্যবহৃত কোড সরিয়ে ফেলে। এটি লাইব্রেরি থেকে অব্যবহৃত ফাংশনগুলো বাদ দিয়ে দেয়। • Code splitting: এটি কোডকে ছোট ছোট অংশে (chunks) বিভক্ত করে। ব্রাউজার শুধুমাত্র সেই অংশটুকুই লোড করে যা ব্যবহারকারীর এই মুহূর্তে প্রয়োজন।
ছোট ফাইল মানেই দ্রুতগতির অ্যাপ।
প্রধানত দুটি টুল রয়েছে: Webpack এবং Vite।
Webpack আপনার পুরো অ্যাপটি সার্ভ করার আগে সেটিকে bundle করে। এটি বড় লেগাসি (legacy) প্রজেক্টের জন্য ভালো কাজ করে। এটি নমনীয় (flexible) কিন্তু বড় প্রজেক্টে এটি ধীরগতির মনে হতে পারে।
Vite হলো আধুনিক পছন্দ। ডেভেলপমেন্টের সময় এটি সরাসরি ফাইল সার্ভ করে। আপনি যে ফাইলটি পরিবর্তন করেন, এটি শুধুমাত্র সেটিই আপডেট করে। এর ফলে আপডেটগুলো তাৎক্ষণিক হয়। প্রোডাকশনের (production) জন্য, Vite দ্রুত বান্ডেল তৈরি করতে Rollup ব্যবহার করে।
তুলনা:
Webpack:
- ডেভেলপমেন্ট স্পিড: ধীরগতির
- কনফিগারেশন: জটিল
- সেরা ব্যবহারের ক্ষেত্র: বড় লেগাসি প্রজেক্ট
Vite:
- ডেভেলপমেন্ট স্পিড: দ্রুত
- কনফিগারেশন: সহজ
- সেরা ব্যবহারের ক্ষেত্র: নতুন আধুনিক প্রজেক্ট
নতুন প্রজেক্টের জন্য Vite ব্যবহার করুন।
প্রতিটি bundler তিনটি ধাপ অনুসরণ করে:
- একটি dependency graph তৈরি করা: এটি প্রতিটি ফাইল কীভাবে একে অপরের সাথে যুক্ত তা ম্যাপ করে।
- কোড ট্রান্সফর্ম করা: এটি TypeScript বা JSX-কে সাধারণ JavaScript-এ রূপান্তর করে।
- বান্ডেল আউটপুট দেওয়া: এটি সবকিছুকে একত্রিত এবং minify করে ডেপ্লয়মেন্টের (deployment) জন্য একটি ফোল্ডারে রাখে।
এই ধাপগুলো অনুসরণ করে আপনার বান্ডেলকে হালকা (lean) রাখুন:
• Lazy loading: ব্যবহারকারী যখন কোনো কম্পোনেন্টে যান, কেবল তখনই সেটি লোড করুন। • Partial imports: পুরো লাইব্রেরি ইমপোর্ট করবেন না। আপনার প্রয়োজনীয় নির্দিষ্ট ফাংশনটিই ইমপোর্ট করুন। • Analyze: আপনার বান্ডেলে কোন জিনিসটি বেশি জায়গা দখল করছে তা দেখতে টুল ব্যবহার করুন। • Production builds: সবসময় প্রোডাকশন বিল্ড ডেপ্লয় করুন। ডেভেলপমেন্ট বিল্ড অনেক বড় হয়।
Bundling ব্রাউজারকে কম এবং ছোট ফাইল প্রদান করার মাধ্যমে আপনার অ্যাপের পারফরম্যান্স উন্নত করে।
উৎস: https://dev.to/kavya1205/javascript-bundling-explained-from-zero-to-optimised-f7p