الواجهات الأمامية المصغّرة: Module Federation
استخدم Webpack Module Federation أو Vite Federation لتقسيم واجهة أمامية كبيرة إلى وحدات بعيدة مستقلة النشر يستهلكها تطبيق shell
الواجهات الأمامية المصغّرة: Module Federation درس مجاني في Frontend Academy على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Frontend Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Frontend Academy 4 دروس في المجموع.
ما الواجهات الأمامية المصغّرة؟
تقسيم واجهة أمامية كبيرة إلى أجزاء تُطوَّر وتُنشر بشكل مستقل، عادةً جزء واحد لكل فريق أو مجال أعمال. يمكن أن يكون لكل جزء إطاره البرمجي ومستودعه ومسار النشر وحتى حزمة تقنياته الخاصة. ويربط تطبيق shell هذه الأجزاء أثناء وقت التشغيل.
لماذا الواجهات الأمامية المصغّرة؟
تواجه المؤسسات التي تضم أكثر من 10 فرق للواجهة الأمامية حدودًا مثل اختناق المستودع الواحد، وبطء أوقات البناء، وتعارض جداول الإصدارات. وتتيح الواجهات الأمامية المصغّرة للفرق الشحن بشكل مستقل، مقابل زيادة التعقيد المعماري.
Module Federation — التقنية الأساسية
تتيح Webpack Module Federation (في Webpack 5، وكذلك Vite عبر إضافة) لتطبيق shell استيراد شيفرة من remotes منشورة بشكل مستقل أثناء وقت التشغيل. يعرّض remote وحدات محددة، ويستهلكها shell.
تهيئة Remote
يعرّض تطبيق remote وحداته عبر تهيئة webpack.
// remote app: webpack.config.js
const { ModuleFederationPlugin } = require('webpack').container;
module.exports = {
output: { publicPath: 'https://product-team.example.com/' },
plugins: [
new ModuleFederationPlugin({
name: 'productApp',
filename: 'remoteEntry.js',
exposes: {
'./ProductPage': './src/ProductPage',
'./productClient': './src/api/client'
},
shared: ['react', 'react-dom']
})
]
};تهيئة Shell (Host)
يعلن shell عن remotes التي يستوردها.
// shell app: webpack.config.js
module.exports = {
plugins: [
new ModuleFederationPlugin({
name: 'shell',
remotes: {
product: 'productApp@https://product-team.example.com/remoteEntry.js'
},
shared: ['react', 'react-dom']
})
]
};استيراد وحدات Remote
استخدم الاستيراد الديناميكي؛ إذ يحلّه webpack عبر runtime الخاص بـfederation.
// shell src/App.tsx
import { lazy, Suspense } from 'react';
const ProductPage = lazy(() => import('product/ProductPage'));
function App() {
return (
<Suspense fallback={<Spinner />}>
<ProductPage />
</Suspense>
);
}Vite Federation
يدعم Vite Module Federation عبر الإضافة @originjs/vite-plugin-federation، باستخدام API مشابه.
// vite.config.ts
import federation from '@originjs/vite-plugin-federation';
export default {
plugins: [federation({
name: 'shell',
remotes: { product: 'https://product-team.example.com/remoteEntry.js' },
shared: ['react', 'react-dom']
})]
};التبعيات المشتركة
أدرج مكتبات مثل React في shared حتى لا تُضمَّن مرتين. يحل runtime الخاص بـfederation أعلى إصدار متوافق أثناء وقت التشغيل.
النشر المستقل
يمتلك كل remote مسار بناء/نشر خاصًا به. ويشير shell إلى عنوان URL؛ لذلك يؤدي دفع remote جديد إلى نشره تلقائيًا لجميع المستهلكين.
التواصل بين التطبيقات
لا تشارك الحالة عبر عمليات الاستيراد المباشرة؛ استخدم الأحداث (CustomEvent)، أو ناقلًا مشتركًا صغيرًا، أو postMessage. حافظ على نظافة الحدود للحفاظ على الاستقلالية.
البدائل: iframes وWeb Components
توفّر iframes أقوى عزل، لكنها تجعل التنقّل والتعامل مع CSS أقل سلاسة. أما Web Components فتوفّر دعماً أصلياً من المتصفح، ولا تقيّدك بإطار عمل معيّن، لكن إمكانات الحالة المشتركة فيها محدودة. يوازن Module Federation بين العزل وتجربة المطوّر.
المفاضلات
المزايا: النشر المستقل، وحرية اختيار التقنيات، واستقلالية الفرق. التكاليف: إعداد معقّد لعملية البناء، وتعارضات في التبعيات المشتركة، وأخطاء وقت التشغيل التي يصعب تصحيحها، وزيادة تعقيد الحزمة. لا يستحق ذلك إلا في المؤسسات الكبيرة فعلاً.
متى ينبغي تجنّبه
المشاريع التي يديرها فريق واحد، ونسخ MVP، والمواقع التي يقل عدد الموظفين العاملين على واجهتها الأمامية عن 100 موظف. ضريبة التعقيد حقيقية — لذا ينبغي لمعظم الفرق استخدام monorepo بدلاً من ذلك.
اختبار سريع
ما الذي يتيحه Webpack Module Federation في بنية micro-frontend؟
مراجعة: Micro-frontends
قسّم الواجهة الأمامية حسب الفريق أو المجال لتحقيق النشر المستقل. يتيح Module Federation (webpack 5 / Vite plugin) للـ shell الاستيراد من remotes وقت التشغيل. يعرّض Remote الوحدات، ويصرّح shell بالـ remotes، ويتشارك كلاهما تبعيات مثل react. استخدم الأحداث للتواصل بين التطبيقات. هذه البنية معقّدة، فاحجز استخدامها للمؤسسات الكبيرة فعلاً.
الأسئلة الشائعة
هل درس «الواجهات الأمامية المصغّرة: Module Federation» مجاني؟
نعم — نص درس «الواجهات الأمامية المصغّرة: Module Federation» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Frontend Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Frontend Academy 4 دروس في المجموع.
ماذا ستتعلم في «الواجهات الأمامية المصغّرة: Module Federation»؟
استخدم Webpack Module Federation أو Vite Federation لتقسيم واجهة أمامية كبيرة إلى وحدات بعيدة مستقلة النشر يستهلكها تطبيق shell تتمرن على Frontend Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Frontend Academy؟
لا تُشترط خبرة سابقة. Frontend Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.
كم من الوقت يستغرق درس «الواجهات الأمامية المصغّرة: Module Federation»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Frontend Academy هذا؟
نعم. كل درس في Frontend Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- التصميم الذري: الذرات والجزيئات والكائنات
- إعداد Monorepo باستخدام Turborepo
- الواجهات الأمامية المصغّرة: Module Federation
- هيكل المجلدات القائم على الميزات