𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗕𝘂𝗻𝗱𝗹𝗶𝗻𝗴 𝗘𝘅𝗽𝗹𝗮𝗶𝗻𝗲𝗱
మీరు అనేక ఫైళ్లను ఉపయోగించి React లేదా Angular యాప్లను రాస్తారు. మీకు కాంపోనెంట్స్ (components), సర్వీసెస్ (services) మరియు లైబ్రరీలు (libraries) ఉంటాయి. ఈ క్రమబద్ధీకరణ మీకు సహాయపడుతుంది.
బ్రౌజర్కు మీ ఫోల్డర్లతో సంబంధం లేదు. మీరు 200 ఫైళ్లను లోడ్ చేస్తే, బ్రౌజర్ 200 నెట్వర్క్ రిక్వెస్ట్లను చేస్తుంది. ఇది మీ యాప్ను నెమ్మదిగా చేస్తుంది.
బండలర్లు (Bundlers) ఈ సమస్యను పరిష్కరిస్తాయి. ఒక బండలర్ మీ కోడ్, ఇంపోర్ట్స్ (imports) మరియు మాడ్యూల్స్ను తీసుకుంటుంది. ఇది వాటిని ఒకటి లేదా కొన్ని చిన్న ఫైళ్లుగా కలుపుతుంది. ఇది లోడింగ్ను సమర్థవంతంగా చేస్తుంది.
ఆధునిక బండలర్లు కేవలం ఫైళ్లను కలపడమే కాకుండా మరిన్ని పనులు చేస్తాయి:
• Minification: ఇది అదనపు స్పేస్లు మరియు కామెంట్లను తొలగిస్తుంది. ఫైళ్లను చిన్నవిగా చేయడానికి ఇది వేరియబుల్ పేర్లను తగ్గిస్తుంది. • Tree shaking: ఇది మీరు ఎప్పుడూ ఉపయోగించని కోడ్ను తొలగిస్తుంది. ఇది లైబ్రరీల నుండి ఉపయోగించని ఫంక్షన్లను తీసివేస్తుంది. • Code splitting: ఇది కోడ్ను చిన్న చిన్న భాగాలుగా (chunks) విడగొడుతుంది. యూజర్కు ప్రస్తుతం అవసరమైన వాటిని మాత్రమే బ్రౌజర్ లోడ్ చేస్తుంది.
చిన్న ఫైళ్లు వేగవంతమైన యాప్లకు దారితీస్తాయి.
రెండు ప్రధాన సాధనాలు ఉన్నాయి: Webpack మరియు Vite.
Webpack మీ యాప్ను సర్వ్ చేసే ముందు మొత్తం యాప్ను బండిల్ చేస్తుంది. ఇది పెద్ద లెగసీ ప్రాజెక్ట్లకు (legacy projects) బాగా పనిచేస్తుంది. ఇది ఫ్లెక్సిబుల్గా ఉంటుంది కానీ పెద్ద ప్రాజెక్ట్లలో నెమ్మదిగా అనిపించవచ్చు.
Vite ఆధునిక ఎంపిక. డెవలప్మెంట్ సమయంలో, ఇది ఫైళ్లను నేరుగా సర్వ్ చేస్తుంది. మీరు మార్చిన ఫైల్ను మాత్రమే ఇది అప్డేట్ చేస్తుంది. దీనివల్ల అప్డేట్లు తక్షణమే జరుగుతాయి. ప్రొడక్షన్ (production) కోసం, Vite వేగవంతమైన బండిల్స్ను సృష్టించడానికి Rollupను ఉపయోగిస్తుంది.
పోలిక:
Webpack:
- Dev speed: నెమ్మదిగా
- Config: సంక్లిష్టమైనది
- Best for: పెద్ద లెగసీ ప్రాజెక్ట్లు
Vite:
- Dev speed: వేగంగా
- Config: సరళమైనది
- Best for: కొత్త ఆధునిక ప్రాజెక్ట్లు
కొత్త ప్రాజెక్ట్ల కోసం Viteని ఉపయోగించండి.
ప్రతి బండలర్ మూడు దశలను అనుసరిస్తుంది:
- Build a dependency graph: ప్రతి ఫైల్ ఇతర ఫైళ్లతో ఎలా అనుసంధానించబడి ఉందో ఇది మ్యాప్ చేస్తుంది.
- Transform code: ఇది TypeScript లేదా JSXని సాధారణ JavaScriptలోకి మారుస్తుంది.
- Output the bundle: ఇది డిప్లాయ్మెంట్ (deployment) కోసం అన్నింటినీ కలిపి, చిన్నవిగా చేసి ఒక ఫోల్డర్లో ఉంచుతుంది.
ఈ దశలతో మీ బండిల్ను తేలికగా (lean) ఉంచుకోండి:
• Lazy loading: యూజర్లు వాటికి నావిగేట్ చేసినప్పుడు మాత్రమే కాంపోనెంట్లను లోడ్ చేయండి. • Partial imports: మొత్తం లైబ్రరీని ఇంపోర్ట్ చేయకండి. మీకు అవసరమైన నిర్దిష్ట ఫంక్షన్ను మాత్రమే ఇంపోర్ట్ చేయండి. • Analyze: మీ బండిల్లో ఏది ఎక్కువ స్థలాన్ని తీసుకుంటుందో చూడటానికి టూల్స్ను ఉపయోగించండి. • Production builds: ఎల్లప్పుడూ ప్రొడక్షన్ బిల్డ్లను మాత్రమే డిప్లాయ్ చేయండి. డెవలప్మెంట్ బిల్డ్లు చాలా పెద్దవిగా ఉంటాయి.
బండిల్ చేయడం వల్ల బ్రౌజర్కు తక్కువ మరియు చిన్న ఫైళ్లు అందుతాయి, దీనివల్ల మీ యాప్ మెరుగైన పనితీరును ప్రదర్శిస్తుంది.
Source: https://dev.to/kavya1205/javascript-bundling-explained-from-zero-to-optimised-f7p