Краткое резюме
Когда вы видите, что время первой отрисовки приложения React слишком велико в отчете Lighthouse Performance, вы можете легко улучшить его, используя react-snap.
Вступление
Я работал над приложением react PWA, во время аудита маяка просто проверял другие варианты в студии Lighthouse из-за Любопытства.
Когда я запускаю Отчет о производительности, он получает только 49%. Поэтому я решил выбить каждую проблему для повышения производительности.
От 49% до 73%
Это была моя ошибка, я провожу аудит в режиме разработки, а не в продакшене. После создания производственной сборки я запускаю аудит и получаю колоссальные 73%.
Теперь нужно сконцентрироваться на первой содержательной отрисовке. Прежде всего, что такое First Contentful Paint (или просто FCP)?
Первая содержательная краска
Первая отрисовка - это когда ваше веб-приложение начинает загружаться с пустой белой страницы до значимого содержимого. Это может быть что угодно, от текста, изображения (включая фоновые изображения), небелого холста или SVG.
Судя по изображению, которое вы заметили, Pinterest на самом деле загружает небольшой загрузчик для улучшения своей First Contentful Paint. Поэтому я решил добавить загрузчик до того, как страница была загружена, но мой аудиторский отчет остался прежним.
Отчет анализатора пакетов
Поэтому я решил проанализировать отчет о производственном пакете в моем приложении для реагирования.
Мы можем проанализировать размер пакета создания приложения React с помощью create-react-app с помощью source-map-explorer. Он создает отчет о размере пакета, вычисляя размер исходной карты для каждого узла дерева.
Шаг 1. Установите пакет
npm i source-map-explorer --dev
Шаг 2. Добавьте сценарии npm в свой package.json
"scripts": {
"analyze": "source-map-explorer 'build/static/js/*.js'",
}
Шаг 3. Создайте производственную сборку
npm run build
Шаг 4. Запустите команду "Анализировать", чтобы проанализировать размер пакета.
npm run analyze
Получив отчет, я узнал, что мои файлы стали больше, чем реальный производственный код реакции.
Из любопытства я решил проверить приложение Next.js, чтобы узнать разницу в производительности между React и next.js.
Отчет об аудите Next.JS
Я создаю сайт портфолио с помощью next.js, я просто запускаю на нем аудит производительности, и он получает огромное количество 98%.
Я знаю, что это был статический отрисованный сайт, а это значит, что для каждого маршрута next.js создает настоящий HTML-файл.
React-Snap
Я искал что-то, что извлекает все маршруты и создает HTML-страницу для каждого маршрута. К счастью, я нашел react-snap, react snap делает именно то, что я хочу.
Давайте настроим реакцию в моем проекте
Конфигурация
Конфигурация response-snap очень проста, всего за 3 шага
Шаг 1. Установите React-Snap
npm i react-snap --dev
Шаг 2. Добавьте сценарии npm в свой package.json
"scripts": {
"postbuild": "react-snap"
}
Шаг 3. Измените свой index.jsx файл
Всякий раз, когда мы создаем производственную сборку, response-snap создает для нас предварительно отрендеренный маршрут.
Получение 90% 🎉
После создания производственной сборки я снова запускаю аудит и получаю 90%
И все же осталось 10% 😞. Если вы можете их улучшить, дайте мне знать в комментарии
Спасибо за внимание! Если вам это понравилось, подумайте о том, чтобы подписаться на меня в Twitter и поделиться статьей со своими друзьями-разработчиками 🐋😀
