اختر صفحة

Vue.js ، أو المعروف أكثر باسم Vue فقط ، هو إطار عمل تطوير ويب تقدمي مفتوح المصدر يعتمد على جافا سكريبت يستخدم لإنشاء واجهات حديثة من جانب العميل وتطبيقات ديناميكية أحادية الصفحة (SPAs). وهي تنفذ بنية نموذج عرض نموذج (MVVM) تقترح بنية قابلة للتكيف تركز على تكوين المكونات والعرض التقريري ، مما يسمح للمطورين بدمجها بسهولة مع المشاريع الأخرى والمكتبات الحالية. بالاقتران مع الأدوات الخارجية والمكتبات المدعومة ، تقدم Vue نهجا مختلفا لتطوير SPAs قوية. أثرت AngularJS بشكل كبير على تصميم Vue منذ أن أنشأه Evan You ، وهو مهندس برمجيات سابق في Google. جاء الإصدار الأول من Vue في فبراير من عام 2014 ويتم صيانته اليوم من قبل إيفان يو نفسه والمطورين الآخرين القادمين من شركات مثل Netguru و Netlify.

إن قدرة Vue العالية على فك الارتباط هي ما يميزها عن أطر التطوير والمكتبات الأمامية الأخرى مثل Angular و Vue. هذا يعني أنه من السهل جدا توسيع وظائفه حيث يتم تضمين الوحدات النمطية في التطبيق. بالإضافة إلى ذلك ، واحدة من أعظم مزايا Vue .js هي صغر حجمها. حجم هذا الإطار هو 18-21KB ، مما يعني أنه يتمتع بأداء رائع.

 

لماذا تعتبر تطبيقات Vue لاختبار التحميل مهمة؟

تؤثر تجربة المستخدم السلسة والودية بشكل كبير على نجاح مواقع الويب وتطبيقات الويب اليوم. فقط تلك التطبيقات التي يمكنها تقليل أوقات استجابتها بشكل فعال وتحسين أدائها العام يمكنها الاحتفاظ بمشاركة المستخدم ، وفي النهاية ، البقاء على قيد الحياة في السوق التنافسية اليوم. ولوضع أهمية المسألة في منظورها الصحيح، فقدت بوابة بي بي سي الجديدة حوالي 10 في المائة من مشاركة المستخدمين لكل ثانية إضافية استغرقها الموقع لتحميله. في دراسة أخرى ، وجدت DoubleClick by Google أن مواقع الويب التي تم تحميلها في غضون 5 ثوان لديها جلسات أطول بنسبة 70 في المائة ومشاركة مستخدم أفضل بشكل عام من مواقع الويب التي استغرقت ما يقرب من أربعة أضعاف الوقت.

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

 

أدوات Vue الأصلية لتحسين أوقات التحميل والأداء العام

دعونا نلقي نظرة على بعض الأدوات المعروفة لمراقبة وتحسين أوقات التحميل والأداء العام لتطبيقات Vue.

 

Vue Performance DevTools

Vue Performance DevTool هو امتداد متصفح متاح لمتصفح Chrome و Firefox تم إنشاؤه بواسطة Vue DevTool ، مما يساعد المطورين على فحص أداء مكونات Vue. يختبر الملحق إحصائيا أداء مكونات Vue عن طريق جمع القياسات من خلال واجهة برمجة تطبيقات window.performance. أثرت أداة DevTool للأداء React على تطوير نظيرتها Vue بعد فترة وجيزة. يساعد ملحق المتصفح على إلغاء تحميل مثيلات المكونات التي لا يستخدمها التطبيق ، وفحص ما يؤخر العمليات وفحص المكونات التي تستغرق وقتا أطول لتقديمها.

 

مَنَارَة

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

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

يوفر Dotcom-Monitor أيضا اختبارا مجانيا لسرعة موقع الويب للمطورين ومسؤولي مواقع الويب لتحليل أوقات سرعة تحميل صفحات الويب الخاصة بهم من أكثر من 20 موقعا عالميا. بعد إجراء اختبار السرعة ، ستتلقى مخططا شلاليا ، بالإضافة إلى تقرير Lighthouse الذي سيفصل المناطق التي يتم فيها تحسين عناصر الصفحة بشكل مناسب ، حيث لا تكون العناصر كذلك ، بالإضافة إلى تفصيل الفرص التي تحتاج إلى إجراء تغييرات. يمكن لأي تغييرات على الصفحة يمكن أن تقلل من وقت تحميل الصفحة ، حتى لو كان بضع ميلي ثانية فقط ، أن تحدث فرقا كبيرا للمستخدمين. عند إضافة محتوى جديد وإزالته وتغييره على صفحات الويب بمرور الوقت ، ينسى معظم مطوري الويب التحقق من كيفية تأثير هذه التغييرات على الأداء. على سبيل المثال ، يمكن أن يكون الأمر بسيطا مثل ضمان ضغط الصور وليس كبيرا جدا ، أو إزالة أي جافا سكريبت أو CSS غير مستخدم ، أو أي مشكلات في التعليمات البرمجية لجهة خارجية.

