راقِب أحجام الحِزم بمرور الوقت للحرص على أن يظل تطبيقك سريعًا.
إنّ تحسين أحد تطبيقات Angular أمر مهم، ولكن كيف تتأكد من عدم تراجع أدائه بمرور الوقت؟ من خلال تقديم مقاييس الأداء ومراقبتها عند تغيير كل رمز!
من بين المقاييس المهمة حجم JavaScript الذي يتم شحنه مع تطبيقك. يمكنك التأكّد من استمرار عمليات التحسين بمرور الوقت، من خلال تقديم ميزانية للأداء تراقبها في كل طلب إصدار أو سحب.
احتساب الميزانية المرتكزة على الأداء
يمكنك استخدام حاسبة الميزانية على الإنترنت هذه لتقدير مقدار محتوى JavaScript الذي يمكن لتطبيقك تحميله، وذلك استنادًا إلى وقت التفاعل الذي تستهدفه.
ضبط ميزانية الأداء في Angular CLI
بعد ضبط ميزانية مستهدَفة للغة JavaScript، يمكنك فرضها باستخدام واجهة سطر الأوامر Angular (CLI). للتعرّف على آلية عمل ذلك، يمكنك الاطّلاع على نموذج التطبيق هذا على GitHub.
سيظهر لك أنّه تم إعداد الميزانية التالية في "angular.json":
"budgets": [{
"type": "bundle",
"name": "main",
"maximumWarning": "170kb",
"maximumError": "250kb"
}]
في ما يلي ملخّص لما يتم تحديده:
- تتوفّر ميزانية لحزمة JavaScript باسم
main. - إذا زاد حجم حزمة
mainعن 170 كيلوبايت، ستعرض Angular CLI تحذيرًا في وحدة التحكّم عند إنشاء التطبيق. - إذا زاد حجم حزمة
mainعن 250 كيلوبايت، لن ينجح الإصدار.
الآن حاول إنشاء التطبيق من خلال تشغيل ng build --prod.
من المفترض أن يظهر لك هذا الخطأ في وحدة التحكّم:
لإصلاح خطأ الإصدار، يُرجى الاطّلاع على app.component.ts، والتي تتضمّن عملية استيراد من rxjs/internal/operators. هذا استيراد خاص من غير المفترض أن يستخدمه مستهلكو rxjs. فهو يزيد حجم الحزمة كثيرًا! عند التحديث إلى عملية الاستيراد الصحيحة، rxjs/operators، ثم إعادة تشغيل الإصدار، سترى أنّه يجتاز فحص الميزانية بنجاح.
تجدر الإشارة إلى أنّه بسبب تفعيل التحميل التفاضلي تلقائيًا في واجهة سطر الأوامر Angular CLI، سينتج عن الأمر ng build إصداران للتطبيق:
- إصدار للمتصفّحات مع دعم ECMAScript 2015. يتضمن هذا الإصدار عددًا أقل من رموز polyfills وإنشاء بنية JavaScript أكثر حداثة. بناء الجملة هذا أكثر تعبيرًا، مما يؤدي إلى حزم أصغر.
- إصدار للمتصفّحات الأقدم بدون دعم ECMAScript 2015. بناء الجملة القديم أقل تعبيرًا ويتطلب المزيد من رموز polyfill، مما يؤدي إلى حزم أكبر.
يشير الملف index.html في نموذج التطبيق إلى كلا الإصدارين حتى يمكن للمتصفّحات الحديثة الاستفادة من الإصدار الأصغر ECMAScript 2015، ويمكن استخدام إصدار ECMAScript 5 من المتصفحات الأقدم.
فرض ميزانيتك كجزء من عملية الدمج المستمر
يوفّر التكامل المستمر (CI) طريقة ملائمة لمراقبة ميزانية تطبيقك بمرور الوقت. ولحسن الحظّ، فإنّ أسرع طريقة لضبط ذلك هي إنشاء تطبيقك باستخدام Angular CLI بدون الحاجة إلى اتّخاذ أي خطوات إضافية. وعندما تتجاوز حزمة JavaScript الميزانية، سيتم إنهاء العملية برمز 1، وسيتعذّر الإصدار.
يمكنك أيضًا فرض ميزانية للأداء باستخدام bundlesize وLighthouse، إذا كنت تفضّل ذلك. يكمن الاختلاف الرئيسي بين ميزانيات الأداء في Angular CLI وLighthouse في وقت تنفيذ عمليات التحقّق. يجري Angular CLI عمليات التحقق في وقت الإنشاء، ويفحص أصول الإنتاج ويتحقق من أحجامها. ومع ذلك، تفتح أداة Lighthouse الإصدار المنشور من التطبيق وتقيس حجم مادة العرض. كِلا الأسلوبين يشملان جوانب سلبية وإيجابية. إنّ التحقق من أداء Angular CLI أقل قوة ولكنه أسرع بكثير نظرًا لأنه بحث عن قرص واحد. ومن ناحية أخرى، يمكن لـ Light Wallet of Lighthouse إجراء فحص دقيق للغاية من خلال النظر في الموارد التي يتم تحميلها ديناميكيًا، ولكنها تحتاج إلى نشر التطبيق وفتحه في كل مرة يتم تشغيله.
يشبه حجم الحزم إلى حد كبير فحص الميزانية في Angular CLI؛ الفرق الرئيسي هو أن packagesize يمكن أن يعرض نتائج الشيك مباشرة في واجهة مستخدم GitHub.
الخلاصة
يمكنك وضع ميزانيات متعلقة بالأداء باستخدام Angular CLI للتأكّد من عدم تراجع مستوى أداء تطبيقك على Angular بمرور الوقت.
- حدِّد أساسًا لحجم المورد باستخدام حاسبة للميزانية أو باتّباع ممارسات مؤسستك.
- ضبط ميزانيات الحجم في
angular.jsonضمنprojects.[PROJECT-NAME].architect.build.configurations.production.budgets - سيتم فرض الميزانيات تلقائيًا على كل إصدار باستخدام واجهة سطر الأوامر Angular.
- ننصحك بتقديم ميزة مراقبة الميزانية كجزء من الدمج المستمر (وهو ما يمكن تحقيقه أيضًا باستخدام واجهة سطر الأوامر Angular).