𝗛𝗼𝘄 𝘁𝗼 𝗥𝗲𝗱𝘂𝗰𝗲 𝗬𝗼𝘂𝗿 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗕𝘂𝗻𝗱𝗹𝗲 𝗦𝗶𝘇𝗲 𝗯𝘆 𝟳𝟬%

ಹೆಚ್ಚಿನ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳು ಅತಿಯಾದ ಕೋಡ್ ಅನ್ನು ಒಳಗೊಂಡಿರುತ್ತವೆ. ಸರಾಸರಿ ವೆಬ್ ಪುಟವು 1.7 MB JavaScript ಅನ್ನು ಲೋಡ್ ಮಾಡುತ್ತದೆ. ಡೆವಲಪರ್‌ಗಳು ತಾವು ನಿಯೋಜಿಸುವ (deploy ಮಾಡುವ) ಕೋಡ್‌ನ ಸುಮಾರು 35% ಅನ್ನು ಮಾತ್ರ ಬಳಸುತ್ತಾರೆ.

ಸಣ್ಣ ಬಂಡಲ್‌ಗಳು ನಿಮ್ಮ Core Web Vitals ಅನ್ನು ಸುಧಾರಿಸುತ್ತವೆ. ಇದರಿಂದ ನಿಮಗೆ ವೇಗವಾದ Largest Contentful Paint ಮತ್ತು ವೇಗವಾದ Time to Interactive ಸ್ಕೋರ್‌ಗಳು ಸಿಗುತ್ತವೆ.

ನಿಮ್ಮ ಬಂಡಲ್ ಗಾತ್ರವನ್ನು ಕುಗ್ಗಿಸಲು ಈ 10 ಹಂತಗಳನ್ನು ಅನುಸರಿಸಿ:

  • Tree shaking: ಬಳಕೆಯಾಗದ ಕೋಡ್ ಅನ್ನು ತೆಗೆದುಹಾಕುತ್ತದೆ. ಇದನ್ನು ಕೆಲಸ ಮಾಡುವಂತೆ ಮಾಡಲು ES Module ಸಿಂಟ್ಯಾಕ್ಸ್ ಬಳಸಿ.
  • Code splitting: ನಿಮ್ಮ ಕೋಡ್ ಅನ್ನು ಸಣ್ಣ ಭಾಗಗಳಾಗಿ ವಿಂಗಡಿಸುತ್ತದೆ.
  • Dynamic imports: ಬಳಕೆದಾರರಿಗೆ ಅಗತ್ಯವಿದ್ದಾಗ ಮಾತ್ರ ಕೋಡ್ ಅನ್ನು ಲೋಡ್ ಮಾಡುತ್ತದೆ.
  • Image optimization: ದೊಡ್ಡ ಲೈಬ್ರರಿಗಳ ಬದಲಿಗೆ URL-ಆಧಾರಿತ ಪರಿವರ್ತನೆಗಳನ್ನು (transforms) ಬಳಸಿ.
  • Dependency auditing: ಭಾರೀ ಲೈಬ್ರರಿಗಳ ಬದಲಿಗೆ ಹಗುರವಾದ ಲೈಬ್ರರಿಗಳನ್ನು ಬಳಸಿ.
  • Minification: ನಿಮ್ಮ ಕೋಡ್ ಫೈಲ್‌ಗಳನ್ನು ಕುಗ್ಗಿಸಿ.
  • Compression: Gzip ಗಿಂತ ಉತ್ತಮ ಫಲಿತಾಂಶಕ್ಕಾಗಿ Brotli ಬಳಸಿ.
  • Dead code elimination: ತಲುಪಲಾಗದ (unreachable) ಕೋಡ್ ಶಾಖೆಗಳನ್ನು ತೆಗೆದುಹಾಕಿ.
  • Lazy loading: ಅನಿವಾರ್ಯವಲ್ಲದ (non-critical) ಘಟಕಗಳನ್ನು ವಿಳಂಬಗೊಳಿಸಿ.
  • Polyfill pruning: ನಿಮ್ಮ ಬಳಕೆದಾರರಿಗೆ ಅಗತ್ಯವಿರುವ polyfills ಅನ್ನು ಮಾತ್ರ ಕಳುಹಿಸಿ.

