اکنون ما در
سایت رسمی next as و if you head
بیش از تب ویترین این خاص است
صفحه وب صدها مورد زیبا را نشان می دهد
وب سایت های ساخته شده با nextgs و بیایید استفاده کنیم
این وب سایت برای نشان دادن بعدی ما
جزء تصویر
به عنوان این وب سایت خاص
از مولفه تصویر بعدی برای نمایش استفاده می کند
همه این تصاویر زیبا در اینجا
حالا بیایید به سراغ توسعه دهنده خود برویم
ابزارها و رفتن به تب شبکه و
شبکه را بررسی کنید تا ببینیم چیست
اندازه این تصاویر هستند
بنابراین در اینجا اجازه دهید به سمت توسعه دهنده برویم
ابزار
و سپس به تب شبکه در اینجا برویم
بنابراین می توانید ستون اندازه را از قبل ببینید
در اینجا اندازه هر فایل را نشان می دهد
بنابراین
بیایید آن را پاک کنیم و image here if را انتخاب کنیم
قبلا نه
حالا اگر متوجه شدید که ما در اینجا هستیم
سایت ریسپانسیو پس حالا ببینیم چیه
اندازه تصویر خاص است
که next.js برای این خاص استفاده می کند
viewport پس حالا بیایید جلو برویم و خالی کنیم
کش و بارگذاری مجدد هارد
خوب حالا که این کار را انجام دادیم
شما می توانید اندازه های مختلف فایل را ببینید
همین جا همین الان پس بیا بریم
و اکنون یکی از این تصاویر را انتخاب کنید
با این یکی بروید زیرا این یکی دارای یک است
سگ و من واقعا سگ ها را دوست دارم زیرا من
یک حق داری و می گوید روزت را بساز
حالا اگر به اندازه فایل نگاهی بیندازید
این است
اکنون 66.8 کیلوبایت این اندازه فایل است
برای این نمای خاص که بعد
مولفه تصویر سال درست استفاده می کند
و آن تصویر خاص را دانلود کرده است
پس حالا بیایید جلو برویم و آن را به آن تغییر دهیم
شاید نسخه آیفون 678 که دارای یک
ویوپورت کمی کوچکتر و بیایید ببینیم
نحوه عملکرد مولفه تصویر بعدی
حالا بیایید مطمئن شویم که به یاد می آوریم
این شماره
66.8 درست است و این تصویر خاص است
پس حالا بیایید جلو برویم و همین کار را انجام دهیم
چیزی دوباره کلیک راست کنید و خالی کنیم
کش و بارگذاری مجدد هارد
و اکنون
بیایید ببینیم اندازه فایل در حال حاضر چقدر است
دوباره یک سوم از پایین بود
درست است و این همان تصویر است
پس حالا اگر آن را ببندید می توانید آن را ببینید
در واقع این است
35.9
کیلوبایت در حال حاضر آنقدرها دیوانه کننده نیست و نیست
شگفت انگیز است که ما به معنای واقعی کلمه از 66 گذشتیم
اکنون به حدود 36 کیلوبایت رسیده است
این تقریباً کمتر از نصف است
اندازه
پس این همان تصویر js بعدی است
جزء بر اساس خاص انجام می دهد
viewport که به طور خودکار به آن می رود
اندازه فایل متفاوتی را رندر کنید و می توانید
در حال حاضر ببینید این بسیار کمک می کند
عملکرد زیرا زمانی که شما در یک
نمای کوچکتر که یک دستگاه تلفن همراه است
به احتمال زیاد درست است که نمی خواهید بارگذاری کنید
یک تصویر دسکتاپ در اینجا دقیقاً next.js
از آن برای شما مراقبت می کند
خیلی خوب چیز بعدی بیایید یک را انتخاب کنیم
به ویژگی pre fetching از نگاه کنید
کامپوننت تصویر نکسوس پس اکنون دوباره بیایید
سعی کنید و به پایین اسکرول کنید ما آن را پاک کردیم
شبکه و بیایید ببینیم چه اتفاقی می افتد
اکنون همانطور که به پایین اسکرول می کنیم، می توانید ببینید که چگونه
تصاویر در حال دانلود شدن هستند
به پایین اسکرول کنید تا تصاویر در مورد آن باشند
برای ورود به viewport می توانید آن را ببینید
این تصویر خاص حتی در
ویوپورت هنوز اما من کاملا مطمئن هستم که اینطور است
بعد از این یکی میاد
و به آن نگاه کنید و بله بعدی است
اساسا واکشی از قبل آن خاص
تصویری که کاربر واقعاً خوب است
تجربه کاربر اما ما همچنین می بینیم
برنامه کاربردی نیز به دلیل
ما فقط موارد خاص را دانلود می کنیم
تصویر
همانطور که کاربر در حال ورود به آن است
منطقه خاص
اکنون تصویر بعدی شگفت انگیز نیست
کامپوننت واقعاً قدرتمند است
حالا که خیلی بیشتر در موردش یاد گرفتیم
تصاویری که ما همچنان به آنها نگاه خواهیم کرد
عملکرد در حین ساخت پروژه ها
با یکدیگر
بیایید نگاهی به یکی دیگر از مزایای آن بیاندازیم
رابطه