تأتي Next.js مع آراء قوية حول الصور، وتجرب كل منها مواقع السيارات: مئات الصور البعيدة في كل صفحة، نسب العرض إلى الارتفاع التي لا يجب أن تتغير، و CDN موجود بالفعل أمام الأصول. إذا تم استخدامها بشكل جيد، فإن الإطار و API صور المركبات يدعمان بعضهما البعض. إذا تم استخدامها بشكل ساذج، فإنها تقوم بتحسين نفس البايتات مرتين وتفرض عليك تكاليف ذلك. هذا هو الإعداد الذي يعمل في الإنتاج.
دع واحد من المحسنين يفوز
يريد مكون الصورة إعادة تحديد الحجم وإعادة ترميز كل شيء عبر خط أنابوت الخاص به. صور المركبات من API معلمة تصل بالفعل بحجمها ومباشرة WebP، لذا فإن التحسين المزدوج يضيف تأخير وحساب دون فائدة. النمط النظيف: اطلب عرضًا دقيقًا من API، ودع المكون يعالج التكوين، تحميل الصور التلقائي، والاولوية دون إعادة معالجة، أو حدد نطاق نماذج البعد البعيدة بشكل ضيق واذهب عبر ما هو مثالي بالفعل.
- اطلب عرض العرض المحدد من API لكل نقطة انقطاع
- قم بتكوين أنماط البعيد للمضيف صور مرة واحدة، بشكل صارم
- استخدم ملء أو أبعاد صريحة لحجز صناديق نسبة العرض إلى الارتفاع
- احتفظ بالأولوية للبطولة فوق الطية، لا شيء آخر
استراتيجية العرض حسب نوع الصفحة
تتقسم مواقع السيارات بشكل طبيعي حسب تحديث البيانات. تريد صفحات التفاصيل من المخزون الحي عرضًا خادميًا مع إعادة التحقق القصيرة، حتى تبقى الأسعار والتوافر صادقين. تتحمل صفحات الفئات والوصول حياة ثابتة أطول، ورابط صورها، كونه مستقرًا ومُعلمًا، يتم تخزينه بشكل مثالي في كل طبقة. يبقى نظام الصور هو نفسه عبر الاستراتيجيات؛ فقط نوافذ إعادة التحقق تختلف، مما يجعل النموذج العقلي صغيرًا.
المعرض، الشبكة، والطية
تتوافق ثلاث مواقع السيارات على أساسيات الإطار بشكل واضح. يستخدم شبكة البحث خلايا ذات نسبة ثابتة مع تحميل كسول أسفل الطية، تمامًا كما يصف دليل البحث. تقوم معرض التفاصيل بتحميل الصورة الأولى لها بالترتيب الأولي وتؤجل مجموعة الزوايا حتى التفاعل. تعتمد عرض المقارنة على إطار متساوٍ من خلال الـ API، لذا لا تحتاج الخلايا ذات الحجم المتساوي إلى تعديل لكل صورة. لا يوجد شيء من هذا هو ذكي. كل شيء هو اتخاذ قرار مرة واحدة وتشفيره في المكونات.
مكون VehicleImage يستحق أن يكون لديك
ضع إطار الصورة مرة واحدة: خصائص للعلامة الثابتة لمعرف المركبة، الزاوية، نصيحة العرض ونص بديل، بناء الرابط داخل، تطبيق قيم التخصيص والتحميل الافتراضية. ثم تقوم كل سطح بتقديم المركبات عبر مكون واحد، وفي اليوم الذي تغير فيه اتفاقية المعلمة، يتغير ملف واحد. أضف هيكل نسبة ثابتة وخلفية مميزة للخطأ، وستكون الحالات الحدودية مصممة بدلاً من اكتشافها.
تستفيد الإطارات من الفرق التي تقرر سياسة الصور مرة واحدة وتشفّرها، وتعاقب الفرق التي تقررها لكل صفحة.
For the caching architecture underneath, the caching strategy pairs with this setup directly, and the React and Vue guide covers the component pattern for stacks beyond Next.
عمليات النشر، المخازن، وفائدة الروابط المستقرة
ملاحظة إنتاجية أخيرة: لأن روابط API مستقرة ومُعلمة، فإنها تبقى دون تغيير عبر عمليات نشرك، مما يحافظ على دفء مخازن CDN عبر الإصدارات ويوفر للمُحسّن في الإطار من إعادة معالجة كتالوج لم يتغير. تُلاحظ الفرق من قبل الفرق التي تهاجر من الأصول المحفوظة محليًا في أول نشر بعد: لا تكون طبقة الصور جزءًا من الإصدارة anymore، ويشير وقت البناء ومعدلات إصابت المخزن إلى ذلك.
