𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗕𝘂𝗻𝗱𝗹𝗶𝗻𝗴 𝗘𝘅𝗽𝗹𝗮𝗶𝗻𝗲𝗱
ನೀವು ಅನೇಕ ಫೈಲ್ಗಳನ್ನು ಬಳಸಿ React ಅಥವಾ Angular ಅಪ್ಲಿಕೇಶನ್ಗಳನ್ನು ಬರೆಯುತ್ತೀರಿ. ನೀವು components, services ಮತ್ತು libraries ಬಳಸುತ್ತೀರಿ.
ಅನೇಕ ಫೈಲ್ಗಳಿದ್ದಾಗ ಬ್ರೌಸರ್ಗಳು ಕಷ್ಟಪಡುತ್ತವೆ. 200 ಫೈಲ್ಗಳನ್ನು ಲೋಡ್ ಮಾಡುವುದು ಎಂದರೆ 200 ನೆಟ್ವರ್ಕ್ ರಿಕ್ವೆಸ್ಟ್ಗಳು ಎಂದರ್ಥ. ಇದು ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ನಿಧಾನಗೊಳಿಸುತ್ತದೆ.
Bundlers ಇದನ್ನು ಪರಿಹರಿಸುತ್ತವೆ. ಅವು ನಿಮ್ಮ ಕೋಡ್ ಮತ್ತು imports ಅನ್ನು ತೆಗೆದುಕೊಂಡು ಅವುಗಳನ್ನು ಒಂದೇ ಅಥವಾ ಕೆಲವು ಸಣ್ಣ ಫೈಲ್ಗಳಾಗಿ ಸಂಯೋಜಿಸುತ್ತವೆ. ಇದು ಲೋಡ್ ಮಾಡುವುದನ್ನು ದಕ್ಷವಾಗಿಸುತ್ತದೆ.
ಆಧುನಿಕ bundlers ಕೇವಲ ಫೈಲ್ಗಳನ್ನು ಸಂಯೋಜಿಸುವುದಕ್ಕಿಂತ ಹೆಚ್ಚಿನ ಕೆಲಸ ಮಾಡುತ್ತವೆ. ಅವು ಈ ಕೆಳಗಿನ ಕಾರ್ಯಗಳನ್ನು ನಿರ್ವಹಿಸುತ್ತವೆ:
- Minification: ಅವು ಸ್ಪೇಸ್ಗಳು ಮತ್ತು ಕಾಮೆಂಟ್ಗಳನ್ನು ತೆಗೆದುಹಾಕುತ್ತವೆ. ಜಾಗವನ್ನು ಉಳಿಸಲು ಅವು variable ಹೆಸರುಗಳನ್ನು ಚಿಕ್ಕದಾಗಿಸುತ್ತವೆ.
- Tree shaking: ನೀವು ಬಳಸದ ಕೋಡ್ ಅನ್ನು ಅವು ತೆಗೆದುಹಾಕುತ್ತವೆ.
- Code splitting: ಅವು ಕೋಡ್ ಅನ್ನು ಸಣ್ಣ ತುಣುಕುಗಳಾಗಿ ವಿಂಗಡಿಸುತ್ತವೆ. ಬಳಕೆದಾರರು ಅವರಿಗೆ ಬೇಕಾದದ್ದನ್ನು ಮಾತ್ರ ಲೋಡ್ ಮಾಡಿಕೊಳ್ಳುತ್ತಾರೆ.
ಸಣ್ಣ ಫೈಲ್ಗಳು ವೇಗವಾದ ಅಪ್ಲಿಕೇಶನ್ಗಳಿಗೆ ಕಾರಣವಾಗುತ್ತವೆ.
ಎರಡು ಮುಖ್ಯ ಪರಿಕರಗಳು (tools) ಲಭ್ಯವಿವೆ: Webpack ಮತ್ತು Vite.
Webpack ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ಸರ್ವ್ ಮಾಡುವ ಮೊದಲು ಇಡೀ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು bundle ಮಾಡುತ್ತದೆ. ಇದು ಶಕ್ತಿಯುತ ಮತ್ತು ನಮ್ಯತೆಯನ್ನು (flexible) ಹೊಂದಿದೆ. ಬದಲಾವಣೆಗಳ ಸಮಯದಲ್ಲಿ ಇದು ಎಲ್ಲವನ್ನೂ ಮರು-bundle ಮಾಡುವುದರಿಂದ ದೊಡ್ಡ ಪ್ರಾಜೆಕ್ಟ್ಗಳಲ್ಲಿ ಇದು ನಿಧಾನವೆನಿಸಬಹುದು.
Vite ಒಂದು ಆಧುನಿಕ ಆಯ್ಕೆಯಾಗಿದೆ. ಇದು native ES modules ಬಳಸಿ ಡೆವಲಪ್ಮೆಂಟ್ ಸಮಯದಲ್ಲಿ ಫೈಲ್ಗಳನ್ನು ನೇರವಾಗಿ ಸರ್ವ್ ಮಾಡುತ್ತದೆ. ನೀವು ಬದಲಾಯಿಸಿದ ಫೈಲ್ ಅನ್ನು ಮಾತ್ರ ಇದು ಅಪ್ಡೇಟ್ ಮಾಡುತ್ತದೆ. ಇದು ಅಪ್ಡೇಟ್ಗಳನ್ನು ತಕ್ಷಣವೇ ಮಾಡುತ್ತದೆ.
ಹೋಲಿಕೆ:
Webpack:
- Dev speed: ನಿಧಾನ
- Config: ಸಂಕೀರ್ಣ
- Best for: ದೊಡ್ಡ legacy ಪ್ರಾಜೆಕ್ಟ್ಗಳು
Vite:
- Dev speed: ವೇಗ
- Config: ಸರಳ
- Best for: ಹೊಸ ಆಧುನಿಕ ಪ್ರಾಜೆಕ್ಟ್ಗಳು
ಹೊಸ ಪ್ರಾಜೆಕ್ಟ್ಗಳಿಗಾಗಿ Vite ಬಳಸಿ.
ಪ್ರತಿಯೊಂದು bundler ಮೂರು ಹಂತಗಳನ್ನು ಅನುಸರಿಸುತ್ತದೆ:
- Build a dependency graph: ಫೈಲ್ಗಳು ಒಂದಕ್ಕೊಂದು ಹೇಗೆ ಸಂಪರ್ಕ ಹೊಂದಿವೆ ಎಂಬುದನ್ನು bundler ನಕ್ಷೆ ಮಾಡುತ್ತದೆ.
- Transform code: ಇದು TypeScript ಅಥವಾ JSX ಅನ್ನು ಸಾಮಾನ್ಯ JavaScript ಆಗಿ ಪರಿವರ್ತಿಸುತ್ತದೆ.
- Output the bundle: ಇದು deployment ಗಾಗಿ ಅಂತಿಮ ಫೈಲ್ಗಳನ್ನು ಒಂದು ಫೋಲ್ಡರ್ಗೆ ಬರೆಯುತ್ತದೆ.
ಈ ಸಲಹೆಗಳೊಂದಿಗೆ ನಿಮ್ಮ bundle ಅನ್ನು ಲೀನ್ (lean) ಆಗಿ ಇರಿಸಿ:
- Lazy loading: ಬಳಕೆದಾರರಿಗೆ ಅಗತ್ಯವಿದ್ದಾಗ ಮಾತ್ರ components ಅನ್ನು ಲೋಡ್ ಮಾಡಿ.
- Specific imports: ಇಡೀ libraries ಅನ್ನು ಇಂಪೋರ್ಟ್ ಮಾಡಬೇಡಿ. ನೀವು ಬಳಸುವ ನಿರ್ದಿಷ್ಟ ಫಂಕ್ಷನ್ಗಳನ್ನು ಮಾತ್ರ ಇಂಪೋರ್ಟ್ ಮಾಡಿ.
- Analyze your bundle: ಯಾವ ಫೈಲ್ಗಳು ಹೆಚ್ಚು ಜಾಗವನ್ನು ತೆಗೆದುಕೊಳ್ಳುತ್ತವೆ ಎಂಬುದನ್ನು ನೋಡಲು ಪರಿಕರಗಳನ್ನು ಬಳಸಿ.
- Use production builds: ಯಾವಾಗಲೂ development builds ಬದಲಿಗೆ production builds ಅನ್ನು ಡಿಪ್ಲಾಯ್ ಮಾಡಿ.
Bundlers ಕಡಿಮೆ ಮತ್ತು ಸಣ್ಣ ಫೈಲ್ಗಳನ್ನು ಒದಗಿಸುವ ಮೂಲಕ ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ಗಳನ್ನು ವೇಗಗೊಳಿಸುತ್ತವೆ.
Source: https://dev.to/kavya1205/javascript-bundling-explained-from-zero-to-optimised-f7p