Angular هو إطار تطوير تطبيقات الويب أحادي الصفحة الأكثر شيوعًا ، على الرغم من أن هذا لا يعني أن التطبيقات Angular يمكن أن تحتوي على صفحة واحدة فقط. باستخدام هذا الإطار ، يمكنك إنشاء مواقع تتكون من عشرات الصفحات. تم تحسين الإصدار الأخير من Angular ، بفضل جهود فريق التطوير ومجتمع المتحمسين. ومع ذلك ، عندما يتعلق الأمر بتطبيق معين ، لا ينبغي لأحد أن ينسى بعض الأشياء التي تؤثر على أدائه.
سوف تكشف المادة ، التي نترجمها اليوم ، عن ستة مجالات لتحسين التطبيقات الزاوية.
1. كسل التحميل والتحسين من الحزمة الرئيسية
إذا لم يتم استخدام التحميل البطيء عند إعداد إصدار الإنتاج للتطبيق ، فمن المحتمل أن ترى الملفات التالية على الأرجح في مجلد
dist .
polyfills.js scripts.js runtime.js styles.css main.js
يسمح
polyfills.js ملف
polyfills.js بالتأكد من أن التطبيق المكتوب باستخدام أحدث ميزات تكنولوجيا الويب متوافق مع مختلف المتصفحات.
يحتوي ملف
script.js على البرامج النصية الموضحة في قسم
scripts لملف
angular.json . هنا مثال بسيط لمثل هذا القسم.
"scripts": [ "myScript.js", ]
الملف
runtime.js هو أداة تحميل Webpack. أنه يحتوي على أدوات Webpack اللازمة لتنزيل الملفات الأخرى.
يحتوي ملف
styles.css على الأنماط المعلنة في قسم
styles في ملف
angular.json . هنا مثال على هذا القسم.
"styles": [ "src/styles.css", "src/my-custom.css" ],
يخزن ملف
main.js جميع رموز التطبيق ، بما في ذلك المكونات (TS ، HTML و CSS code) ، خطوط الأنابيب ، التوجيهات ، الخدمات ، والوحدات النمطية المستوردة (بما في ذلك الوحدات الخارجية).
أثناء نمو التطبيق
main.j ملف
main.j يمكن أن يتحول هذا إلى مشكلة ، لأنه من أجل تشكيل صفحة ، يحتاج المستعرض ، بالإضافة إلى حل المهام الأخرى المتعلقة بتصور البيانات ، إلى تنزيل ملف
main.js . إذا كان هذا الملف كبيرًا بدرجة كافية ، فستكون معالجته مهمة شاقة ليس للجوال فحسب ، بل لمتصفحات سطح المكتب أيضًا.
أسهل طريقة لحل هذه المشكلة هي تقسيم التطبيق إلى عدة وحدات ، والتي تستخدم تقنية التحميل البطيئة. باستخدام هذا النهج ، تقوم Angular بإنشاء ملف منفصل لكل وحدة ، ولن يتم تنزيله حتى يصبح ضروريًا (عادةً عند تنشيط مسار معين).
من أجل توضيح تطبيق تقنية التحميل البطيئة ، تم إنشاء
app.component -
app.component و
second.component . كلاهما في وحدة
app.module ، لا يتم تطبيق التحميل
app.module عند العمل معهم.
المكون
app.component بسيط للغاية. يعرض زرين ، أحدهما مسؤول عن التبديل إلى
second.component ، والثاني يؤدي إلى
app.component .
مكون التطبيقيحتوي قالب المكون
Second على جزء كبير جدًا من النص بحجم تخزينه حوالي 1 ميغابايت.
المكون الثانينظرًا لعدم تطبيق تقنية التحميل
main.js هنا ،
main.js على ملف
main.js كبير يحتوي على كود
app.component و
second.component .
إذا قمت بفتح أدوات مطور Chrome
main.js إلى علامة التبويب "الشبكة" ، يمكنك تقدير حجم ملف
main.js وهي 1.3 ميغابايت.
تحليل أحجام الملفات باستخدام أدوات مطوّر برامج Chromeالمشكلة هنا هي أنه في معظم الأوقات عند العمل مع مشروعنا ، سيكون المستخدم على صفحته الرئيسية ، وليس في بعض الصفحات الأخرى ، لذلك فإن تنزيل جميع الشفرات كملف واحد ليس فكرة جيدة. يمكن إخراج رمز المكون الثاني في وحدة منفصلة ، والتي لن يتم تحميلها إلا إذا انتقل المستخدم إلى الصفحة المقابلة. هذا يترجم إلى انخفاض كبير في ملف
main.js ، والذي يعطي
main.js سريعًا للغاية على الصفحة الرئيسية للموقع.
عند استخدام تقنية التحميل البطيئة ، بعد الانتهاء من عملية بناء المشروع ، سيتم إنشاء ملف مثل
4.386205799sfghe4.js . هذا هو المكان الذي سيتم تخزين الرمز فيه ولن يتم تحميله عند تحميل الموقع لأول مرة. نتيجة لذلك ، إذا قمت الآن بفتح الموقع وتحليله ، اتضح أن أحجام
main.js هي 266 كيلو بايت فقط.
تقليص main.jsيتم تنزيل ملف إضافي كبير بحجم 1 ميغابايت فقط بعد الانتقال إلى الصفحة ذات الصلة.
قم بتنزيل ملف إضافيلقد طبقنا التحميل الكسول ، لكن لا يمكننا القول أن هذا الحل يناسبنا تمامًا. والحقيقة هي أن هذا النهج يبطئ عملية الانتقال الأولى للمستخدم إلى الصفحة ، والتي تحتاج إلى ملف كبير منفصل منفصل لإخراجها. لحسن الحظ ، يوفر Angular وسيلة لحل هذه المشكلة. وهي نتحدث عن تقنية
PreloadingStrategy .
باستخدامه ، يمكننا أن نقول للإطار أنه بعد تحميل الوحدة الرئيسية (ملف
main.js ) ومعالجتها ، يتم
main.js في الخلفية وحدات أخرى. نتيجة لذلك ، عندما ينتقل المستخدم إلى صفحة كانت تتطلب سابقًا عرض ملف كبير ، اتضح أنه تم تنزيل الملف بالفعل. فيما يلي نموذج تعليمة برمجية يقوم بتحميل جميع الوحدات مسبقًا.
import { PreloadAllModules, RouterModule } from '@angular/router'; RouterModule.forRoot( [ { path: 'second', loadChildren: './second/second.module#SecondModule' } ], {preloadingStrategy: PreloadAllModules})
عند تطبيق التحميل الكسول عند تحسين التطبيقات Angular ، يوصى بالسعي لتقسيم المشروع إلى أكبر عدد ممكن من الوحدات. بالإضافة إلى ذلك ، تحتاج إلى الانتباه إلى تحميلها مسبقًا. سيمكن ذلك من جعل ملف
main.js صغيرًا ، مما يعني سرعة تحميل وعرض الصفحة الرئيسية للمشروع.
2. تحليل الحزمة باستخدام Webpack Bundle Analyzer
إذا كان الأمر كذلك ، بعد تقسيم منطق المشروع إلى العديد من الوحدات ، فقد تبين أن
main.js لا تزال كبيرة جدًا (بالنسبة للتطبيقات الصغيرة والمتوسطة الحجم ، يقترح مؤلف هذه المادة اعتبار الملف أكبر من 1 ميغابايت) ، يمكنك متابعة تحسين التطبيق باستخدام Webpack Bundle Analyzer. تسمح لك حزمة npm هذه بتصور نتائج Webpack في بنية شجرة تدعم التكبير / التصغير. من أجل استخدام Webpack Bundle Analyzer ، قم بتثبيته في مشروع Angular كاعتماد على التطوير.
npm install --save-dev webpack-bundle-analyzer
ثم نقوم بتعديل قسم
script لملف
package.json بإضافة النص التالي إليه.
"bundle-report": "ng build --prod --stats-json && webpack-bundle-analyzer dist/stats.json"
يرجى ملاحظة أن عنوان الملف
dist/stats.json قد يكون مختلفًا في مشروعك. على سبيل المثال ، إذا كنت قد أنهيت ملفات الحزمة في مجلد
dist/browser ، فستحتاج إلى إعادة كتابة السطر أعلاه مثل هذا:
dist/browser/stats.json .
الآن قم بتشغيل المحلل.
npm run bundle-report
بعد تنفيذ هذا الأمر ، سيتم إنشاء تجميع إنتاج التطبيق وسيتم عرض إحصائيات كل حزمة. إليك ما تبدو عليه نتيجة تصور هذه البيانات.
تحليل المشروع باستخدام Webpack Bundle Analyzerالآن يمكنك تحليل تكوين كل حزمة. هذه أداة مفيدة للغاية تتيح لك تحديد التبعيات التي يمكنك الاستغناء عنها.
3. إنشاء عدة وحدات صغيرة للمشاركة
تساهم الوحدات التي تشترك في أجزاء مختلفة من التطبيق في تنفيذ مبدأ
DRY ، ولكن في بعض الأحيان ، تصبح الوحدات أكثر فأكثر ، كلما تطور التطبيق ، أكثر فأكثر. على سبيل المثال ، إذا كان لدينا وحدة
SharedModule معينة تحتوي على العديد من الوحدات النمطية الأخرى ، والمكونات ، وخطوط الأنابيب ، فإن استيراد هذه الوحدة النمطية إلى
app.module سيزيد من حجم الحزمة
main.js ، لأن هذه الخطوة لن تؤدي فقط إلى استيراد ما تحتاج إليه
main.js ، ولكن أيضا كل ما هو في
SharedModule . لتجنب هذا الموقف ، يمكنك إنشاء وحدة نمطية أخرى ، مثل
HomeSharedModule ، تم تصميمها ليتم مشاركتها بواسطة الوحدة الرئيسية ومكوناتها.
يعد وجود عدة وحدات مخصصة للمشاركة في المشروع أفضل من وجود وحدة نمطية واحدة فقط ، وعادة ما يكون لها أحجام كبيرة.
4. استخدام تقنية التحميل البطيئة للصور غير المرئية على الصفحة
عند تحميل الصفحة الرئيسية للتطبيق لأول مرة ، قد يتضح أنه يحتوي على صور غير مرئية للمستخدم (فهي خارج منطقة العرض). من أجل رؤيتهم ، تحتاج إلى التمرير الصفحة. لكن هذه الصور غير المرئية يتم تحميلها عند تحميل الصفحة. إذا كان هناك الكثير منها ، فسيؤثر ذلك على سرعة تحميل الصفحة. للتعامل مع هذه المشكلة ، يمكنك تطبيق تقنية التحميل البطيئة على الصور ، وتحميلها فقط عندما يصل المستخدم إليها. هناك أداة JS واحدة مفيدة ،
Intersection Observer ، مما يجعل من السهل تنفيذ تحميل الصور البطيئة. علاوة على ذلك ، من أجل إعادة الاستخدام ، على أساس ذلك يمكنك إنشاء توجيه مناسب. تفاصيل حول هذا يمكن العثور عليها
هنا .
5. باستخدام التمرير الظاهري لقوائم طويلة
الإصدار السابع من Angular لديه القدرة على استخدام
التمرير الظاهري . تقوم هذه التقنية بتحميل العناصر إلى DOM وتفريغها بناءً على مقدار القائمة المرئية للمستخدم. هذا يسرع إلى حد كبير عمل التطبيقات التي تستخدم قوائم طويلة.
يتم عرض عناصر القائمة المرئية فقط على الصفحة.6. استخدام استراتيجية FOUT للعمل مع الخطوط بدلاً من استراتيجية FOIT
تستخدم العديد من المواقع الخطوط المخصصة. عادةً ما تبدو جذابة للغاية ، لكن تطبيقها يخلق عبئًا إضافيًا على المتصفح ، حيث يتعين عليه تنزيل هذه الخطوط وإعدادها للعمل. عند استخدام خطوط غير قياسية ، على سبيل المثال ، تم تنزيلها من خدمة تابعة لجهات خارجية مثل Google Fonts ، يكون السيناريوهان التاليان ممكنان:
- يقوم المتصفح بتنزيل الخط ومعالجته ثم يعرض النص فقط. حتى يصبح الخط جاهزًا للاستخدام ، سيكون النص المكتوب في هذا الخط غير مرئي. وهذا ما يسمى FOIT (فلاش من النص غير المرئي).
- يعرض المستعرض في البداية نصًا باستخدام خط قياسي ، أثناء تحميل خط خارجي. عندما يكون هذا الخط جاهزًا للاستخدام ، يتغير الخط القياسي إلى هذا الخط المحدد. نتيجة لذلك ، اتضح أنه سيتم عرض النص على الصفحة بخط قياسي حتى يتم تحميل خط خاص ، وبعد ذلك سيتم عرض النص مرة أخرى ، ولكن بخط جديد. وهذا ما يسمى FOUT (فلاش من النص unstyled).
تستخدم معظم المتصفحات خطوطًا غير قياسية باستخدام استراتيجية FOIT ؛ يتم استخدام استراتيجية FOUT فقط في Internet Explorer. من أجل استخدام FOUT بدلاً من FOIT ، يمكنك استخدام واصف
font-display لـ
@font-face ، وإخبار المستعرض ما إذا كنا نريد عرض النص في خط قياسي أولاً ، ثم لنا ، أو سنكون راضين عن فترة معينة من عدم ظهور النص . إذا كنت مهتمًا بموضوع الخطوط - ألق نظرة على
هذه المواد. على وجه الخصوص ، هنا يمكنك العثور على معلومات حول ميزات الخطوط والتوصيات المتعلقة باختيار استراتيجيات FOIT أو FOUT.
ملخص
نظرنا هنا إلى العديد من التقنيات لتحسين التطبيقات الزاوية. في الواقع ، هناك الكثير. على وجه الخصوص ، نحن نتحدث عن تقديم الخادم ، واستخدام عمال الخدمة ، وصفحات AMP. تعتمد سرعة التحسين واختيار أساليبه على مشروع محدد - على ميزاته وأهدافه.
أعزائي القراء! ما الأساليب التي تستخدمها لتحسين التطبيقات الزاوية؟