ಮೂರು ತಂತ್ರಗಳು ಒಟ್ಟಾಗಿ ಕೆಲಸ ಮಾಡಿದರೆ ಅತ್ಯುತ್ತಮ ಫಲಿತಾಂಶ ನೀಡುತ್ತವೆ. Lazy loading, polyfill pruning ಮತ್ತು dead code elimination ನಿಮ್ಮ ಗಾತ್ರವನ್ನು 15-30% ರಷ್ಟು ಕಡಿಮೆ ಮಾಡಬಹುದು.

ನಿಮ್ಮ dependencies ಅನ್ನು ಇನ್‌ಸ್ಟಾಲ್ ಮಾಡುವ ಮೊದಲು ಅವುಗಳನ್ನು ಆಡಿಟ್ ಮಾಡಿ. ಗಾತ್ರವನ್ನು ಪರಿಶೀಲಿಸಲು npx bundle-phobia ಬಳಸಿ.

ಉದಾಹರಣೆಗೆ: • date-fns (13KB) ಎಂಬುದು moment.js (67KB) ಗಿಂತ ಉತ್ತಮವಾಗಿದೆ. • ದಿನಾಂಕ ಫಾರ್ಮ್ಯಾಟಿಂಗ್‌ಗಾಗಿ dayjs (2KB) ಒಂದು ಉತ್ತಮ ಪರ್ಯಾಯವಾಗಿದೆ. • ಪೂರ್ಣ lodash ಲೈಬ್ರರಿಯ ಬದಲಿಗೆ lodash-es ಬಳಸಿ.

ಈ ಗುರಿಗಳೊಂದಿಗೆ ನಿಮ್ಮ ಪ್ರಗತಿಯನ್ನು ಪರಿಶೀಲಿಸಿ: • ಒಟ್ಟು JS ಗಾತ್ರ: 120 KB ಗಿಂತ ಕಡಿಮೆ ಇರಲು ಪ್ರಯತ್ನಿಸಿ. • LCP: 2.5s ಗಿಂತ ಕಡಿಮೆ ಇರಲು ಪ್ರಯತ್ನಿಸಿ. • TTI: 3.5s ಗಿಂತ ಕಡಿಮೆ ಇರಲು ಪ್ರಯತ್ನಿಸಿ.

ಈ ತಪ್ಪುಗಳನ್ನು ತಪ್ಪಿಸಿ: • Production builds ಬದಲಿಗೆ development builds ಅನ್ನು ನಿಯೋಜಿಸುವುದು. • ನಿಮಗೆ ಕೇವಲ ಒಂದು ಫಂಕ್ಷನ್ ಅಗತ್ಯವಿದ್ದಾಗ ಇಡೀ ಲೈಬ್ರರಿಗಳನ್ನು ಇಂಪೋರ್ಟ್ ಮಾಡುವುದು. • ನಿಮ್ಮ ಸರ್ವರ್‌ನಲ್ಲಿ Brotli compression ಅನ್ನು ಎನೇಬಲ್ ಮಾಡಲು ಮರೆಯುವುದು.

ನೀವು tree shaking, code splitting ಮತ್ತು dependency auditing ಅನ್ನು ಬಳಸಿದರೆ, ಒಂದು ಸ್ಪ್ರಿಂಟ್‌ನಲ್ಲಿ (sprint) ನಿಮ್ಮ ಪೇಲೋಡ್ ಅನ್ನು 50-70% ರಷ್ಟು ಕಡಿಮೆ ಮಾಡಬಹುದು.

ಮೂಲ: https://dev.to/kui_luo/how-to-reduce-your-javascript-bundle-size-by-70-in-10-steps-3j1g