Jinsi ya Kupunguza Ukubwa wa Bundle ya JavaScript Yako kwa 70%

Programu nyingi za wavuti hutuma kodi nyingi kupita kiasi. Ukurasa wa wastani wa wavuti hupakia JavaScript ya MB 1.7. Watengenezaji hutumia takriban 35% tu ya kodi wanayoweka hewani.

Bundle ndogo huboresha Core Web Vitals zako. Unapata alama bora za Largest Contentful Paint na Time to Interactive kwa kasi zaidi.

Fuata hatua hizi 10 ili kupunguza ukubwa wa bundle yako:

  • Tree shaking: Huondoa kodi zisizotumika. Tumia sintaksi ya ES Module ili kufanikisha hili.
  • Code splitting: Hugawanya kodi yako katika vipande vidogo.
  • Dynamic imports: Pakia kodi pale tu mtumiaji anapohitaji.
  • Image optimization: Tumia mabadiliko yanayotokana na URL badala ya maktaba kubwa.
  • Dependency auditing: Badilisha maktaba nzito na nyepesi.
  • Minification: Punguza ukubwa wa faili zako za kodi.
  • Compression: Tumia Brotli kwa matokeo bora zaidi kuliko Gzip.
  • Dead code elimination: Ondoa matawi ya kodi yasiyofikika.
  • Lazy loading: Ahirisha vipengele visivyo vya muhimu.
  • Polyfill pruning: Tuma polyfills ambazo tu watumiaji wako wanazohitaji.

Mbinu tatu hufanya kazi vizuri zaidi zikiwa pamoja. Lazy loading, polyfill pruning, na dead code elimination zinaweza kupunguza ukubwa wako kwa 15-30%.

Kagua utegemezi (dependencies) zako kabla ya kuzisakinisha. Tumia npx bundle-phobia kukagua ukubwa.

Kwa mfano: • date-fns (13KB) ni bora kuliko moment.js (67KB). • dayjs (2KB) ni mbadala mzuri kwa uundaji wa tarehe (date formatting). • Tumia lodash-es badala ya maktaba kamili ya lodash.

Angalia maendeleo yako kwa malengo haya: • Ukubwa wa jumla wa JS: Lenga chini ya 120 KB. • LCP: Lenga chini ya sekunde 2.5. • TTI: Lenga chini ya sekunde 3.5.

Epuka makosa haya: • Kuweka (deploying) matoleo ya maendeleo (development builds) badala ya matoleo ya uzalishaji (production builds). • Kuimport maktaba nzima wakati unahitaji function moja tu. • Kusahau kuwezesha compression ya Brotli kwenye seva yako.

Ukitumia tree shaking, code splitting, na dependency auditing, unaweza kupunguza payload yako kwa 50-70% katika sprint moja.

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