𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗕𝘂𝗻𝗱𝗹𝗶𝗻𝗴 பற்றிய விளக்கம்
நீங்கள் பல கோப்புகளைப் பயன்படுத்தி React அல்லது Angular செயலிகளை உருவாக்குகிறீர்கள். நீங்கள் components, services மற்றும் libraries ஆகியவற்றைப் பயன்படுத்துகிறீர்கள்.
பல கோப்புகளைக் கையாளும் போது உலாவிகள் (Browsers) சிரமப்படுகின்றன. 200 கோப்புகளைப் பதிவிறக்குவது என்பது 200 network requests என்று அர்த்தம். இது உங்கள் செயலியை மெதுவாக்கும்.
Bundlers இந்தப் பிரச்சனைக்குத் தீர்வாக அமைகின்றன. அவை உங்கள் code மற்றும் imports ஆகியவற்றை எடுத்து, அவற்றை ஒன்று அல்லது சில சிறிய கோப்புகளாக இணைக்கின்றன. இது பதிவிறக்கத்தை (loading) திறம்படச் செய்கிறது.
நவீன bundlers கோப்புகளை இணைப்பதையும் தாண்டி பல வேலைகளைச் செய்கின்றன. அவை பின்வரும் பணிகளைச் செய்கின்றன:
- Minification: இவை இடைவெளிகள் (spaces) மற்றும் கருத்துகளை (comments) நீக்குகின்றன. இடத்தைச் சேமிக்க variable பெயர்களைச் சுருக்குகின்றன.
- Tree shaking: நீங்கள் பயன்படுத்தாத code-களை இவை நீக்குகின்றன.
- Code splitting: இவை code-களைச் சிறிய துண்டுகளாகப் பிரிக்கின்றன. பயனர்கள் அவர்களுக்குத் தேவையானவற்றை மட்டும் பதிவிறக்கம் செய்வார்கள்.
சிறிய கோப்புகள் வேகமான செயலிகளுக்கு வழிவகுக்கின்றன.
இரண்டு முக்கிய கருவிகள் உள்ளன: Webpack மற்றும் Vite.
Webpack உங்கள் முழு செயலையும் வழங்குவதற்கு (serving) முன்பே bundle செய்கிறது. இது சக்திவாய்ந்ததும் மற்றும் நெகிழ்வுத்தன்மை கொண்டதும் (flexible) ஆகும். மாற்றங்களின் போது இது அனைத்தையும் மீண்டும் bundle செய்வதால், பெரிய திட்டங்களில் (projects) இது மெதுவாக இருப்பது போல் தோன்றலாம்.
Vite ஒரு நவீனத் தேர்வாகும். இது development நேரத்தின் போது native ES modules-களைப் பயன்படுத்தி கோப்புகளை நேரடியாக வழங்குகிறது. நீங்கள் மாற்றும் கோப்பை மட்டுமே இது புதுப்பிக்கும். இது மாற்றங்களை உடனடியாகச் செய்ய உதவுகிறது.
ஒப்பீடு:
Webpack:
- Dev வேகம்: மெதுவானது
- Config: சிக்கலானது
- சிறந்தது: பெரிய legacy projects-களுக்கு
Vite:
- Dev வேகம்: வேகமானது
- Config: எளிமையானது
- சிறந்தது: புதிய நவீன projects-களுக்கு
புதிய திட்டங்களுக்கு Vite-ஐப் பயன்படுத்தவும்.
ஒவ்வொரு bundler-உம் மூன்று படிகளைப் பின்பற்றுகிறது:
- Build a dependency graph: கோப்புகள் ஒன்றோடொன்று எவ்வாறு இணைக்கப்பட்டுள்ளன என்பதை bundler வரைபடமாக்குகிறது.
- Transform code: இது TypeScript அல்லது JSX-ஐ சாதாரண JavaScript-ஆக மாற்றுகிறது.
- Output the bundle: இது deployment-க்காக இறுதி கோப்புகளை ஒரு கோப்புறையில் (folder) எழுதுகிறது.
இந்தத் குறிப்புகள் மூலம் உங்கள் bundle-ஐச் சுருக்கமாகவும் (lean) திறமையாகவும் வைத்திருக்கலாம்:
- Lazy loading: பயனருக்குத் தேவைப்படும்போது மட்டும் components-களைப் பதிவிறக்கவும்.
- Specific imports: முழு libraries-களையும் இறக்குமதி (import) செய்ய வேண்டாம். நீங்கள் பயன்படுத்தும் குறிப்பிட்ட functions-களை மட்டும் இறக்குமதி செய்யவும்.
- உங்கள் bundle-ஐ ஆய்வு செய்யவும்: எந்தக் கோப்புகள் அதிக இடத்தைப் பிடிக்கின்றன என்பதைக் காண கருவிகளைப் பயன்படுத்தவும்.
- Use production builds: எப்போதும் development builds-களுக்குப் பதிலாக production builds-களை மட்டுமே deploy செய்யவும்.
Bundlers குறைவான மற்றும் சிறிய கோப்புகளை வழங்குவதன் மூலம் உங்கள் செயலிகளை வேகமாக்குகின்றன.
ஆதாரம்: https://dev.to/kavya1205/javascript-bundling-explained-from-zero-to-optimised-f7p