6 نصائح وحيل لضبط الأداء الزاوي

Angular هو إطار عمل JavaScript قوي لبناء تطبيقات الويب ، ولكن مع نمو تطبيقك ، يمكن أن يصبح بطيئًا ويصعب إدارته. يعد ضبط الأداء الزاوي جزءًا مهمًا لضمان تشغيل تطبيق Angular الخاص بك بسلاسة وكفاءة.

في هذه المقالة ، سوف نستكشف بعض النصائح والحيل لتحسين أداء تطبيق Angular الخاص بك ، بما في ذلك تقنيات تحسين وقت التحميل وتقليل حجم التطبيق وتقليل عدد تحديثات DOM غير الضرورية. سواء كنت مطور Angular متمرسًا أو بدأت للتو ، ستساعدك هذه النصائح والحيل على تحسين أداء تطبيقك والتأكد من أنه يعمل بسلاسة لمستخدميك.

لذلك ، لنبدأ بالتقنيات الأساسية لضبط أداء التطبيق الزاوي بسهولة.

نصائح لضبط الأداء الزاوي

هناك العديد من النصائح التي يمكنك من خلالها تحسين أداء تطبيقك الزاوي بسهولة. ومع ذلك ، فقد اخترنا لك أفضل ست نصائح لتحسين التطبيق الزاوي. ها هم:

• استخدام تجميع AoT
• استخدام استراتيجية الكشف عن التغيير عند الدفع
• استخدم الأنابيب النقية
• استخدام TrackBy على ngFor
• تقسيم الكود
• تحسين تحميل الصفحة

دعونا نتعرف على كل منهم بالتفصيل.

استخدام تجميع AoT

إحدى النصائح المهمة لتحسين أداء تطبيق Angular الخاص بك هي استخدام تجميع Ahead-of-Time (AoT). AoT هي تقنية تقوم مسبقًا بتجميع مكونات وقوالب Angular الخاصة بك في وقت الإنشاء ، بدلاً من تجميعها في وقت التشغيل. يمكن أن يؤدي ذلك إلى تحسين وقت تحميل تطبيقك بشكل كبير ، حيث لا يحتاج المتصفح إلى قضاء وقت في تجميع القوالب والمكونات عند تحميل التطبيق لأول مرة.

تساعد AoT أيضًا على تقليل حجم التطبيق الخاص بك عن طريق تضمين القوالب ومصانع المكونات في كود JavaScript. هذا يقلل من عدد طلبات الشبكة اللازمة لتحميل التطبيق ، ويقلل من الحجم الكلي للتطبيق ، مما يمكن أن يساعد في تحسين وقت التحميل.

لتمكين تجميع AoT في تطبيق Angular الخاص بك ، تحتاج إلى استخدام Angular CLI لإنشاء تطبيقك بعلامة "–aot". سيؤدي ذلك إلى تمكين تجميع AoT لتطبيقك ، وسيتم تحسين البنية الناتجة للأداء. بالإضافة إلى ذلك ، يمكنك استخدام أدوات مثل مترجم “ngc” مباشرة ، وهي أداة سطر الأوامر التي يستخدمها Angular CLI لتجميع AoT.

استخدم استراتيجية اكتشاف التغيير عند الدفع

استراتيجية اكتشاف التغيير في OnPush هي طريقة لتحسين أداء تطبيق Angular عن طريق التحقق فقط من التغييرات في أحد المكونات عند تغيير خاصية الإدخال أو إصدار حدث. يتعارض هذا مع إستراتيجية "OnPush" الافتراضية ، التي تتحقق من التغييرات في أحد المكونات وجميع المكونات الفرعية الخاصة به في كل مرة توجد فيها دورة اكتشاف التغيير.

لاستخدام إستراتيجية OnPush ، تحتاج إلى استيراد الوحدة النمطية ChangeDetectorRef وتعيين خاصية changeDetection لمصمم المكونComponent الخاص بك إلى ChangeDetectionStrategy.OnPush.

OnPush هي إستراتيجية قوية يمكنها تحسين أداء تطبيقك ، ولكنها قد تجعله أكثر تعقيدًا. تأكد من اختبار التطبيق الخاص بك بدقة بعد تنفيذ هذه الإستراتيجية للتأكد من أنها تعمل كما هو متوقع.

استخدم الأنابيب النقية

الأنبوب النقي في Angular هو أنبوب يتم تشغيله فقط عندما يكون هناك تغيير في قيمة الإدخال أو المعلمات التي يتم تمريرها إلى الأنبوب. يمكن أن يؤدي ذلك إلى تحسين أداء تطبيق Angular لأنه يقلل من عدد مرات تشغيل الأنبوب.

