JavaScript Bundling பற்றிய விளக்கம்
நீங்கள் பல கோப்புகளைப் பயன்படுத்தி React அல்லது Angular செயலிகளை உருவாக்குகிறீர்கள். உங்களிடம் components, services மற்றும் libraries உள்ளன. இந்த அமைப்பு உங்களுக்கு உதவுகிறது.
உலாவியானது (browser) உங்கள் கோப்புறைகளைப் (folders) பற்றி கவலைப்படுவதில்லை. நீங்கள் 200 கோப்புகளை ஏற்றினால், உலாவியானது 200 நெட்வொர்க் கோரிக்கைகளை (network requests) செய்யும். இது உங்கள் செயலியை மெதுவாக்கும்.
Bundlers இந்தப் பிரச்சனையைத் தீர்க்கின்றன. ஒரு bundler உங்கள் code, imports மற்றும் modules ஆகியவற்றை எடுத்துக்கொள்கிறது. அவற்றை ஒன்று அல்லது சில சிறிய கோப்புகளாக இணைக்கிறது. இது ஏற்றுவதை (loading) திறம்படச் செய்கிறது.
நவீன bundlers கோப்புகளை இணைப்பதை விட மேலதிகமானவற்றைச் செய்கின்றன:
• Minification: இது கூடுதல் இடைவெளிகள் மற்றும் கருத்துகளை (comments) நீக்குகிறது. கோப்புகளைச் சிறியதாக்க இது variable பெயர்களைச் சுருக்குகிறது. • Tree shaking: நீங்கள் பயன்படுத்தாத code-ஐ இது நீக்குகிறது. நூலகங்களிலிருந்து (libraries) பயன்படுத்தப்படாத functions-களை இது அகற்றிவிடுகிறது. • Code splitting: இது code-ஐச் சிறிய துண்டுகளாகப் பிரிக்கிறது. பயனர் இப்போது எதைத்தேவையோ அதை மட்டுமே உலாவியானது ஏற்றுகிறது.
சிறிய கோப்புகள் வேகமான செயலிகளுக்கு வழிவகுக்கின்றன.
இரண்டு முக்கிய கருவிகள் உள்ளன: Webpack மற்றும் Vite.
Webpack உங்கள் முழு செயலையும் வழங்குவதற்கு முன்பே bundle செய்கிறது. இது பெரிய legacy திட்டங்களுக்கு நன்றாகச் செயல்படுகிறது. இது நெகிழ்வானது (flexible), ஆனால் பெரிய திட்டங்களில் மெதுவாகத் தோன்றலாம்.
Vite நவீனத் தேர்வாகும். மேம்படுத்தும் போது (development), இது கோப்புகளை நேரடியாக வழங்குகிறது. நீங்கள் மாற்றும் கோப்பை மட்டுமே இது புதுப்பிக்கிறது. இது மாற்றங்களை உடனடியாகச் செய்கிறது. Production-க்காக, Vite வேகமான bundles-களை உருவாக்க Rollup-ஐப் பயன்படுத்துகிறது.
ஒப்பீடு:
Webpack:
- Dev speed: மெதுவானது
- Config: சிக்கலானது
- Best for: பெரிய legacy திட்டங்கள்
Vite:
- Dev speed: வேகமானது
- Config: எளிமையானது
- Best for: புதிய நவீன திட்டங்கள்
புதிய திட்டங்களுக்கு Vite-ஐப் பயன்படுத்தவும்.
ஒவ்வொரு bundler-உம் மூன்று படிகளைப் பின்பற்றுகிறது:
- Build a dependency graph: ஒவ்வொரு கோப்பும் மற்றவற்றுடன் எவ்வாறு இணைகிறது என்பதை இது வரைபடமாக்குகிறது.
- Transform code: இது TypeScript அல்லது JSX-ஐ சாதாரண JavaScript-ஆக மாற்றுகிறது.
- Output the bundle: இது அனைத்தையும் இணைத்து, deployment-க்காக ஒரு கோப்புறையில் (folder) சுருக்கி (minify) வெளியிடுகிறது.
இந்த படிகளின் மூலம் உங்கள் bundle-ஐச் சுருக்கமாக (lean) வைத்துக்கொள்ளுங்கள்:
• Lazy loading: பயனர்கள் அவற்றிற்குச் செல்லும் போது மட்டுமே components-களை ஏற்றவும். • Partial imports: ஒரு முழு நூலகத்தையும் (library) இறக்குமதி செய்ய வேண்டாம். உங்களுக்குத் தேவையான குறிப்பிட்ட function-ஐ மட்டும் இறக்குமதி செய்யவும். • Analyze: உங்கள் bundle-இல் எதனால் இடம் அதிகமாகப் பிடிக்கிறது என்பதைப் பார்க்க கருவிகளைப் பயன்படுத்தவும். • Production builds: எப்போதும் production builds-களை மட்டுமே deploy செய்யவும். Development builds மிகவும் பெரியவை.
Bundling உங்கள் செயலியை உலாவியிடம் குறைவான மற்றும் சிறிய கோப்புகளை வழங்குவதன் மூலம் அதன் செயல்திறனை மேம்படுத்துகிறது.
ஆதாரம்: https://dev.to/kavya1205/javascript-bundling-explained-from-zero-to-optimised-f7p