كيفية تقليل حجم حزمة JavaScript بنسبة 70%

ترسل معظم تطبيقات الويب الكثير من الأكواد البرمجية. تحمل الصفحة المتوسطة 1.7 ميجابايت من JavaScript. لا يستخدم المطورون سوى 35% فقط من الكود الذي يرسلونه.

الحزم الأصغر تحسن سرعتك. ستعمل على تحسين Largest Contentful Paint و Time to Interactive.

اتبع هذه الخطوات العشر لتقليل الحجم.

  1. Tree shaking قم بإزالة التصديرات (exports) غير المستخدمة. استخدم صيغة ES Module. أضف "sideEffects": false إلى ملف package.json الخاص بك. هذا يزيل حوالي 18% من الكود غير المستخدم.

  2. Code splitting قم بتقسيم الكود الخاص بك إلى أجزاء (chunks) أصغر.

  3. Dynamic imports قم بتحميل الكود فقط عندما يحتاجه المستخدمون. استخدم التحميل الكسول (lazy loading) للمسارات (routes). يمكن لهذا أن يقلل حجم الحزمة الأولية بنسبة 28%.

  4. Image optimization استخدم التحويلات القائمة على URL من CDN. توقف عن استخدام ملفات SVG المضمنة (inline) الكبيرة.

  5. Dependency auditing تحقق من أحجام الحزم باستخدام npx bundle-phobia. • استخدم date-fns (13KB) بدلاً من moment.js (67KB). • استخدم lodash-es بدلاً من lodash. • استخدم dayjs (2KB) للتواريخ البسيطة.

  6. Minification قم بإزالة المسافات والرموز الزائدة. تقوم معظم أدوات التجميع (bundlers) بذلك تلقائياً.

  7. Compression استخدم Brotli بدلاً من Gzip. يعد 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.
  • استيراد مكتبات كاملة. استورد وظائف (functions) محددة بدلاً من ذلك.
  • تخطي عملية التحليل. استخدم webpack-bundle-analyzer لرؤية الأجزاء الكبيرة لديك.
  • نسيان الضغط. الملفات غير المضغوطة أكبر بـ 5 مرات من ملفات Brotli.

تتبع تقدمك باستخدام هذه الأهداف:

  • إجمالي حجم JS: أقل من 120 كيلوبايت.
  • LCP: أقل من 2.5 ثانية.
  • TTI: أقل من 3.5 ثانية.

ركز على tree shaking و code splitting والتدقيق أولاً. غالباً ما توفر هذه الخطوات الثلاث تقليلاً بنسبة 50% إلى 70% في دورة تطوير واحدة (sprint).

المصدر: https://dev.to/kui_luo/how-to-reduce-your-javascript-bundle-size-by-70-in-10-steps-3j1g