Vite-কে সহজভাবে বোঝা
Webpack বা CRA-এর মতো পুরনো টুলগুলো প্রথমে আপনার পুরো প্রজেক্টকে বান্ডেল (bundle) করে কাজ করে। তারা প্রতিটি ফাইল পড়ে এবং সেগুলোকে একটি বড় JavaScript ফাইলে একত্রিত করে। এটি ছোট প্রজেক্টের জন্য কার্যকর। কিন্তু হাজার হাজার মডিউল বিশিষ্ট বড় প্রজেক্টের ক্ষেত্রে এটি ব্যর্থ হয়। বড় বান্ডেল তৈরি করতে কয়েক সেকেন্ড বা মিনিট সময় লাগে। প্রতিবার যখন আপনি একটি ফাইল সেভ করেন, টুলটি বান্ডেলের বড় অংশ পুনরায় তৈরি (rebuild) করে।
Vite ভিন্নভাবে কাজ করে। আধুনিক ব্রাউজারগুলো নেটিভলি (natively) ES modules সাপোর্ট করে। Vite ডেভেলপমেন্টের সময় আপনার কোডকে বান্ডেল করে না। ব্রাউজার যখন কোনো ফাইলের জন্য অনুরোধ করে, তখনই এটি প্রতিটি ফাইলকে একটি আলাদা মডিউল হিসেবে সার্ভ করে।
একটি বুফে (buffet) রেস্টুরেন্টের কথা ভাবুন। রেস্টুরেন্টের দরজা খোলার আগেই শেফ প্রতিটি পদ রান্না করে রাখেন। আপনি যদি সামান্য কোনো পরিবর্তন চান, তবে শেফকে প্রায় পুরো বুফেটিই আবার নতুন করে তৈরি করতে হয়। আপনাকে খাবারের জন্য দীর্ঘ সময় অপেক্ষা করতে হয়। Webpack ঠিক এভাবেই কাজ করে।
এবার একটি আ লা কার্ট (à la carte) রেস্টুরেন্টের কথা ভাবুন। দরজা খোলার সাথে সাথেই আপনি অর্ডার দিতে পারেন। আপনি একটি পদের অর্ডার দিলেন, শেফ শুধু সেই পদটিই তৈরি করবেন। আপনি যদি পরে ডেজার্ট চান, শেফ শুধু ডেজার্টটিই তৈরি করবেন। আপনাকে পুরো মেনু রান্না হওয়া পর্যন্ত অপেক্ষা করতে হয় না। Vite ঠিক এভাবেই কাজ করে।
Vite দুটি ভিন্ন প্রয়োজনে দুটি ভিন্ন কৌশল ব্যবহার করে:
Development (vite dev)
- কৌশল: বান্ডেল না করেই নেটিভ ESM মডিউল সার্ভ করে।
- গতি: তাৎক্ষণিক। এটি প্রজেক্টের আকারের ওপর নির্ভর করে না।
- কেন: লোকাল নেটওয়ার্ক রিকোয়েস্টগুলো দ্রুত হয়।
Production (vite build)
- কৌশল: Rolldown ব্যবহার করে সবকিছু বান্ডেল করে।
- গতি: প্রজেক্টের আকারের ওপর নির্ভর করে।
- কেন: শত শত আলাদা ফাইল সাধারণ ব্যবহারকারীদের জন্য অনেক বেশি HTTP রিকোয়েস্ট তৈরি করে। বান্ডেল করার ফলে চূড়ান্ত সাইটটি তাদের জন্য দ্রুততর হয়।
Vite আপনাকে কোড করার সময় গতি এবং লঞ্চ করার সময় পারফরম্যান্স প্রদান করে।