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