تعرف على المزيد حول أداة اختبار سرعة موقع الويب المجانية وأدوات أداء الشبكة الأخرى من Dotcom-Tools.

أدوات تطوير Chrome

أدوات تطوير Chrome (Chrome DevTools اختصارا) هي سلسلة من أدوات تطوير الويب المضمنة في متصفح الويب Google Chrome والتي تساعد مطوري البرامج من جميع خلفيات تطوير الويب على تعديل مواقع الويب بسرعة وتشخيص المشكلات باستخدام أدوات تصحيح الأخطاء الخاصة به. في حالة تطبيقات Vue ، تساعد علامة التبويب “الأداء” في أداة التطوير على تحديد كيفية تصرف المكونات مباشرة والمدة التي تستغرقها لتقديمها.

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

 

نهج LoadView لتحسين أداء تطبيق Vue

يقدم LoadView مسجل الويب EveryStep ، وهي أداة برمجة نصية مذهلة تكرر التفاعلات من جانب العميل لمواقع الويب وتطبيقات الويب لتقييم السيناريوهات المعقدة. تدعم أدوات البرمجة النصية أكثر من 40 متصفحات وأجهزة سطح المكتب / الجوال ، بالإضافة إلى أحدث تقنيات وأطر عمل تطبيقات الويب الديناميكية المستخدمة لإنشاء محتوى تفاعلي. أداة الأداء القوية هذه قادرة على محاكاة عمليات المستخدم المعقدة مثل نقرات الماوس ، والحوافر ، والحركات ، والتحقق من الصور والنصوص ، واختيارات القائمة وأكثر من ذلك بكثير. يمكن بعد ذلك تحميل هذه البرامج النصية إلى النظام الأساسي LoadView لتشغيل تطبيقات Vue الخاصة بك تحت الحمل ، حتى تتمكن من التأكد من أن تطبيقاتك يمكنها التعامل مع الزيادة أو الارتفاعات في حركة المرور.

فيو نينتندو

 

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

يوفر EveryStep Web Recorder لمطوري Vue الفرصة للنظر بعمق في وقت تحميل مكونات تطبيقهم إلى جانب كل عملية مخفية عن أعين المستخدمين النهائيين. يمكنه التقاط التفاعلات التي تم تجاهلها في DOM والتي يمكن أن تسبب استدعاءات الوظائف إلى مصادر خارجية وقياس أوقات الاستجابة الإجمالية.

مخطط انحداري

 

تطبيقات اختبار الحمل المكتوبة في Vue.js: الخلاصة

Vue.js هي واحدة من عمالقة التطوير الثلاثة الرئيسيين في الواجهة الأمامية في العصر الحديث. إن قدراتها التطويرية العالية على الفصل تقلل بشكل كبير من جهود التطوير وتوفر للمطورين إمكانية توسيع نطاق المشاريع المعقدة بسهولة. ومع ذلك ، مع نمو التطبيقات وتجميع المكونات ، لا يكفي الاعتماد فقط على تركيبة Vue خفيفة الوزن. يجب أن يكون لدى المطورين أدوات لمراقبة الأداء مثل Vue Performance DevTools في أحزمة أدوات المطورين الخاصة بهم للمساعدة في تشخيص اختناقات الأداء بشكل فعال. بالإضافة إلى ذلك، يجب استخدام مسجل ويب EveryStep، بالاقتران مع النظام الأساسي LoadView ، لتشخيص السيناريوهات التي قد تؤثر فيها المهام المخفية على وقت استجابة التطبيق وتؤثر على تجربة المستخدم. هل تريد معرفة المزيد عن اختبار الحمل تطبيقات الويب Vue؟ اشترك في الإصدار التجريبي المجاني من LoadView واحصل على 20 دولارا أمريكيا في أرصدة اختبار الحمل لبدء اختبار تحميل تطبيقات Vue.js الخاصة بك.

هل أنت مهتم بعرض توضيحي مباشر؟ سيقوم أحد مهندسي الأداء لدينا بإرشادك عبر النظام الأساسي الكامل والإجابة على أي أسئلة حول النظام الأساسي وإعداد اختبار الحمل وأفضل ممارسات اختبار التحميل لمتطلباتك المحددة.

 

 

الصورة: Vue.js شعار إيفان يو ، CC BY 4.0