Vite-ஐ எளிமையாக்குதல்

Webpack அல்லது CRA போன்ற பழைய கருவிகள் முதலில் உங்கள் முழுத் திட்டத்தையும் (project) ஒன்றாக இணைப்பதன் (bundling) மூலம் செயல்படுகின்றன. அவை ஒவ்வொரு கோப்பையும் படித்து அவற்றை ஒரே பெரிய JavaScript கோப்பாக இணைக்கின்றன. இது சிறிய திட்டங்களுக்குச் சரியாக இருக்கும். ஆனால் ஆயிரக்கணக்கான தொகுதிகளைக் (modules) கொண்ட பெரிய திட்டங்களுக்கு இது தோல்வியடைகிறது. பெரிய பண்டில்களை (bundles) உருவாக்க வினாடிகள் அல்லது நிமிடங்கள் ஆகும். நீங்கள் ஒவ்வொரு முறையும் ஒரு கோப்பைச் சேமிக்கும்போது, அந்த கருவி பண்டிலின் பெரிய பகுதிகளை மீண்டும் உருவாக்குகிறது.

Vite வித்தியாசமாகச் செயல்படுகிறது. நவீன உலாவிகள் (browsers) ES modules-ஐ இயல்பாகவே (natively) ஆதரிக்கின்றன. Vite மேம்படுத்தும் போது (development) உங்கள் குறியீட்டை (code) பண்டில் செய்வதில்லை. உலாவியானது கோப்பைக் கேட்கும்போது மட்டுமே, அது ஒவ்வொரு கோப்பையும் ஒரு தனித் தொகுதியாக வழங்குகிறது.

ஒரு பஃபே (buffet) உணவகத்தைப் பற்றி யோசியுங்கள். உணவகத்தின் கதவுகள் திறப்பதற்கு முன்பே சமையல்காரர் ஒவ்வொரு உணவையும் சமைத்துவிடுகிறார். நீங்கள் ஒரு சிறிய மாற்றத்தை விரும்பினால், சமையல்காரர் பஃபே உணவின் பெரும்பகுதியை மீண்டும் சமைக்க வேண்டும். நீங்கள் உங்கள் உணவிற்காக நீண்ட நேரம் காத்திருக்க வேண்டும். Webpack இப்படித்தான் செயல்படுகிறது.

இப்போது ஒரு à la carte உணவகத்தைப் பற்றி யோசியுங்கள். கதவுகள் உடனடியாகத் திறக்கின்றன. நீங்கள் ஒரு உணவை ஆர்டர் செய்கிறீர்கள். சமையல்காரர் அந்த உணவை மட்டும் தயாரிக்கிறார். உங்களுக்குப் பிறகு இனிப்பு (dessert) வேண்டுமென்றால், சமையல்காரர் இனிப்பை மட்டும் தயாரிக்கிறார். முழு மெனுவும் தயாராக நீங்கள் காத்திருக்க வேண்டியதில்லை. Vite இப்படித்தான் செயல்படுகிறது.

Vite இரண்டு வெவ்வேறு தேவைகளுக்காக இரண்டு வெவ்வேறு உத்திகளைப் பயன்படுத்துகிறது:

Development (vite dev)

  • உத்தி: பண்டில் செய்யாமல் இயல்பான (native) ESM தொகுதிகளை வழங்குகிறது.
  • வேகம்: உடனடி. இது திட்டத்தின் அளவைப் பொறுத்தது அல்ல.
  • ஏன்: உள்ளூர் நெட்வொர்க் கோரிக்கைகள் (network requests) வேகமானவை.

Production (vite build)

  • உத்தி: Rolldown பயன்படுத்தி அனைத்தையும் பண்டில் செய்கிறது.
  • வேகம்: திட்டத்தின் அளவைப் பொறுத்தது.
  • ஏன்: நூற்றுக்கணக்கான தனித்தனி கோப்புகள் உண்மையான பயனர்களுக்கு அதிகப்படியான HTTP கோரிக்கைகளை உருவாக்கும். பண்டில் செய்வது இறுதித் தளத்தை அவர்களுக்கு வேகமாக்குகிறது.

நீங்கள் குறியீடு எழுதும் போது Vite வேகத்தையும், நீங்கள் தளத்தை வெளியிடும் போது செயல்திறனையும் வழங்குகிறது.

ஆதாரம்: https://dev.to/yuripeixinho/descomplicando-o-vite-1p62