79. البناء للإنتاج: تجميع AOT والتجميع في حزم (Bundling)

عند نشر تطبيق Angular، يجب عليك تحسينه للسرعة والحجم. يتعامل أمر ng build --configuration=production مع هذا باستخدام تقنيات رئيسية.

1. التجميع المسبق (Ahead-of-Time - AOT Compilation)

افتراضياً، يقوم ng build --prod بتمكين AOT.

• JIT (Just-in-Time - أثناء التشغيل، للتطوير): يجمع التطبيق في المتصفح في وقت التشغيل. هذا سريع لإعادة بناء التطوير ولكنه بطيء للمستخدمين.
• AOT (Ahead-of-Time - مسبقاً، للإنتاج): يتم تشغيل مُصرف Angular أثناء عملية البناء على الخادم (أو جهاز البناء)، مما يحول قوالب Angular والتعليمات البرمجية إلى JavaScript عالي الكفاءة قبل النشر.

فوائد AOT:

• عرض أسرع (Faster Rendering): يقوم المتصفح بتنزيل JavaScript قابل للتنفيذ، وليس قوالب ومُصرف Angular.
• حجم أصغر (Smaller Size): يلغي الحاجة إلى شحن مُصرف Angular (وهو كبير).
• اكتشاف الأخطاء المبكر: يتم اكتشاف أخطاء ربط القالب في وقت البناء، وليس في وقت التشغيل.

2. التجميع في حزم (Bundling) وإزالة التعليمات البرمجية غير المستخدمة (Tree-Shaking)

1. التجميع في حزم (Bundling): دمج العديد من ملفات التطبيق في عدد قليل من الملفات الكبيرة (حزم أو أجزاء) لتقليل طلبات HTTP.
2. إزالة التعليمات البرمجية غير المستخدمة (Tree-Shaking): إزالة التعليمات البرمجية غير المستخدمة (dead code elimination). إذا قمت باستيراد مكتبة ولكنك استخدمت 1% فقط من وظائفها، فإن Tree-Shaking يتجاهل 99% الأخرى أثناء بناء الإنتاج.

3. التهيئة في angular.json

تطبق علامة --configuration=production إعدادات التحسين المحددة في angular.json:

"production": { "optimization": true, "outputHashing": "all", "sourceMap": false, "namedChunks": false, "aot": true, "buildOptimizer": true }

تؤدي هذه التحسينات إلى حزمة تطبيق أصغر وأسرع جاهزة للنشر.