حجم الحزمة: النظام الغذائي لجافا سكريبت الخاص بك

“الموقع سريع على جهاز MacBook Pro الخاص بي.” هذه هي الجملة الأكثر خطورة في هندسة الواجهة الأمامية. يحتوي جهاز MacBook Pro الخاص بك على شريحة M3 Max. يقوم بتوزيع 1 ميجابايت من JavaScript في 50 مللي ثانية. يمتلك المستخدم الخاص بك جهاز Samsung Galaxy A15 بقيمة 200 دولار. يقوم بتحليل نفس الـ 1 ميجابايت في 2.5 ثانية. خلال تلك الـ 2.5 ثانية، يتم تجميد الخيط الرئيسي. يقوم المستخدم بالنقر على “أضف إلى سلة التسوق”. لا شيء يحدث. يغادرون.

في عام 2025، نادرًا ما تمثل سرعة الشبكة (4G/5G) عنق الزجاجة للتجارة الإلكترونية. وحدة المعالجة المركزية هي عنق الزجاجة. والمقياس الذي يتتبع ذلك هو التفاعل مع الطلاء التالي (INP). لإصلاح INP، يجب عليك تقليل حمولة JavaScript.

في Maison Code Paris، نفرض ميزانيات صارمة: <100 كيلو بايت تحميل أولي.

لماذا تتحدث Maison Code عن هذا

في Maison Code Paris، نعمل كضمير معمari لعملائنا. غالبًا ما نرث حزمًا “حديثة” تم بناؤها دون فهم أساسي للحجم.

نناقش هذا الموضوع لأنه يمثل نقطة تحول حاسمة في النضج الهندسي. التنفيذ الصحيح يميز MVP الهش عن منصة مؤسسية مرنة يمكنها التعامل مع حركة مرور الجمعة السوداء.

1. تكلفة الواردات: هز الأشجار

اهتزاز الشجرة (إزالة الكود الميت) هي عملية إزالة الصادرات غير المستخدمة من الحزمة الخاصة بك. لكنها لا تعمل بالسحر. يجب عليك كتابة رمز “Shakeable”.

فخ ملف البرميل

يحب المطورون “Barrel Files” (“index.ts” الذي يصدر كل شيء). إنهم يدمرون اهتزاز الشجرة.

نمط سيء:

// المكونات/index.ts
تصدير * من './زر'؛
تصدير * من "./Carousel"؛ // مكون عملاق بحجم 50 كيلو بايت
تصدير * من "./جدول"؛

// App.tsx
استيراد {زر} من "./المكونات"؛

في العديد من تكوينات المجمعات (خاصة Webpack الأقدم)، سيؤدي استيراد “Button” إلى تضمين “Carousel” أيضًا في الحزمة، بسبب قيود اكتشاف الآثار الجانبية.

الإصلاح: عمليات الاستيراد المباشرة أو التكوين الدقيق لـ “الآثار الجانبية: false” في “package.json”.

فخ المكتبة (لوداش)

استيراد { خريطة } من 'lodash'؛ يسحب المكتبة بأكملها التي يبلغ حجمها 70 كيلو بايت. استخدم lodash-es أو عمليات استيراد محددة: استيراد الخريطة من 'lodash/map'؛. والأفضل من ذلك، استخدام أساليب المصفوفة الأصلية. [].map() يكلف 0 بايت.

2. تقسيم الكود: مسارات التحميل البطيئة

لماذا يتم إرسال رمز “لوحة التحكم الإدارية” إلى العميل الذي يشتري قميصًا للتو؟ نحن نستخدم تقسيم التعليمات البرمجية على أساس المسار.

في Next.js (جهاز توجيه التطبيقات)، يحدث هذا تلقائيًا لملفات page.tsx. في Vite/React Router، يجب عليك استخدام lazy().

استيراد {lazy, Suspense} من 'react'؛

// يُنشئ هذا الاستيراد الديناميكي مقطعًا منفصلاً (على سبيل المثال، Settings.chunk.js)
constSettingsPage = Lazy(() => import('./pages/Settings'));

وظيفة التطبيق () {
  العودة (
    <الطرق>
      <مسار الطريق = "/" العنصر = {<الصفحة الرئيسية />} />
      <مسار الطريق = "/الإعدادات" العنصر = {
        <التشويق الاحتياطي={<الدوار />}>
          <صفحة الإعدادات />
        </تشويق>
      } />
    </الطرق>
  );
}

تقسيم مستوى المكونات

هل “عارض النماذج ثلاثي الأبعاد” الخاص بك ثقيل؟ لا تقم بتحميله عند تحميل الصفحة. قم بتحميله ** عند التفاعل **.

const ModelViewer =dynamic(() => import('./ModelViewer'), { ssr: false });

