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

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

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

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

  1. Tree shaking ಬಳಕೆಯಾಗದ exports ಗಳನ್ನು ತೆಗೆದುಹಾಕಿ. ES Module syntax ಬಳಸಿ. ನಿಮ್ಮ package.json ಗೆ "sideEffects": false ಅನ್ನು ಸೇರಿಸಿ. ಇದು ಬಳಕೆಯಾಗದ ಸುಮಾರು 18% ಕೋಡ್ ಅನ್ನು ತೆಗೆದುಹಾಕುತ್ತದೆ.

  2. Code splitting ನಿಮ್ಮ ಕೋಡ್ ಅನ್ನು ಸಣ್ಣ ಚಂಕ್‌ಗಳಾಗಿ (chunks) ವಿಂಗಡಿಸಿ.

  3. Dynamic imports ಬಳಕೆದಾರರಿಗೆ ಅಗತ್ಯವಿದ್ದಾಗ ಮಾತ್ರ ಕೋಡ್ ಲೋಡ್ ಮಾಡಿ. routes ಗಾಗಿ lazy loading ಬಳಸಿ. ಇದು ಆರಂಭಿಕ ಬಂಡಲ್ ಗಾತ್ರವನ್ನು 28% ರಷ್ಟು ಕಡಿಮೆ ಮಾಡಬಹುದು.

  4. Image optimization CDN ನಿಂದ URL-ಆಧಾರಿತ transforms ಬಳಸಿ. ದೊಡ್ಡದಾದ inline SVGs ಬಳಸುವುದು ನಿಲ್ಲಿಸಿ.

  5. Dependency auditing npx bundle-phobia ಬಳಸಿ ಪ್ಯಾಕೇಜ್ ಗಾತ್ರಗಳನ್ನು ಪರಿಶೀಲಿಸಿ. • moment.js (67KB) ಬದಲಿಗೆ date-fns (13KB) ಬಳಸಿ. • lodash ಬದಲಿಗೆ lodash-es ಬಳಸಿ. • ಸರಳ ದಿನಾಂಕಗಳಿಗಾಗಿ dayjs (2KB) ಬಳಸಿ.

  6. Minification ಹೆಚ್ಚುವರಿ ಸ್ಪೇಸ್‌ಗಳು ಮತ್ತು ಅಕ್ಷರಗಳನ್ನು ತೆಗೆದುಹಾಕಿ. ಹೆಚ್ಚಿನ ಬಂಡಲರ್‌ಗಳು ಇದನ್ನು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಮಾಡುತ್ತವೆ.

  7. Compression Gzip ಬದಲಿಗೆ Brotli ಬಳಸಿ. ಫೈಲ್‌ಗಳನ್ನು ಕುಗ್ಗಿಸುವಲ್ಲಿ Brotli 15% ರಿಂದ 25% ರಷ್ಟು ಉತ್ತಮವಾಗಿದೆ.

  8. Dead code elimination ಕಂಪ್ಯೂಟರ್ ಎಂದಿಗೂ ತಲುಪಲಾಗದ ಕೋಡ್ ಅನ್ನು ತೆಗೆದುಹಾಕಿ.

  9. Lazy loading components ಪುಟದ ಕೆಳಭಾಗದಲ್ಲಿರುವ (below the fold) ಭಾಗಗಳ ಲೋಡ್ ಆಗುವುದನ್ನು ವಿಳಂಬಗೊಳಿಸಿ.

  10. Polyfill pruning @babel/preset-env ಬಳಸಿ. ನಿಮ್ಮ ಬಳಕೆದಾರರು ವಾಸ್ತವವಾಗಿ ಬಳಸುವ ಬ್ರೌಸರ್‌ಗಳಿಗೆ ಮಾತ್ರ polyfills ಕಳುಹಿಸಿ.

ಈ ತಪ್ಪುಗಳನ್ನು ಮಾಡುವುದನ್ನು ನಿಲ್ಲಿಸಿ:

  • development builds ಕಳುಹಿಸುವುದು. ಯಾವಾಗಲೂ NODE_ENV=production ಬಳಸಿ.
  • ಇಡೀ ಲೈಬ್ರರಿಗಳನ್ನು (libraries) ಇಂಪೋರ್ಟ್ ಮಾಡುವುದು. ಬದಲಿಗೆ ನಿರ್ದಿಷ್ಟ ಫಂಕ್ಷನ್‌ಗಳನ್ನು (functions) ಇಂಪೋರ್ಟ್ ಮಾಡಿ.
  • ಅನಾಲಿಸಿಸ್ (analysis) ಮಾಡುವುದನ್ನು ಬಿಡುವುದು. ನಿಮ್ಮ ದೊಡ್ಡ ಚಂಕ್‌ಗಳನ್ನು ನೋಡಲು webpack-bundle-analyzer ಬಳಸಿ.
  • ಕಂಪ್ರೆಶನ್ (compression) ಮರೆಯುವುದು. ಕಂಪ್ರೆಸ್ ಮಾಡದ ಫೈಲ್‌ಗಳು Brotli ಫೈಲ್‌ಗಳಿಗಿಂತ 5 ಪಟ್ಟು ದೊಡ್ಡದಾಗಿರುತ್ತವೆ.

ಈ ಗುರಿಗಳೊಂದಿಗೆ ನಿಮ್ಮ ಪ್ರಗತಿಯನ್ನು ಟ್ರ್ಯಾಕ್ ಮಾಡಿ:

  • ಒಟ್ಟು JS ಗಾತ್ರ: 120 KB ಗಿಂತ ಕಡಿಮೆ.
  • LCP: 2.5s ಗಿಂತ ಕಡಿಮೆ.
  • TTI: 3.5s ಗಿಂತ ಕಡಿಮೆ.

ಮೊದಲು tree shaking, code splitting ಮತ್ತು auditing ಮೇಲೆ ಗಮನಹರಿಸಿ. ಈ ಮೂರು ಹಂತಗಳು ಹೆಚ್ಚಾಗಿ ಒಂದು ಸ್ಪ್ರಿಂಟ್‌ನಲ್ಲಿ (sprint) 50% ರಿಂದ 70% ರಷ್ಟು ಕಡಿತವನ್ನು ನೀಡುತ್ತವೆ.

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