بصفتنا مطوري ويب ومهندسين برمجيات ، نريد أن نقدم للناس ما يريدون. إذا كنت معتادًا على NextJS ، فيجب أن تكون على دراية بميزة تحسين الصورة الرائعة المضمنة في الإصدار 10. الذي تم إصداره مؤخرًا ، يعد NextJS إطارًا يمكن استخدامه في كل من الواجهة الخلفية والواجهة الأمامية لتطبيقات React. إنه قادر على إجراء مجموعة واسعة من المعالجات ، بما في ذلك تحويل الصور إلى تنسيق WebP الصديق للويب ، وتحميل الصور حسب حاجة المستخدم وأكثر من ذلك بكثير.
إذا كنت تعمل بالفعل مع NextJS ، فهذا مفيد للغاية. ولكن ماذا لو كنت تريد وظيفة التحسين ، والتصميم المضمن ، والبساطة لمكون React دون العوائق المرتبطة بإطار العمل الجديد؟
— , . , , ( !) .
, BetterImage
BetterImage هي أداة مفتوحة المصدر تحاكي العديد من ميزات التحسين بطريقة بسيطة ومريحة في تنسيق React. يقوم بتحويل الصورة إلى WebP المحسن بنسبة 30٪ أصغر من JPEG دون التضحية بالجودة. يؤدي ذلك إلى تحسين العرض ، وكذلك تحسين محركات البحث ، وإمكانية الوصول على Google Lighthouse مقارنة بالعلامة القياسية. كما أنه يبسط تنسيق CSS ، بما في ذلك عمليات التلاعب الأكثر شيوعًا خارج الصندوق. يأخذ المكون الخصائص ، ويستخلص عمليات التلاعب والواردات ، مما يسمح بمزيد من التركيز على التطبيق. يتوافق BetterImage مع المكونات الوظيفية والقائمة على الفصل ، لذا يمكنك تضمينها في تطبيقك بغض النظر عن النكهة التي تخدمها مع React. تمكين الصورة الاحتياطية ،بالإضافة إلى أبعاد الطول والعرض ، يمنع CSS تطبيق مقياس إزاحة التخطيط الكلي عند تقييم موقع في Google Lighthouse.
نتائج Google Lighthouse للعلامة القياسية (يسار) مقابل نتائج BetterImage (يمين).
لا يزال المكون في مرحلة تجريبية ، والوظائف الجديدة وحزم NPM قيد التطوير. إذا كنت ترغب في محاولة حالة المكون أو لديك أسئلة، يرجى زيارة جيثب و موقع !
ماذا تحت غطاء BetterImage؟
تُظهر اختبارات Lighthouse أن المكون يمكنه تحسين أداء تحميل الصور. توفر الأطر الأخرى مثل Next.JS تحسينات رائعة. يريد فريقنا اعتماد ذلك في React حتى لا تكون هناك حاجة إلى أطر عمل أخرى. أنشأنا BetterImage بحيث يمكن للمطورين كتابة الأنماط مباشرة في React code كسلسلة. التصميم اختياري ولا يجوز استخدامه على الإطلاق.
مكون BetterImage
ماذا يوجد تحت الغطاء؟ يتم تمرير الخصائص إلى المكون ، والذي يقوم بعد ذلك بتلخيص المعلومات لمعالجة الصورة. ليست هناك حاجة لاستيراد الصورة نفسها إلى مكون React ، فالمسار النسبي هو المطلوب فقط وسوف يقوم BetterImage باستيراد الصورة المحولة ديناميكيًا. يقوم BetterImage بتحويل الملف المصدر إلى WebP باستخدام استدعاء API لحزمة NPM خارجية ويخزن الصورة المحولة في مجلد محلي. سيساعد هذا في تقديم الصورة بشكل أسرع بعد المعالجة الأولى. يتم تطبيق جميع الوظائف الأخرى - المرنة دائمًا - حسب الحاجة. لمعاينة المكون حاليا في مرحلة تجريبية، مرحبا بكم في جيثب و موقع !
شكرا لقراءة هذا الاستعراض الصغير!
