مفاهيم التجميع: tree shaking وتقسيم الشيفرة
افهم كيفية إزالة المجمّعات للصادرات غير المستخدمة عبر tree shaking وتقسيم المخرجات إلى أجزاء لتحميل الصفحة الأولي بسرعة أكبر.
مفاهيم التجميع: tree shaking وتقسيم الشيفرة درس مجاني في Frontend Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Frontend Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Frontend Academy 4 دروس في المجموع.
ماذا تفعل أداة إنشاء الحزم؟
تقرأ أداة إنشاء الحزم (Vite وwebpack وRollup وParcel) ملفات المصدر، وتحلّ عمليات الاستيراد، وتحول الشفرة (بالترجمة والتصغير والتحسين)، ثم تُخرج ملفات يمكن للمتصفح تحميلها بكفاءة.
رسم الوحدات البياني
تبدأ أداة إنشاء الحزم من نقطة إدخال وتتبع كل عملية استيراد لإنشاء رسم بياني للوحدات — وهو خريطة كاملة لكل الشفرة التي يستخدمها تطبيقك. ويشكّل هذا الرسم أساس جميع التحسينات.
إزالة الشفرة غير المستخدمة — Tree Shaking
يحلّل Tree Shaking رسم الوحدات البياني ويزيل التصديرات التي لم تُستورد مطلقًا. ولا تتيح Tree Shaking سوى عمليات الاستيراد الثابتة لوحدات ES — أما require() في CommonJS فهو ديناميكي ولا يمكن تحليله تحليلاً ثابتًا.
// utils.js
export const add = (a, b) => a + b; // used → included
export const multiply = (a, b) => a * b; // never imported → removed
// app.js
import { add } from './utils.js';
console.log(add(2, 3));التأثيرات الجانبية و sideEffects: false
إذا لم تكن لمكتبتك تأثيرات جانبية (بل مجرد إعادة تصدير نقية)، فأضف "sideEffects": false إلى package.json. ويخبر ذلك أدوات إنشاء الحزم بأنه يمكنها بأمان إزالة أي ملف من حزمتك لم يُستورد.
// package.json of a library:
{
"sideEffects": false
// or list files with side effects:
"sideEffects": ["./src/polyfills.js"]
}تقسيم الشفرة
يقسّم تقسيم الشفرة الحزمة إلى أجزاء متعددة تُحمّل عند الطلب. ويبقى الجزء الرئيسي صغيرًا لتسريع التحميل الأولي. ولا تُحمّل الأجزاء الثانوية إلا عند الحاجة، مثل المسارات الكسولة ومفاتيح الميزات.
تقسيم نقاط الإدخال
تحتوي التطبيقات متعددة الصفحات على نقاط إدخال متعددة، وينتج عن كل منها ملف حزمة خاص به. وتُستخرج الشفرة المشتركة (مثل React) تلقائيًا إلى جزء مشترك.
تقسيم الاستيراد الديناميكي
ينشئ كل استدعاء ديناميكي لـ import() نقطة تقسيم. وتنشئ أداة إنشاء الحزم جزءًا منفصلًا للوحدة المحمّلة بكسل ولجميع تبعياتها الفريدة.
// vite / rollup automatically creates a separate chunk:
const Admin = lazy(() => import('./Admin'));
const Reports = lazy(() => import('./Reports'));تقسيم حزم المورّدين
نادرًا ما تتغير شفرة Node_modules. استخرجها إلى جزء للمورّدين مع مدة طويلة للتخزين المؤقت. ولن يحتاج المستخدمون الذين خزّنوا جزء المورّدين مؤقتًا إلا إلى إعادة تنزيل جزء التطبيق عند إجراء التحديثات.
// vite.config.ts
build: {
rollupOptions: {
output: {
manualChunks: { vendor: ['react', 'react-dom'] }
}
}
}التصغير
تزيل أدوات التصغير (esbuild وterser) المسافات البيضاء، وتعيد تسمية المتغيرات إلى أحرف مفردة، وتطبّق عمليات تقليل أخرى. وينكمش تطبيق React نموذجي بنسبة 60–70% بعد التصغير.
التجزئة المعتمدة على المحتوى
تضيف أدوات إنشاء الحزم تجزئةً لمحتوى الملف إلى اسمه: index-a1b2c3.js. وعندما يتغير المحتوى، تتغير التجزئة ويتغير اسم الملف، فيجلب المتصفح الملف الجديد. أما الأجزاء التي لم تتغير فتُخزّن مؤقتًا إلى أجل غير مسمى.
خرائط المصدر
تربط خرائط المصدر المخرجات المصغّرة بشفرة المصدر الأصلية. وتُنشأ هذه الخرائط بشكل منفصل (ولا تُرسَل إلى المستخدمين)، وتستخدمها أدوات المطور لتصحيح الأخطاء. فعّلها باستخدام build.sourcemap: true.
تحقق سريع
ما المتطلب الأساسي لعمل Tree Shaking؟
مراجعة: مفاهيم إنشاء الحزم
تحل أدوات إنشاء الحزم رسم الوحدات البياني، وتزيل التصديرات غير المستخدمة باستخدام Tree Shaking (الذي يحتاج إلى ESM ثابت)، وتقسّم الشفرة إلى أجزاء للتحميل الكسول، وتستخرج شفرة المورّدين للتخزين المؤقت، وتصغّر المخرجات، وتضيف تجزئات للمحتوى لمنع استخدام النسخ المخزنة مؤقتًا بعد التحديث. وتتيح خرائط المصدر تصحيح أخطاء الشفرة المصغّرة.
الأسئلة الشائعة
هل درس «مفاهيم التجميع: tree shaking وتقسيم الشيفرة» مجاني؟
نعم — نص درس «مفاهيم التجميع: tree shaking وتقسيم الشيفرة» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Frontend Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Frontend Academy 4 دروس في المجموع.
ماذا ستتعلم في «مفاهيم التجميع: tree shaking وتقسيم الشيفرة»؟
افهم كيفية إزالة المجمّعات للصادرات غير المستخدمة عبر tree shaking وتقسيم المخرجات إلى أجزاء لتحميل الصفحة الأولي بسرعة أكبر. تتمرن على Frontend Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Frontend Academy؟
لا تُشترط خبرة سابقة. Frontend Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.
كم من الوقت يستغرق درس «مفاهيم التجميع: tree shaking وتقسيم الشيفرة»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Frontend Academy هذا؟
نعم. كل درس في Frontend Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- وحدات ES: import وexport وdynamic import
- npm وpackage.json: الاعتماديات والبرامج النصية
- Vite: خادم التطوير والبناء
- مفاهيم التجميع: tree shaking وتقسيم الشيفرة