আপনি কী জানেন ইন্টারনেটে প্রতি এক সেকেন্ডে কী ঘটে? একটা করে নতুন জাভাস্ক্রিপ্ট লাইব্রেরী/ফ্রেমওয়ার্ক Release হয়, হা হা।
আজকের লেখার বিষয়বস্ত Vite তেমন কোডিং Architecture/Pattern সম্পর্কিত কোন library নয়, যা আয়ত্ব করতে আপনার বেগ পেতে হবে। এটাকে React/Vue/Vanilla JS সাইটের সাথে Integrate করে আপনার Front End Development গতি তুলনামূলক বারিয়ে নিতে পারেন। কয়েকটা ধাপে এটা Speed Optimize করে। সেসব নিয়েই এই লিখা, সাথে থাকছে সামান্য একটু How to.
Table of Contents
# Vite JS কী?
# প্রজেক্ট Create করা।
# রান করে দেখা
# Speed এর পেছনের গল্প
# Features of ViteJS
# শেষ কথা
🟡 Vite JS কী?
Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects. - - vitejs.dev/guide/
Vite (ভিট) প্রাথমিক ভাবে একটি Front End Development Tool হলেও এর Creator Evan You( Who also created Vue JS) এখনও একটি সুন্দর গঠনমুলক পরিভাষা খোজবার চেষ্টা করছেন। কারণ Front End Development Tool এই Term দিয়ে বোঝানে যায় না ViteJS আসলে কী।
আপনারা জানেন যে কম বেশি প্রায় সব Browser গুলো এখন Native ES Module System সমর্থন করা শুরু করেছে। যেমন এই Syntax টা,
// addTwo.mjs
function addTwo(num) {
return num + 2;
}
export { addTwo };
// app.mjs
import { addTwo } from './addTwo.mjs';
// Prints: 6
console.log(addTwo(4));
এভাবে Dependency import করা যেমন সহজ তেমনি এর একটা বিশেষ গুন কে কাজে লাগিয়ে Vite তৈরী করা আইডিয়া পান। (ভিট) ফ্রেঞ্চ ভাষায় যার অর্থ ‘দ্রুত‘।
Intro নিয়ে বেশী কথা বলতে চাইনা চলুন এক ঝলক কাজ দেখে নেওয়া যাক, এর পরে Awesome সব Feature গুলো, নিয়ে কথা হবে কেন এটিকে নির্মাতা Next Generation Tool হিসেবে মনে করছেন।
🔥🔥 ১. প্রজেক্ট Create করা।
আমরা যারা React নিয়ে কাজ করি তারা জানি Globally Install করা না থাকলে npx create-react-app কী পরিমাণ সময় ব্যয় হয় একটা প্রজেক্ট Create করতে । এরপর npm install সেখানেও আবার চলে যায় আরও কিছু সময়। টুকরো টুকরো Node Dependency গুলো Download যেন শেষ হতেই চায় না। কিন্তু vitejs দিয়ে একটি React Project Create করে রান করা সামন্য কিছু সময়ের ব্যপার মাত্র।
NPM যদি Install করা থাকে তাহলে Terminal On করে শুধু লিখতে হবে,
npm init @vitejs/app
এখন Vite আপনাকে কিছু প্রশ্ন করবে,
- Project এর নাম
- Framework এর নাম React, Vue নাকি Vanilla?
- সেটা কী TypeScript নাকি JavaScript
ব্যাস Project Create Complete :D
🔥🔥 ২. রান করে দেখাঃ
প্রথমত নতুন Project এ cd করে নিন। তারপর node module গুলো install করে নিতে হব
cd vite-tutorial
npm install
প্রজেক্ট Create তো দ্রুত গতিতে হয়েইছে, Vite এর মধ্য দিয়ে দেখবেন node module গুলা অদ্ভুৎ রকম দ্রুত গতিতে Install হয়ে যাবে, কারণ আছে Feature Chapter এ কথা হবে।
এরপর রান করে দেখি,
npm run dev
সার্ভার Start হতে যথেষ্ট কম সময় লাগে। কোন ফাইল Edit করে Save করে দেখুন। Refresh Time ও অনেক ফাস্ট হচ্ছে Native Es
Module হওয়ার কারনে।
🔥🔥 ৩. Speed এর পেছনের গল্পঃ
প্রথমত Project Create দ্রুত হয়েছে এর জন্য তেমন বিশেষ কোন কারণ নেই Vite দরকারী File গুলো অনলাইন থেকে Readymate Template Download করে নিয়ে আপনাকে একটি Project করে দিয়েছে মাত্র।
এরপর (npm install) node module গুলো দ্রুত হচ্ছে এর জন্য vitejs esbuild ব্যবহার করে তাদের optimize করা লাইব্রেরী গুলো আাপনাকে দিয়েছে। যার node module size near by 18MB Only
এরপর npm run dev এর মাধ্যমে Server অনেক দ্রুত চালু হয়েছে। কারণ Vite আপনার Module গুলো প্রথাগত ভাবে প্রথমে Webpack/Bundler দিয়ে build করে তারপর Browser কে Serve করার যে বিষয়টা, import export কে common js এর require export module এ convert না করেই Server রান করিয়ে দিয়েছে। যেন import export সুবিধা গুলো আপনি Browser থেকেই পান।
এরপর Code edit করে Save করায় Refresh দ্রুত হচ্ছে কারণ vite শুধু coding এর যে অংশটুকু/ফাইলটুকু change হয়েছে, সেইটুকু code cache invalidate করে দিচ্ছে এতে যেটা হয় যে (Network Tab চালু করেও দেখতে পারেন। Browser শুধু মাত্র invalidate হওয়া ফাইল টা নতুন করে load করবে। বাকি সব cache থেকেই নিয়ে নেবে যেটা chagne হয় নি।
🔥🔥 ৪. Features of ViteJS
- 💡 Instant Server Start
- এতক্ষণের আলোচনায় আশা করছি ধাপ ৩ থেকে বুঝতে পারছেন কেন Instant
- On demand file serving over native ESM, no bundling required!
- ⚡️ Lightning Fast HMR
- Hot Module Replacement (HMR) that stays fast regardless of app size.
- 🛠️ Rich Features
- Out-of-the-box support for TypeScript, JSX, CSS and more.
- 📦 Optimized Build
- Pre-configured Rollup build with multi-page and library mode support.
- 🔩 Universal Plugins
- Rollup-superset plugin interface shared between dev and build.
- 🔑 Fully Typed APIs
- Flexible programmatic APIs with full TypeScript typing.
🔥🔥 ৫. শেষ কথাঃ
ViteJS দিয়ে Front End Deveopment Test যেটুকু করেছি বেশ ভালোই লেগেছে। তাই যেটুকু জানলাম সেটুকু লিখলাম। তবে ViteJS নিয়ে Full Project আমি নিজেও করি নি। তাই Development টাইমে frequently bugs & challenge face করার সম্ভবনা আছে। আমার আমি যেটা জানাতে চাচ্ছিলাম যে Next Generation Development Env টা কিরকম হতে পারে। ViteJS Developemnt টাইমে Bundler দিয়ে Budnle না করলেও Build টাইমে কিন্তু ঠিকই Bundle করে দেবে। আশার বানি তারা development টাইমে এই Optimization, Caching, HMR, Backend এও পরীক্ষামূলক ভাবে নিয়ে এসেছে যা express js এ middleware এর মাধ্যমে implement করা যায়।
আরও জানতে তাদের Official সাইট/Doc Visit করতে পারেন।
ধন্যবাদ।