У меня есть изображение 1700, но для рендеринга в React JS потребуется 30 секунд [закрыто] ⇐ Javascript

[Anonymous]

Я работаю над проектом React, где у меня есть около 1700 изображений (в форматах .Avif и .webp), хранящихся в SRC/ Assets/ Polder. Эти изображения используются в нескольких компонентах - в основном отображаются в виде каруселей, карт продуктов и баннеров. < /P>
На локальной разработке все загружается быстро и работает отлично. React.js (Vite или Create React app)
[*] Форматы изображений: .avif, .webp
[*] Расположение изображения: все изображения находятся внутри src/arsets/
[*] Хостинг: развернуто на стандартном Node.js Server (или STATIC HOSETING, подобное vercle/netlif />
Что я наблюдал:

• Все изображения импортируются с помощью JavaScript (например, импорт Carimage from '../assets/car1.avif')
• в Devtools (сеть), изображения, начинающиеся с 357s и strain -sene -li -sene -rest -rest rest -restools (сеть). />The bundle size is large, and all images seem to be bundled in JS during the build
• When viewed locally, there’s no delay — images load instantly
• I already use loading="lazy" and image optimization formats like .avif/.webp

What I’ve Tried:

[*] Проверенные и подтвержденные изображения оптимизированы (avif /webp) < /li>
Добавленная загрузка = "Lazy" ко всем тегам < /li>
Избегайте больших каруселей, предварительно загружающих все изображения < /li>
/> < /ul>
Моя цель: < /p>

Я хочу быстрее загружать изображения на производственном сайте, в идеале, как они это делают в локальном. Изображения более эффективно с сервера?
Правильно используйте кэширование или ленивую загрузку? JavaScript - узкое место для производительности?

Подробнее здесь: https://stackoverflow.com/questions/796 ... n-react-js