لإنشاء أنبوب نقي في Angular ، تحتاج إلى إضافة الخاصية النقية: الخاصية الحقيقية إلى مصممPipe للأنبوب الخاص بك.

من المهم ملاحظة أنه عند إنشاء أنبوب نقي ، فإن Angular سيعيد تشغيل الأنبوب فقط عندما تتغير قيمة الإدخال أو المعلمات التي تم تمريرها إلى الأنبوب. إذا كان الأنبوب يعتمد على بيانات أو حالة أخرى لم يتم تمريرها كمدخلات ، فقد لا ينتج الأنبوب الإخراج الصحيح.

تجدر الإشارة أيضًا إلى أنه إذا كان لديك أنبوب خالص داخل أحد المكونات التي تستخدم استراتيجية الكشف عن التغيير في OnPush ، فلن يتم تنفيذ الأنبوب إلا عند إصدار إدخال أو حدث ، مما قد يؤدي إلى زيادة أداء التطبيق الخاص بك.

ضع في اعتبارك أنه إذا كنت تستخدم أنبوبًا خالصًا مع وظيفة معقدة ، فقد يكون له تأثير سلبي على أداء التطبيق الخاص بك لأن الأنبوب لن يتم تنفيذه حتى تتغير قيمة الإدخال. في مثل هذه الحالات ، من الأفضل استخدام أنابيب غير نقية.

استخدام TrackBy على ngFor

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

لاستخدام trackBy في حلقة ngFor ، تحتاج إلى تمرير دالة كقيمة لسمة trackBy. يجب أن تدخل الوظيفة في فهرس العنصر الحالي والعنصر نفسه ، وإرجاع معرف فريد لهذا العنصر.

<div * ngFor = ”دع عنصر العناصر ؛ trackBy: trackByFn ”> {{item.name}} </div>

trackByFn (index: number ، item: any) {

عودة البند.

}

في هذا المثال ، تقوم وظيفة trackByFn بإرجاع المعرف الفريد لكل عنصر كخاصية id الخاصة به.

تقسيم الكود

تقسيم الكود هو تقنية تستخدم لتحسين أداء تطبيقات Angular عن طريق تقليل وقت التحميل الأولي للتطبيق. يتضمن تقسيم رمز التطبيق إلى أجزاء أصغر وأكثر قابلية للإدارة يمكن تحميلها عند الطلب أثناء تنقل المستخدم عبر التطبيق.

يسمح هذا للتطبيق بتحميل الشفرة المطلوبة فقط للصفحة الحالية ، بدلاً من تحميل كل الشفرة مرة واحدة ، مما قد يؤدي إلى تحسين وقت التحميل الأولي للتطبيق بشكل كبير. يمكن تنفيذ هذه التقنية باستخدام وحدة التوجيه الزاوي وخاصية loadChildren.

تحسين تحميل الصفحة

هناك عدة طرق لتحسين تحميل الصفحة لتطبيق Angular ، ومنها ما يلي:

1. تقسيم الكود: كما ذكرنا سابقًا ، تقسيم الكود هو أسلوب يتضمن تقسيم كود التطبيق إلى أجزاء أصغر يمكن تحميلها عند الطلب. يمكن أن يؤدي ذلك إلى تحسين وقت التحميل الأولي للتطبيق بشكل ملحوظ.
2. التحميل الكسول: التحميل الكسول هو تقنية تتضمن تحميل الوحدات فقط عند الحاجة إليها. يمكن أن يساعد هذا أيضًا في تحسين وقت التحميل الأولي للتطبيق عن طريق تقليل مقدار التعليمات البرمجية التي يجب تحميلها عند التحميل الأولي.
3. تحسين الصور: يمكن أن يساعد تحسين الصور عن طريق ضغطها واستخدام تنسيق الصورة المناسب أيضًا في تحسين تحميل الصفحة عن طريق تقليل حجم الصور التي تحتاج إلى تنزيل.
4. استخدام التخزين المؤقت للمتصفح: يمكن أن يساعد تمكين التخزين المؤقت للمستعرض أيضًا في تحسين تحميل الصفحة من خلال السماح للمستعرض بتخزين الموارد محليًا ، بحيث لا يلزم تنزيلها مرة أخرى.

الكلمات الأخيرة

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

Smarsh Infotech ، شركة تعهيد خدمات تكنولوجيا المعلومات الشهيرة يمكن أن تكون شريكك في تطوير التطبيقات في المستقبل. إذا كنت تخطط لتطوير عملك على المنصات الرقمية ، فيمكننا مساعدتك بأي طريقة ممكنة. دعنا نتواصل ونناقش أفكار مشروعك.

اقرأ أيضًا: The New Angular 14: اقرأ كل شيء عنها