Оптимизация производительности интерфейса — давняя проблема. Подытожим основные стратегии, основанные на текущем понимании:

  • Уменьшение размера
  • Ускорение возврата
  • Ленивая загрузка
  • Предварительная загрузка
  • Производительность рендеринга
  • Другие, такие как пользовательский опыт

💡 Далее эти пункты будут расширены.

Размер ресурса

  • Сжатие
  • Сжимайте JS, CSS и другие файлы с помощью инструментов объединения
  • Сжимайте изображения соответствующим образом или используйте службу изображений, которая поддерживает параметры изображения.
  • Включить сжатие на статическом сервере: например, GZIP, BR (Brotli)
  • Уровень импорта ресурсов
  • Анализ зависимостей с помощью webpack bundle analyzer
  • Замените большие библиотеки меньшими библиотеками с эквивалентными функциями, такими как moment ⇒ dayjs
  • CommonJS библиотеки не поддерживают Tree-shaking, но вы можете использовать плагины, подобные babel-plugin-import, для автоматизации импорта файлов глубокого уровня, чтобы избежать общего импорта.
  • Разделить webpack chunk (также для кэширования)

Скорость ресурса

  • Используйте dns-prefetch для получения IP-адреса заранее
  • Развернуть ресурсы на CDN
  • Используйте HTTP2 для параллельных запросов; HTTP3
  • Ресурсы кэша

Предварительная загрузка

  • Используйте prefetch для загрузки ресурсов заранее
  • Используйте APP автономных пакетов
  • Предварительная загрузка
  • Используйте SSR (что эквивалентно рендерингу HTML и получению динамических данных на стороне сервера, что позволяет выполнять эти задачи раньше)

Ленивая загрузка

  • Ленивая загрузка изображений
  • Компоненты ленивой загрузки

Производительность рендеринга

  • Обнаружение использования CSS с помощью CSS Overview в Chrome Devtools
  • Анализ узких мест рендеринга с помощью Performance инструментов
  • Используйте Vue или React Devtools для анализа rerender ситуации в фреймворке.

Другие

  • Мониторинг
  • Каркасные экраны
  • Объедините API с помощью таких методов, как BFF, чтобы уменьшить количество API.