Автор оригинала: FreeCodeCamp Community Member.
Луань Орландии
Производительность значительно влияет на пользовательский опыт. GATSBY создает быстрые веб-сайты вне коробки.
При создании инструмента они заметили, что медленные веб-сайты медленные по-разному, но быстрые веб-сайты будут быстро подобными способами. Таким образом, подходы оптимизации выпечки в рамках приведены GATSBY.
С моего опыта, Гэтсби настроил WebPack построить наиболее оптимальную производительность. WebPack – это модуль Bundler для JavaScript, используемый многими интерфейсными проектами.
Смешивание статических сайтов с динамическими приложениями
GATSBY – это статический генератор веб-сайта, который использует реагирование. Он создает файлы HTML для каждой страницы, который имеет ваш сайт.
Поэтому при настроек вашего сайта Node.js установит приложение React для создания HTML-файлов с отображенным контентом для каждого маршрута. Это ядро GATSBY.
Давайте вернемся в основы, чтобы увидеть, почему это важно для производительности.
Когда пользователь обращается к странице через HTML-файл, браузер отображает содержимое. Без какого-либо кэша или JavaScript, используя якорный тег загрузит еще один HTML-файл при нажатии. В результате пользователь может придеться ждать или хуже, см. Пустотую страницу при регистрации контента.
Это самый традиционный способ, которым Web был разработан до тех пор, пока не появились отдельные приложения (SPA).
SPA оказывает страницу, обновляя контент с помощью JavaScript. Это намного быстрее обновить, чем загрузка статических файлов. Поскольку они загружают один HTML-файл и динамически обновляют эту страницу как пользователь взаимодействует.
React – это библиотека для обработки слоя просмотра для SPA. Такие рамки и библиотеки, такие как React, не знают, что рендерируйте, если только код JavaScript не запустится. Так что строить их по мере того, как спа-салоны будут резко влиять на Критический путь рендеринга Отказ
GATSBY имеет конфигурацию WebPack, чтобы обеспечить достаточно контента для первого визуализации:
- HTML теги
- JavaScript Код настроен как async , необходимо для взаимодействия пользователя, но не для первого визуализации
- CSS Как встроенный, так что не нужно их скачать
Код разделен и кэш
При строительстве страницы GATSBY может видеть, какие компоненты нуждаются в странице, и пусть WebPack автоматически разделяет код кода. Это применяется путем настройки Динамический импорт Отказ
Через этот путь браузер будет запросить только файлы, необходимые для страницы, а не весь сайт, ускоряя время взаимодействия со страницей.
В результате ссылки на другие страницы будут загружать свои файлы только тогда, когда пользователь взаимодействует со ссылкой, замедление навигации.
Чтобы избежать этой проблемы, конфигурация WebPack GATSBY применяет технику под названием Предварительная подготовка ссылок Отказ
После завершения браузера загрузка страницы, она молча ищет ссылки с атрибутами Prefetch для их загрузки. Затем, когда пользователь нажимает на ссылку, файлы, запрошенные на страницу, будут иметь большие шансы, чтобы быть уже в кэше.
Каждая страница – это приложение React
Навигация через страницы на статическом веб-сайте все еще требует нагрузки HTML-файлов, но не для GATSBY – они реагируют приложения.
Каждый якорный бирк для другой страницы станет маршрутом по Достичь маршрутизатора (Инструмент для создания маршрутов на реагирование с доступностью). Похоже, он меняется из одного HTML-файла на другой, когда на самом деле это спа, обновление контента на странице.
Оптимизация изображения
HTTP Archive Отслеживает множество популярных веб-сайтов, большинство типов данных, запрошенных страницами, являются изображениями.
Оптимизация изображений может быть одним из лучших улучшений производительности на веб-сайте.
Меньшее количество байтов для загрузки означает меньше необходимой пропускной способности, поэтому браузер может скачать и рендерировать контент быстрее. Это некоторые из оптимизаций, которые мы можем сделать:
- Изменить размер до того же количества пространства Это потребность
- Генерировать Отзывчивые изображения С разными разрешениями для рабочего стола и телефонов
- Удалить метаданные и применить сжатие
- Применить ленивую нагрузку для ускорения нагрузки на начальную страницу
- Отображение заполнителя, пока изображение загружается
Это может принять много усилий, а GATSBY имеет решение: весь этот процесс может быть автоматизирован.
Как много инструментов в GATSBY, GATSBYJS-Image питается от Graphql. Этот плагин устанавливает изображения с разными разрешениями для загрузки. Это создает несколько миниатюр и применяет сжатие. Все это на этапе здания.
Когда изображение загружается, «размытие» методика отображает предварительный просмотр в очень низком изображении, который уже находится в файле HTML (или просто на заднем плане). Вся работа уменьшается в запросах кодирования GraphQL для создания автоматизированной оптимизации. Проверьте эту демонстрацию:
Минификация и уникальные имена файлов
Эти методы уже широко используются популярными каркасами и библиотеками, а в GATSBY существует не так много раз.
Все файлы полезны По умолчанию при строительстве с WebPack. Потому что браузеры не заботятся о прекрасном коде, так почему бы не написать все в одной строке?
Файлы уникальны при построении, назначая хеш на имя файла. Если что-то изменяется, для файла дается новое имя.
Причина этого состоит в том, чтобы позволить серверу, которое проводит эти файлы, чтобы дать длительную продолжительность к кешированию браузера.
Поэтому, когда пользователь возвращается на сайт, у них уже есть файлы. Обновления в ваших файлах дадут новое имя файла при построении. Таким образом, браузер загружает файл, потому что не будет совпадения с одним из кеша.
Больше ресурсов и за пределами
Гэтсби заботится о оптимизации производительности, чтобы вам не нужно.
Если вам более любопытно, как GATSBY работает под капотом, проверьте Документация Отказ
Я также рекомендую этот вебинар из команды GATSBY, За кулисами: что делает GATSBY отличным Отказ
Я преподаю Гэтсби на Удемии и работал в развитии Сайт компании С GATSBY, а также мой Персональный сайт Отказ
Я преподаю и распространяю, насколько удивительна Гэтсби. Подпишись на меня в Твиттере Подробнее темы о Tech и Gatsby.
Оригинал: “https://www.freecodecamp.org/news/how-gatsby-is-so-blazing-fast-c99a6f2d405e/”