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

يبدو أنك حاولت تقسيم أجزاء الحزمة على موقع إنتاج التفاعل باستخدام React.lazy} andsuspense} في React؛ ومع ذلك، لم يؤد هذا إلى التحسن المتوقع في درجة أداء الويب الخاص بك.

ولكن لماذا هذا هو الحال؟

نظرًا إلى أن هناك حاجة إلى شيء إضافي لموقع الإنتاج الخاص بك .....

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

لقد بدأت أيضًا أتساءل عما قد يحدث بعد ذلك.

لقد قمت بتثبيت البرنامج المساعد لمحلل حزمة webpack وحاولت تحليل كل قطعة بعد ذلك. وبعد ذلك، كان لدي الكثير من الاقتراحات حول كيفية تحسين الأداء.

Main.bundle.js
كان حجم الحزمة الرئيسية كبيرًا جدًا مما تسبب في زيادة وقت التنزيل بالإضافة إلى وقت التحليل.

كيفية كسر main.bundle.js؟
في حالتي، تحتوي الحزمة الرئيسية الخاصة بي على الكثير من ملفات json المرتبطة بالترجمة والتي أدت إلى زيادة حجم الحزمة الرئيسية بمقدار 1.5 ميغابايت.

لقد قمت بإزالة الترجمة باستخدام الاستيراد البطيء من حزمة main.js. وهذا يعطي تحسينًا في درجة الأداء بنسبة 40%. ولكن هذا لم يتم بعد حيث وصلنا من درجة أداء المنارة من 25 إلى 35 فقط.

ثم بدأت في البحث عن ملفات كبيرة محتملة أخرى.

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

ترقبوا المزيد والمزيد على وشك أن يأتي... شكرًا لكم