Уроки фреймворков React и Vue для повышения скорости страницы

В нашей постоянной погоне за скоростью страницы мы часто возвращаемся к одной и той же точке. Несмотря на усилия команд по продукту, маркетингу и развитию по мотивации технических команд, задачи, которые могли бы улучшить производительность сайта, часто откладываются из-за необходимости рефакторинга, и даже когда они выполняются, они не всегда дают полные результаты. В этом цикле полезно рассмотреть некоторые проницательные перспективы достижения реальной производительности. Например, какие уроки мы можем извлечь из скорости React.js и Vue.js или их расширений SSR (серверный рендеринг), таких как Next.js и Nuxt.js, по сравнению с другими платформами? Не пора ли оптимизировать МБ файлов jQuery и CSS? Когда очнутся крупные компании, жертвующие своей веб-производительностью ради неосведомленных фронтенд-разработчиков? Давайте рассмотрим эти вопросы один за другим.

Почему сайты на базе Next.js и Nuxt.js быстрые?

Платформы Next и Nuxt, представляющие собой оптимизированные для SEO структуры, построенные на React и Vue, отличаются высокой скоростью работы. Но почему эти платформы такие быстрые?

React.js и Vue.js представляют собой основанные на компонентах структуры, которые разбивают каждую страницу на подкомпоненты, как показано ниже.

Чтобы проиллюстрировать этот момент, давайте возьмем реальный пример: страницу со списком товаров электронной коммерции. Эту страницу со списком можно рассматривать как содержащую следующие подкомпоненты:

• заголовок
• Список
  • Информация о записи в листинге
    • Название страницы
    • Breadcrumb
    • Количество продуктов
  • ФИЛЬТР
    • фильтр категорий
    • Цена фильтра
    • ...
  • Сортировка
  • Карточки товаров
    • Фото продукта
  • Информация о продукте
    • Наименование
    • Цена продукта
      • Зачеркнутая цена
      • продажная цена
    • Учетная ставка
    • Информация о кампании
  • Нумерация страниц
  • Содержимое категории
• нижний колонтитул

При создании приложения на основе компонентов с помощью Nuxt.js каждый из этих компонентов кодируется отдельно и включается в главную страницу. Например, рассмотрим файл с именем ProductPhoto.js. Какие бы функции ни требовались для фотографий продукта (карусель, адаптивное отображение изображений и т. д.), JS-код пишется внутри этого компонента. Аналогично, в него включены только файлы CSS, используемые этим компонентом. Это означает, что при использовании компонента выполняются только файлы, необходимые каждому компоненту.

Как этот процесс в настоящее время осуществляется на большинстве веб-платформ?

Файл script.js содержит код для всего: от членства, фильтров и страниц корзины до меню, которое работает на всех страницах. Результат? 

Веб-сайты с JS-файл размером 3 МБ и CSS-файл размером 1.5 МБ. файл. Основная проблема заключается не только в размерах файлов, но и в том, что нельзя ожидать, что процессор среднего мобильного устройства Android выполнит тысячи строк кода за миллисекунды. Запуская только тот код, который вам нужен, вы можете добиться повышения производительности.

Как устранить ресурсы, блокирующие рендеринг?

Сегодня 32% из 1 миллиона лучших веб-сайтов используют библиотеку шрифтов Font Awesome, средний размер которой составляет около 250 КБ. Учитывая, что асинхронная загрузка не является предпочтительной из-за эффекта перелистывания, подумайте о том, сколько шрифтов видно на первом экране страницы, когда она открывается на мобильном устройстве или компьютере. Краткое исследование на 50 различных платформах выявило в среднем 3.4 используемых значка (чаще всего: корзина, пользователь, меню, уведомление). Таким образом, чтобы без проблем загрузить всего четыре иконки, мы загружаем всю библиотеку.

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

Что говорит нам использование Bootstrap и React JS?

Библиотека Bootstrap JS занимает 26% рынка на всех сайтах по всему миру, а использование React составляет около 4%. Bootstrap популярен благодаря своей гибкости и простоте использования, позволяющей быстро разрабатывать. Однако за эту гибкость приходится платить: в ваш проект включены общие функции JS, обширный охват кода и функции для функций, которые вы, возможно, никогда не будете использовать.

Итак, давайте спросим: что означает увеличение использования более чем на 100% от от 10,000 1,000 до XNUMX лучших сайтов указывают? Это показывает, что лучшие обращают детали в свою пользу, чтобы стать еще лучше.

Подводя итог, вместо того, чтобы переписывать наши сайты с помощью таких технологий, как Далее, Nuxt, Angular, React, Vueи т. д., мы должны понять, как эти технологии повышают скорость, и применить эти лучшие практики к нашим веб-приложениям.