#lazy_load — Public Fediverse posts

Как сделать сайт бесконечно ленивым. Часть 4: Преждевременная загрузка

Ранее мы говорили о том, как улучшить кэширование наших проектов и правильно загружать поставщиков. А в этой статье мы рассмотрим следующее: - Как мы можем использовать стратегии предварительной загрузки, включая что такое "магические" комментарии Webpack, и что такое спекулятивная/ручная предварительная загрузка; - Как мы можем запрашивать данные с сервера, не дожидаясь загрузки наших статических файлов; - А также какие сторонние или наши собственные решения могут быть использованы для этого.

https://habr.com/ru/articles/964472/

#javascript #webpack #lazy_load #performance_optimization #web #webразработка #frontend #frontendразработка #react #typescript

Как сделать сайт бесконечно ленивым. Часть 1: Чем полезна ленивая загрузка

Ленивая загрузка - это принцип, который должен быть известен большинству frontend разработчиков. Однако, этот механизм обманчиво прост, и его освоение является гораздо более комплексной задачей, чем кажется многим. Если уже используете Lazy Loading, у вас все равно могут быть серьезные пробелы в знаниях. Но даже если вы считаете, что знаете про ленивую загрузку абсолютно все, освежить память не будет лишним. В этой статье мы рассмотрим основы ленивой загрузки: что это такое и почему это важно; как мы можем использовать ленивую загрузку в наших проектах; а также какие части кода следует загружать лениво.

https://habr.com/ru/articles/960058/

#javascript #webpack #lazy_load #performance_optimization #web #webразработка #frontend #frontendразработка #react #typescript

Как сделать сайт бесконечно ленивым. Часть 3: Вендоры и кэш

Ранее мы поговорили о том, как сделать дерево зависимостей нашего проекта максимально чистым и почему это важно для ленивой загрузки. А в этой статье мы расскажем о следующем: - Как мы должны загружать вендор файлы с точки зрения правильной организации ленивой загрузки. - Что общего между стратегиями оптимизации "ленивой загрузки" и "кэширования", и как использование одной из них влияет на другую. - Что такое кэшируемость и как сделать наше приложение максимально кэшируемым. - А также как правильно настраивать группы кэша в Webpack и не испортить кэшируемость.

https://habr.com/ru/articles/963112/

#javascript #webpack #lazy_load #performance_optimization #web #webразработка #frontend #react #typescript #frontendразработка

Как сделать сайт бесконечно ленивым. Часть 2: Графы зависимостей

Ранее мы обсуждали самые основы ленивой загрузки и то, почему она вообще важна. А в этой статье мы рассмотрим следующее: - Как бандлеры анализируют файлы исходного кода, строят деревья зависимостей и генерируют файлы для сборки. - Как они генерируют файлы JavaScript из исходного кода. - Как браузеры решают, какие сгенерированные файлы следует загружать, чтобы отобразить ленивую страницу/компонент. - И как мы можем уменьшить размер и количество загружаемых файлов, правильно настроив структуру файлов и корректно используя статический импорт.

https://habr.com/ru/articles/962888/

#javascript #webpack #lazy_load #performance_optimization #web #webразработка #frontend #react #typescript #frontendразработка