👩🏼‍🌾 👸🏾 🧜🏾 رد تطبيق تسريع أربعة أضعاف 🌋 🔤 ✌🏼

ما يقرب من 60 ٪ من زوار الموقع يتركونه إذا استغرق الأمر أكثر من 3 ثوان للتحميل. 80٪ من هؤلاء الزوار لم يعودوا إلى الموقع. هذا يشير إلى أن نجاح مشروع الويب لا يعتمد على سرعته. يريد مؤلف المادة ، التي نُنشر ترجمتها اليوم ، أن يتحدث عن تقنيات لتحسين أداء تطبيقات React.

نتائج تحسين التطبيق

المعايير

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

أثناء القياسات التي أجرتها علامة تبويب Network (الشبكة) في أدوات مطوّري برامج Chrome ، اقتصر معدل نقل البيانات بالقوة على مستوى اتصال 3G السريع.
تحميل قياس الأول الحصول عليها مع تعطيل ذاكرة التخزين المؤقت.
يشير مؤشر التحميل الثاني إلى وقت إعادة تحميل التطبيق عند تشغيل ذاكرة التخزين المؤقت.

كما ترون ، الفرق بين تطبيق محسّن وغير محسّن كبير جدًا. هذا ملحوظ بشكل خاص في الشبكات البطيئة.

تم فحص حجم حزمة التطبيق باستخدام source-map-explorer. تتيح لك هذه الأداة أيضًا معرفة المساحة التي تشغلها المكتبات المختلفة. يتم قياس المؤشرات التي يمكن رؤيتها في الجزء العلوي من الشكل باستخدام منارة Google.

الآن سأتحدث عن كيفية تحسين التطبيق.

1. استخدام CSS بدلاً من CSS-in-JS

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

مجرد التخلي عن مكتبة المكونات المصممة والتحول إلى CSS العادي يمكن أن يقلل من وقت تحميل الموقع بنحو 0.3 ثانية

إذا كانت CSS تسمح بأداء أفضل من التقنيات التي تستخدم CSS-in-JS ، فقد تتساءل عن سبب استخدام المطورين لتكنولوجيا تصميم المكونات هذه. من بين أسباب اختيار CSS-in-JS حقيقة أن هذه التكنولوجيا تسمح لك بتحديد نطاق الأنماط والتخلي عن التصميم العالمي. أنها مريحة للاستخدام للعمل مع سمات التطبيق. وشخص ما ، ربما ، يحب تصميم تطبيقات React بهذه الطريقة.

▍ أنماط ذات نطاق محدود

إن تطبيق Create-react-app يدعم رسميا وحدات CSS بنطاق محدود. هذا يعني أنه يمكنك تحديد نطاق الأنماط دون استخدام مكتبات إضافية.

▍ المواضيع

إذا كنت تعمل مع مكتبة المكونات ذات النمط ، من أجل استخدام المتغيرات التي تحدد السمات ، فقط قم بلف هذه المتغيرات في ThemeProvider . كل هذا جيد ، ولكن اعتبارًا من مايو 2019 ، دعم 91٪ من المتصفحات ميزة CSS قياسية مماثلة.

إذا كنت تعتقد أن 91٪ ليس مؤشرًا جيدًا بما يكفي ، فاعتبر أنه قد لا يكون صغيراً.

دعم متغير CSS

في الواقع ، إذا لم تكن مهتمًا بدعم IE ، فيمكنك استخدام متغيرات CSS بأمان في مشاريعك. إذا كنت مهتمًا بهذا الموضوع - أوصي بإلقاء نظرة على هذه المواد.

2. تجنب مكتبات CSS الكبيرة

حزمة تحليل المواد واجهة المستخدم

أنا معجب كبير بتصميم المواد. تمت كتابة مكتبة مواد رائعة تسمى material-ui لـ React. هذه المكتبة لديها مشكلة واحدة فقط. هذا هو حجمها. إنها رائعة جدا. حتى إذا كنت تستخدم مكوناته الفردية فقط ، فسيتم تطبيقه على آلية CSS-in-JS ضمن الحزمة ، وهذا هو حوالي 30 كيلو بايت من الشفرة المصغرة.

ما هي البدائل؟ قررت بناء مكوناتي الخاصة ، وتصميمها في عملية إنشاء التطبيق. أحد أسباب هذا الاختيار هو أنني أردت تحديث معرفتي في CSS. وأنا لم أكتب كود CSS لفترة طويلة. ومع ذلك ، هناك احتمالات أخرى. على وجه الخصوص ، نحن نتحدث عن أطر عمل CSS ، أحجامها أصغر بكثير من حجم واجهة المستخدم المادية. على سبيل المثال ، هذه هي Specter و Bulma ، التي يأخذ رمزها ، على التوالي ، 9 و 40 Kb بعد ضغط GZIP.

شبح - 9 كيلو بايت بعد ضغط GZIP

Bulma - 40 كيلو بايت بعد ضغط GZIP

3. تحميل صفحات كسول

لذلك ، لديك جهاز توجيه مع العديد من الصفحات المستوردة. إذا كنا نتحدث عن صفحتين - فلا توجد مشاكل هنا. ولكن مع زيادة عدد الصفحات ، يزداد أيضًا وقت عرض الموقع لأول مرة. إليك ما قد تبدو عليه أوامر الاستيراد:

 import NotFound from "pages/NotFound"; import Projects from "pages/Projects"; import Project from "pages/Project";

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

 import React, { lazy, Suspense } from "react"; const load = (Component: any) => (props: any) => (   <Suspense fallback={<Loader />}>       <Component {...props} />   </Suspense> ); const NotFound = load(lazy(() => import("pages/NotFound"))); const Projects = load(lazy(() => import("pages/Projects"))); const Project = load(lazy(() => import("pages/Project")));

4. تقنيات تطبيق الويب التدريجي

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

5. التخلص من الحزم التي تبدو مثيرة للاهتمام ، ولكن لا تجلب الكثير من الفوائد

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

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

هنا شريط التمرير من NPM.

المنزلق NPM

هنا هو منزلق بلدي

شريط التمرير الذاتي (في الحياة يعمل بسلاسة أكبر بكثير من على صورة GIF هذه بمعدل إطارات منخفض)

انظر هذا التمرير في العمل هنا .

Size تحليل حجم الحزمة

إذا كنت تستخدم تطبيق create-react-app ، فمن السهل جدًا عليك تحليل تركيبة الحزمة. للقيام بذلك ، npm run build ، ثم الأمر npx source-map-explorer "build/static/js/*.js" . بعد ذلك ، سيتم فتح صفحة تحتوي على معلومات حول تكوين الحزمة ، تشبه الصفحة الموضحة أدناه.

حزمة المعلومات

النتائج

كما ترون ، تسريع تطبيقات React ليست صعبة للغاية. يكفي مراقبة ما تم بناؤه بعناية واختباره وإجراء التغييرات المناسبة عليه. هنا هو المشروع الذي تمت مناقشته هنا ، قبل التحسين ، والآخرة .

إذا كنت مهتمًا بتحسين تطبيقات React ، فإليك بعض منشوراتنا حول هذا الموضوع:

أعزائي القراء! هل لديك أمثلة للتحسين الناجح (أو غير الناجح) لتطبيقات React؟

رد تطبيق تسريع أربعة أضعاف