وظيفة صفحة المنتج () {
  const [show3D, setShow3D] = useState(false);

  العودة (
    <>
      <button onClick={() => setShow3D(true)}>عرض ثلاثي الأبعاد</button>
      {show3D && <ModelViewer />}
    </>
  );
}

يتم تنزيل JS الثقيل فقط عندما يطلبه المستخدم فعليًا.

3. تصور الانتفاخ

لا يمكنك إصلاح ما لا يمكنك رؤيته. نحن نستخدم @next/bundle-analyzer (أو rollup-plugin-visualizer). قم بتشغيله قبل كل عملية نشر.

سوف تجد الرعب:

• Three.js داخل حزمة الصفحة الرئيسية؟
• Moment.js اللغات؟ (استخدم “date-fns” أو “Intl” API).
• Faker.js في الإنتاج؟ (يجب أن يكون devDependency).

نقوم عادةً بتقليل حجم الحزمة بنسبة 30% فقط عن طريق حذف التبعيات غير المستخدمة الموجودة في أداة العرض المرئي.

4. نصوص الطرف الثالث: الحل “Partytown”.

لقد قمت بتحسين رمز التطبيق الخاص بك إلى 50 كيلو بايت. ممتاز. ثم يضيف فريق التسويق GTM (Google Tag Manager). حقن GTM:

• فيسبوك بيكسل (40 كيلو بايت)
• تيك توك بكسل (50 كيلو بايت)
• هوتجار (70 كيلو بايت)
• كلافيو (40 كيلو بايت)
• جورجياس (200 كيلو بايت)

فجأة، تم حظر موضوعك الرئيسي بواسطة 500 كيلو بايت من البرامج النصية التسويقية. الحل هو بنية خارج الموضوع الرئيسي.

نحن نستخدم ** بارتي تاون **. يقوم بتشغيل البرامج النصية لجهات خارجية في Web Worker. إنه وكيل للوصول إلى DOM (على سبيل المثال، “document.cookie”) من العامل إلى الموضوع الرئيسي عبر XHR المتزامن (الانتظار الذري).

// تخطيط.tsx (Next.js)
استيراد { التحقق } من './Partytown'؛

<الرأس>
  <Partytown debug={true} Forward={['dataLayer.push']} />
</الرأس>
<النص البرمجي
  src="https://www.googletagmanager.com/gtm.js?id=GTM-XXXX"
  type="text/partytown" // السمة السحرية
/>

النتيجة: يعمل Facebook Pixel على سلسلة محادثات في الخلفية. يقوم بحساب بيانات التتبع دون تجميد زر “أضف إلى سلة التسوق”. INP يتحسن بشكل كبير.

5. التنسيقات الحديثة: رمز أقل للشحن

Polyfills عفا عليها الزمن

هل تدعم إنترنت إكسبلورر 11؟ لا. إيقاف شحن polyfills لـ “Promise”، و”Map”، و”Set”، و”fetch”. اضبط هدف “قائمة المتصفحات” على “الافتراضيات”، وليس IE 11. يؤدي هذا إلى إزالة حوالي 30 كيلو بايت من النفايات القديمة.

ضغط بروتلي

غزيب جيد. بروتلي أفضل. يضغط Brotli (br) JavaScript بنسبة 20% أفضل من Gzip. تأكد من تمكين Brotli الخاص بك على CDN (CloudFront/Vercel).

6. تحسين الصورة: الحمولة المخفية

جافا سكريبت هي عنق الزجاجة لوحدة المعالجة المركزية، ولكن الصور هي عنق الزجاجة لعرض النطاق الترددي. إذا قمت بتحميل ملف PNG بحجم 2 ميجابايت على اتصال 4G، فسيتأخر تنزيل JS. الاستراتيجية:

1. التنسيق: استخدم AVIF. إنه أصغر بنسبة 30% من WebP.
2. التحميل البطيء: <img Loading="lazy"> لكل شيء أسفل الجزء المرئي.
3. الأبعاد: قم دائمًا بتعيين “العرض” و”الارتفاع” لمنع تغييرات التخطيط (CLS).
4. CDN: استخدم Cloudinary أو Imgix لتغيير الحجم بسرعة. image.jpg?w=400&q=auto

7. استراتيجية تحميل الخط

الخطوط تمنع العرض. إذا كان حجم ملفات OTF الخاصة بك 100 كيلو بايت، فسيكون النص غير مرئي (FOIT) لمدة ثانيتين. الإصلاح:

