Jinsi ya Kupunguza Ukubwa wa JavaScript Bundle kwa 70%

Programu nyingi za wavuti hutuma kodi nyingi mno. Ukurasa wa wastani hupakia JavaScript ya MB 1.7. Watengenezaji hutumia asilimia 35 tu ya kodi wanayotuma.

Bundles ndogo huongeza kasi yako. Unaboresha Largest Contentful Paint na Time to Interactive.

Fuata hatua hizi 10 ili kupunguza ukubwa wako.

  1. Tree shaking Ondoa exports zisizotumika. Tumia sintaksi ya ES Module. Ongeza "sideEffects": false kwenye package.json yako. Hii huondoa takriban 18% ya kodi zisizotumika.

  2. Code splitting Gawanya kodi yako katika vipande (chunks) vidogo.

  3. Dynamic imports Pakia kodi pale tu watumiaji wanapohitaji. Tumia lazy loading kwa routes. Hii inaweza kupunguza ukubwa wa bundle ya awali kwa 28%.

  4. Image optimization Tumia URL-based transforms kutoka CDN. Acha kutumia SVGs kubwa za inline.

  5. Dependency auditing Angalia ukubwa wa package kwa kutumia npx bundle-phobia. • Tumia date-fns (13KB) badala ya moment.js (67KB). • Tumia lodash-es badala ya lodash. • Tumia dayjs (2KB) kwa tarehe rahisi.

  6. Minification Ondoa nafasi na herufi za ziada. Bundlers nyingi hufanya hivi kiotomatiki.

  7. Compression Tumia Brotli badala ya Gzip. Brotli ni bora zaidi kwa asilimia 15 hadi 25 katika kusinyaa kwa faili.

  8. Dead code elimination Ondoa kodi ambayo kompyuta haiwezi kuifikia kamwe.

  9. Lazy loading components Chelewesha kupakia sehemu za ukurasa ambazo zipo chini ya fold (below the fold).

  10. Polyfill pruning Tumia @babel/preset-env. Tuma polyfills kwa ajili tu ya vivinjari (browsers) ambavyo watumiaji wako wanavitumia kweli.

Acha kufanya makosa haya:

  • Kutuma development builds. Daima tumia NODE_ENV=production.
  • Kuimport maktaba (libraries) nzima. Badala yake, import functions mahususi.
  • Kuruka uchambuzi (analysis). Tumia webpack-bundle-analyzer kuona vipande vyako vikubwa.
  • Kusahau compression. Faili zisizosongwa ni kubwa mara 5 kuliko faili za Brotli.

Fuatilia maendeleo yako kwa malengo haya:

  • Ukubwa wa jumla wa JS: Chini ya 120 KB.
  • LCP: Chini ya 2.5s.
  • TTI: Chini ya 3.5s.

Lenga kwanza tree shaking, code splitting, na auditing. Hatua hizi tatu mara nyingi hutoa upunguzaji wa 50% hadi 70% katika sprint moja.

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