كيف يمكنني تحسين أداء متجر Vuex

منظمة الدولة والهيكل

متجر Vuex منظم جيدًا هو أساسي للأداء. معقدة للغاية ، تزيد الحالات المتداخلة بعمق من تكلفة تتبع التفاعل ويمكن أن تبطئ التحديثات. لتحسين:

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

وحدات التحميل الكسول Vuex

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

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

التحور وتحسين العمل

الطفرات هي الآليات التي تؤدي إلى تحديثات Vuex التفاعلية. إن تقليل التكلفة هنا أمر بالغ الأهمية:

- الدفعة متعددة الطفرات ذات الصلة معًا لتقليل إخطارات التفاعل وإعادة إعادة تقديم المكونات. يمكن أن تؤدي التغييرات في التجميع إلى عمليات تشبه المعاملات إلى تقليل التحديثات غير الضرورية بنسبة تصل إلى 60 ٪.
- تجنب استخدام طفرات المتجر لتغييرات واجهة المستخدم التافهة ؛ بدلاً من ذلك ، استخدم حالة المكونات المحلية أو المراجع التفاعلية المنتشر.
- Debounce أو Throurothttle تغييرات متكررة للدولة لمنع تقديمات الشلال. على سبيل المثال ، عند تحديث نتائج البحث أو الحالة المتغيرة بسرعة ، استخدم Debusting في الإجراءات قبل ارتكاب طفرات.
- استخدم الطفرات المتزامنة لتغييرات الدولة وتفويض العمليات غير المتزامنة إلى الإجراءات للحفاظ على التدفق يمكن التنبؤ به وقابل للتصحيح.

الحد من التفاعل النفقات العامة

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

- عند العمل مع بيانات كبيرة غير قابلة للتغيير والتي نادراً ما تتغير (على سبيل المثال ، الاستجابات المخزنة مؤقتًا) ، استخدم `Object.freeze` على الكائنات المخزنة لمنع Vue من جعلها تفاعلية. Frozen objects are skipped by the reactivity system, saving memory and CPU resources.
- في Vue 3 ، استخدم واجهات برمجة التطبيقات الضحلة التفاعلية مثل `alghulRef ()` أو `aldalrowtective () بالنسبة للبيانات المتداخلة الكبيرة للحد من التفاعل على خصائص مستوى الجذر فقط وعلاج الأشياء المتداخلة على أنها غير قابلة للتغيير.
- تجنب المراقبين العميق على الأشياء الكبيرة ، والتي يمكن أن تسبب عمليات إعادة حساب باهظة الثمن وإعادة المسند.

getters الفعالة والخصائص المحسوبة

يتم تخزين الخصائص المحسوبة والمحسوبة استنادًا إلى تبعياتها التفاعلية ، مما يجعلها فعالة للحالة المشتقة:

- تفضيل getters على الأساليب عند الوصول إلى الحالة المشتقة داخل المكونات مع نتائج ذاكرة التخزين المؤقت Getters حتى تتغير التبعيات.
- تجنب الحسابات المعقدة مباشرة داخل القوالب أو الطرق التي تعمل على كل عرض ؛ استخدم getters لتذكير الحسابات باهظة الثمن.
- ذاكرة التخزين المؤقت بشكل متكرر أو البيانات المشتقة المعقدة لتقليل تكاليف إعادة الحساب.

التقليل من إعادة تقديم المكونات

يمكن أن تكون إعادة البيع مكلفة خاصة مع وجود العديد من المكونات التي تعتمد مباشرة على حالة Vuex:

- قم بتوصيل المكونات بحالة Vuex بشكل انتقائي عن طريق تعيين خصائص الحالة أو getters اللازمة.
-استخدم توجيه Vue's `V-once" أو روابط "مفتاح" بشكل استراتيجي لمنع إعادة التوترات غير الضرورية.
- كسر مكونات في أجزاء أصغر مع تبعيات محدودة على VUEX لتقليل نطاق التقديم.
- تجنب نشر حالة المتجر بأكملها في مكونات ؛ خريطة فقط ما هو مطلوب لكل مكون.

استراتيجيات الحالة وذاكرة التخزين المؤقت

تعمل الحالة الطبيعية على تحسين الأداء من خلال تسطيح العلاقات وتجنب الطفرات المتداخلة:

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

تجنب عيوب الأداء المشتركة

- لا تفرط في استخدام Vuex لكل تفاعل صغير واجهة المستخدم ؛ الحفاظ على غير عابر ، وعابر الولاية المحلية للمكونات.
- تجنب التحسين قبل الأوان ؛ تحديد الاختناقات مع Vue DevTools وتوصيف المتصفح لتركيز الجهود التي تهمها.
- تعطيل الوضع الصارم Vuex في الإنتاج لتحقيق مكاسب الأداء ، نظرًا لأن الوضع الصارم يضيف النفقات العامة عن طريق أداء مراقبي الحالة العميقة.
- الحفاظ على الطفرات يمكن التنبؤ بها والحد الأدنى لمنع الإفراط في التفاعل.

التجميع وتقسيم التعليمات البرمجية

يعتمد الأداء على التنزيلات الأولية الصغيرة وأوقات بدء التشغيل السريعة:

- استخدم WebPack أو Vite لتنفيذ اهتزاز الأشجار الفعال وتقسيم التعليمات البرمجية لوحدات متجر Vuex وكذلك المكونات.
- الجمع بين التحميل البطيء من وحدات Vuex مع تقسيم الكود المستندة إلى الطريق لتحسين تجربة المستخدم ، وخاصة على الأجهزة المحمولة أو الشبكات الأبطأ.

الاستفادة من Vue DevTools والمراقبة

- استخدم علامة تبويب أداء Vue DevTools لتحليل الجداول الزمنية لعرض المكونات ، ومشغلات التفاعل المحددة ، ولاحظ كيف تنشر طفرات حالة Vuex.
- تحديد المراقبين غير الضروريين ، والحسابات الثقيلة ، والتحديثات الزائدة.
- ضبط تفاعل المكون وهيكل المتجر وفقًا لدورة تحديث هزيل.

أفضل الممارسات ملخص

- Modularize Store بشكل فعال مع فصل واضح عن المخاوف.
- الوحدات النمطية المحمولة الكسول محاذاة مع حدود المسار أو الميزة.
- تطبيع الحالة المعقدة للحد من الطفرة.
- طفرات الدُفعات ودون تغييرات متكررة في الحالة.
- تجميد البيانات غير القابلة للتغيير لتقييد التفاعل.
- استخدم getters والخصائص المحسوبة بحكمة لبيانات ذاكرة التخزين المؤقت المشتقة.
- قم بتوصيل المكونات بشكل انتقائي باستخدام مساعدي خريطة Vuex.
- تقليل حالة المتجر العالمية لبيانات ephemeral واجهة المستخدم.
- توظيف الأدوات والتوصيف لمراقبة الأداء وتحسينه بشكل متكرر.
- تحسين التجميع والتحميل مع تقسيم التعليمات البرمجية للحفاظ على الحمولة الأولية الصغيرة.