1. المضيف الذاتي: لا تستخدم خطوط Google. بحث DNS يلفت انتباهك.
2. المجموعة الفرعية: قم بإزالة الحروف الرسومية التي لا تستخدمها (على سبيل المثال، الأحرف السيريلية).
3. تبديل العرض: عرض الخط: مبادلة؛. إظهار الخط الاحتياطي على الفور.
4. التحميل المسبق: <link rel="preload" href="/font.woff2" as="font"> لخط العنوان فقط.

8. “تكلفة الاستيراد” DX

المطورين كسالى. إذا كان بإمكانهم استيراد مكتبة، فسيفعلون ذلك. قم بتثبيت ملحق ** تكلفة الاستيراد ** في VS Code. يعرض حجم الاستيراد المضمن أثناء الكتابة.

استيراد {تنسيق} من 'date-fns'؛ // 14 كيلو بايت (ضغط مضغوط) حلقة التعليقات الفورية هذه تجعل المطورين يفكرون مرتين قبل إضافة التبعية.

8. المستقبل: القابلية للاستئناف (Qwik)

العيب الأساسي في React هو الترطيب. الترطيب يعني: “قم بتنزيل HTML. ثم قم بتنزيل JS. ثم قم بتشغيل JS لإرفاق مستمعي الأحداث.” فهو عمل مكرر. أطر عمل مثل Qwik تقدم قابلية الاستئناف. لا يوجد الترطيب. يتم إجراء تسلسل لمستمع الحدث في HTML: <button on:click="./chunk.js#handleClick">. يتم تنزيل JS لمعالج النقرات فقط عندما ينقر المستخدم فعليًا. إذا لم ينقروا مطلقًا، فستقوم بتنزيل 0 كيلو بايت من JS. هذا هو النموذج المثالي لـ “O(1) JavaScript”. نحن نراقب هذا عن كثب لعام 2026.

9. مكونات خادم التفاعل (RSC)

يستخدم جهاز توجيه التطبيقات Next.js RSC. يسمح لك RSC بالاحتفاظ بالتبعيات على الخادم. قبل RSC: استيراد { تنسيق } من 'date-fns'' -> زيادة حزمة العميل بمقدار 20 كيلو بايت. **بعد RSC**: استيراد { تنسيق } من ‘date-fns” -> يعمل على الخادم. يعرض HTML. تزيد حزمة العميل بمقدار 0 كيلو بايت. الاستراتيجية: نقل جميع التنسيقات الثقيلة وجلب البيانات ومعالجة تخفيض السعر إلى مكونات الخادم. احتفظ بمكونات العميل فقط للتفاعل (useState، useEffect). يجب أن تكون “العقد الورقية” مكونات العميل. يجب أن تكون “عقد الحاوية” عبارة عن مكونات الخادم.

9. قاعدة الميزانية البالغة 100 كيلو بايت

لدينا قاعدة صارمة: لا يمكنك دمج العلاقات العامة التي تزيد حجم الحزمة الأولية عن 100 كيلو بايت. نحن نفرض هذا عبر CI. فشل التحقق من حجم الحزمة:

“خطأ: حجم الحزمة الرئيسية هو 105 كيلو بايت. الحد الأقصى هو 100 كيلو بايت.” هذا يفرض المحادثة. “هل نحتاج حقًا إلى هذه المكتبة؟ هل يمكننا تحميلها ببطء؟” إذا لم تقم بتنفيذ ذلك، فإن الحزمة سوف تنمو بلا حدود. يجب على كل KB أن يقاتل من أجل حياته.

10. الاستنتاج

الأداء ليس “من الجميل أن يكون لديك”. إنها الإيرادات. وجدت أمازون أن زمن الوصول الذي يبلغ 100 ملي ثانية كلفها 1% من المبيعات. جافا سكريبت المتضخم هو الكمون. تعامل مع ميزانية حجم الحزمة الخاصة بك مثل الميزانية المالية. إذا تجاوزته، يجب عليك “سداده” عن طريق حذف الرمز.

---

هل موقعك ثقيل؟

هل تظهر نتيجة أداء Lighthouse الخاص بك “تقليل JavaScript غير المستخدمة”؟

تدقيق حزمتي. اقرأ عن Core Web Vitals وEdge Computing.

الأداء ليس “من الجميل أن يكون لديك”. إنها الإيرادات. وجدت أمازون أن زمن الوصول الذي يبلغ 100 ملي ثانية كلفها 1% من المبيعات. جافا سكريبت المتضخم هو الكمون. تعامل مع ميزانية حجم الحزمة الخاصة بك مثل الميزانية المالية. إذا تجاوزته، يجب عليك “سداده” عن طريق حذف الرمز.

هل موقعك ثقيل؟

هل تظهر نتيجة أداء Lighthouse الخاص بك “تقليل JavaScript غير المستخدمة”؟

تدقيق حزمتي. قم بتوظيف مهندسينا.