يتضمن تحسين أداء تطبيق laravel-vue.js مجموعة من استراتيجيات الواجهة الخلفية والواجهة ، ومعالجة التخزين المؤقت ، وكفاءة قاعدة البيانات ، وإدارة الأصول ، وتقسيم الكود ، والمراقبة. فيما يلي تقنيات شاملة لتعزيز السرعة والاستجابة وقابلية التوسع لهذه التطبيقات.
تحسين الواجهة الخلفية في لارافيل
التخزين المؤقت
يوفر Laravel التخزين المؤقت القوي لتقليل أوقات استجابة الخادم بشكل كبير:- تخزين المؤقت مسار: ذاكرة التخزين المؤقت جميع الطرق لتسريع تسجيل المسار.
- عرض التخزين المؤقت: ذاكرة التخزين المؤقت مشاهدات الشفرة ، مما يقلل من وقت العرض.
- استفسار التخزين المؤقت: ذاكرة التخزين المؤقت نتائج استعلامات قاعدة البيانات باهظة الثمن أو متكررة لتجنب ضربات قاعدة البيانات المتكررة.
- التخزين المؤقت لبيانات التطبيق: تخزين البيانات التي يتم الوصول إليها بشكل متكرر مثل التكوينات أو تفضيلات المستخدم في أنظمة ذاكرة التخزين المؤقت مثل redis أو memcached.
تحسين استعلام قاعدة البيانات
- التحميل المتحمس: استخدم التحميل المتحمس لتحميل النماذج ذات الصلة في استعلام واحد ، ومنع مشكلة استعلام "N+1".- الفهرسة: تأكد من أن أعمدة قاعدة البيانات تستخدم بشكل متكرر في مكان الانضمام أو الطلب أو الطلب عن طريق الجمل فهارس مناسبة.
- تحسين الاستعلامات: قم بتحليل الاستعلامات البطيئة مع تسجيلات استعلام لارافيل أو أدوات مراقبة قاعدة البيانات وإعادة كتابة استعلامات الكفاءة.
- قناة توصيل مجموعات بيانات كبيرة: تجنب تحميل مجموعات البيانات الضخمة في الذاكرة عن طريق تراكم البيانات في استجابات API.
- تجميع اتصال قاعدة البيانات: استخدم تجميع الاتصال لتقليل النفقات العامة لإنشاء اتصالات قاعدة البيانات.
المعالجة غير المتزامنة مع قوائم الانتظار
قم بتحميل المهام التي تستغرق وقتًا طويلاً مثل إرسال رسائل البريد الإلكتروني أو الإخطارات أو معالجة التحميلات إلى وظائف الخلفية باستخدام نظام قائمة انتظار Laravel. هذا يقلل من وقت الانتظار ويحسن الأداء المتصدر للمستخدم.التكوين وتحسين التحميل التلقائي
- استخدم أوامر `config: cache` و `المسار: cache` لتسريع التكوين وتحميل المسار.-تحسين التحميل التلقائي للملحن مع `composer dump -autoload -o` لإنشاء خريطة فئة لتحميل فئة أسرع.
أوامر الحرفيين واعتبارات البيئة
استخدم أوامر حرفية بانتظام مصممة لتحسين الأداء ، وتجنب الاستخدام المباشر لمتغيرات البيئة في رمز التطبيق لتحسين سرعة تحميل التكوين.HTTP و Web Server تحسينات
- خدمة تطبيق Laravel الخاص بك باستخدام خوادم الويب عالية الأداء مثل Nginx أو Caddy برؤوس التخزين المؤقت المناسبة.- استخدم HTTPs مع HTTP/2 أو بروتوكولات أحدث لتحسين الاتصال.
- تحسين ملفات تكوين خادم مكافئة `.htaccess` أو مكافئة.
التحسين الأمامي في vue.js
تقسيم الكود وتحميل كسول
- تنفيذ تحميل كسول لمكونات VUE لضمان تحميل JavaScript اللازمة فقط في البداية.- استخدم بناء جملة `import ()` import () في الطرق أو المكونات لتقسيم التعليمات البرمجية إلى أجزاء أصغر.
- مسبقًا قطعًا مهمة للطرق التي يتم الوصول إليها بشكل متكرر.
تقليل حجم الأصول
- استخدم هز الشجرة أثناء عملية الإنشاء لإزالة الكود غير المستخدم.- Minify JavaScript و CSS و HTML.
- ضغط الأصول باستخدام GZIP أو Brotli على خادم الويب.
- قم بتحسين الصور باستخدام التنسيقات الحديثة مثل WebP وتقديم الصور المقاس المناسبة لأحجام شاشة الجهاز.
تصميم مكون فعال
-- تجنب الأشياء التفاعلية المتداخلة بعمق عند الإمكان ؛ استخدم Vue's `aldalowref` أو `aldaloWeCtive" للحد من النفقات العامة للتفاعل.
- استخدم الخصائص المحسوبة والمراقبين بحكمة لمنع عمليات إعادة حساب غير ضرورية.
- قم بتطبيق التمرير الظاهري أو سرد المحاكاة الافتراضية للقوائم الطويلة والجداول لتقديم عناصر مرئية فقط وتقليل عقد DOM.
إدارة الدولة والتفاعل
- تقليل الدولة التفاعلية العالمية ؛ تفضل الدول المحلية حيثما أمكن ذلك.- استخدم Vuex أو Pinia لإدارة الدولة المعقدة ولكن الحفاظ على المتاجر العجاف.
- أحداث إدخال المستخدم أو الخانق التي تؤدي إلى تحديثات مكلفة.
أدوات التطوير والمراقبة
- استخدم Vue DevTools لمكونات الملف الشخصي واكتشاف اختناقات الأداء.- تحليل حجم حزمة JavaScript والرمز غير المستخدم مع أدوات التغطية في المتصفحات.
-استخدم بناء وضع الإنتاج ("Vue-Cli-Service Build" أو Build Vite) للأصول المحسنة.
استراتيجيات الكامل الكامل لـ Laravel-vue.js
تحسين API
- تحسين نقاط نهاية API لإرسال البيانات اللازمة فقط باستخدام DTOS (كائنات نقل البيانات) أو محولات الموارد.- استجابات Cache API حيث لا تتغير البيانات بشكل متكرر.
- استخدم ترقيم الصفحات في استجابات API لتقليل حجم الحمولة.
- استخدم GraphQL أو الراحة على النحو الأمثل ، اعتمادًا على احتياجات التطبيق ، لتقليل البيانات الإفراطية في الإنتاج.
مزامنة الحالة الفعالة
عند مزامنة الحالة بين الواجهة الخلفية لارافيل والواجهة الأمامية:-استخدم أحداث WebSockets أو Server-Sent لتحديثات البيانات في الوقت الفعلي بدلاً من الاقتراع المتكرر.
- استخدم مكتبات مثل Laravel Echo مع Puster أو Redis لبث الأحداث الفعال.
تحسين ونشر التحسين
- استخدم مزيج Vite أو Laravel للتجميع مع التكوينات التي تركز على الأداء مثل الضبط اليدوي والضغط.- قم بإزالة "Console.log" وبيانات التصحيح في بنيات الإنتاج.
- استخدم خطوط أنابيب CI/CD التي تقوم تلقائيًا بإنشاء أصول محسّنة وذات مخزونات عن النشر.
المراقبة والتحسين المستمر
- دمج أدوات مراقبة الأداء مثل New Relic أو Blackfire أو Laravel Telescope لتحديد الاستعلامات البطيئة والاختناقات والأخطاء.- قم بتحديث Laravel و Vue.js و Tendensions بانتظام للاستفادة من تحسينات الأداء وتصحيحات الأمان.
- قم بإجراء اختبار التحميل والتوصيف تحت أحمال مستخدم واقعية إلى القياس وتحديد الاختناقات الجديدة.
تحسين الصور والوسائط
- استخدم التحميل كسول للصور وأصول الوسائط على الواجهة الأمامية.- خدمة الصور المستجيبة عبر `srcset` والأحجام السمات لتقليل نقل البيانات غير الضروري.
- ضغط ملفات الصور باستخدام أدوات الضغط الحديثة دون فقدان الجودة.
ملخص أفضل الممارسات التقنية
- الخلفية: طرق ذاكرة التخزين المؤقت ، والاستعلامات ، ووجهات النظر ؛ تحسين استعلامات SQL. استخدم قوائم الانتظار.
- الواجهة الأمامية: مكونات تحميل كسول ؛ تقليل أحجام JavaScript و CSS ؛ افتراضية قوائم كبيرة.
- API: التتصل ، ذاكرة التخزين المؤقت ، وتقليل حمولات البيانات.
- الدولة والاتصال: استخدم WebSockets أو بث الأحداث لتحديثات الوقت الفعلي.
- عملية الإنشاء: استخدم تقنيات التجميع المتقدمة مثل تقسيم الكود والضغط.
- المراقبة: استخدم أدوات التنميط واختبار الأداء المستمر للتحسين المستمر.