Рассмотрим способы улучшения метрик в Lighthouse с 38% до 82% и сокращения FCP (First Contentful Paint, время первой отрисовки контента веб-страницы) с 5,7 до 1,0-1,7 секунды (речь пойдет о проектах с использованием Design System Package  —  пакета дизайн-системы).

Метрики в Lighthouse

Начну с того, как мы, команда разработчиков Insider, пришли к этому. Разработав 11 различных продуктов для нашей компании, мы использовали дизайн-систему, чтобы лучше управлять фронтенд-частью этих продуктов.

Поскольку дизайн-система содержала все компоненты, был создан JavaScript-файл размером 13,6 МБ. Как вы понимаете, первоначальная загрузка пакета размером 13,6 МБ, даже при запуске одностраничного приложения, создает негативное впечатление о производительности и не радует пользователя.

Созданный в дизайн-системе файл размером 13 MB

Что мы предприняли?

Прежде всего отделили продукты друг от друга. Теперь каждый из них находится в отдельном репозитории. Это позволило сократить FCP с 5,7 до 3,4 секунды.

Следующим шагом был переход с Webpack (с помощью которого мы собираем пакет VueJS NPM) на Vite. В результате размер пакета сократился с 13,6 до 6 МБ. Но этого оказалось недостаточно.

Созданный в дизайн-системе файл размером 6 MB (gzip:1.3 MB)

Что изменилось при переходе на Vite?

  1. Быстрый сервер разработки: Vite может быстро запускать сервер разработки, позволяя мгновенно видеть изменения. Это значительно ускоряет процесс разработки и обеспечивает обратную связь в реальном времени.
  2. Модульная разработка: Vite имеет модульную структуру, предоставляя каждому компоненту и модулю свою область применения. Это позволяет работать над независимыми модулями.
  3. Поддержка динамического импорта: Vite поддерживает динамический импорт, что позволяет лучше анализировать зависимости и компилировать только те модули, которые используются.
  4. Задействование ESModule: Vite следует стандарту ESModule, позволяющему применять современные модули JavaScript, которые работают эффективнее, чем старые модульные системы, такие как CommonJS.
Механизм комплекта Webpack
Механизм комплекта Vite

Достаточно ли уменьшить пакет до 6 МБ (gzip: 1,3 МБ) с помощью Vite?

Наша дизайн-система создавала один файл JavaScript и активы. Это означало, что при каждом обновлении приходилось загружать 1,3 МБ. Как видно из приведенного ниже кода, мы экспортировали все компоненты в index.js. В результате получился один большой собранный JS-файл. Мы сократили его размер до 1,3 МБ с помощью Vite, но его нужно было уменьшить еще больше.

Экспортированные компоненты дизайн-системы

Именно на этом этапе мы поняли, что более логичным подходом будет использование RollupJS для компонентной системы сборки. С помощью этого инструмента можно каждый компонент экспортировать и собирать отдельно. В таком случае не придется загружать лишние компоненты для страницы, на которую заходит пользователь. Это позволит загружать меньшие фрагменты без риска дросселирования полосы пропускания, обеспечивая более быструю отдачу для других необходимых запросов и оперативное открытие страницы. 

Как мы реализовали это решение?

Мы настроили каждый компонент по отдельности, в результате чего для каждого из них была создана уникальная JS-сборка. Такой подход позволил использовать каждый компонент отдельно по мере необходимости.

vite.config.js (для этой части можно написать функцию)

В результате удалось уменьшить размер пакета до 4 КБ (с учетом используемых компонентов, при среднем размере компонента 35 КБ).

Размер компонентов в дизайн-системе
Метрики в Lighthouse

Итак, мы рассмотрели способы значительного улучшения метрик в Lighthouse и FCP в проектах с использованием пакета дизайн-системы. Заметив, что файл JavaScript размером 13,6 МБ негативно влияет на пользовательский опыт, мы предприняли несколько шагов для решения этой проблемы.

Сначала организовали компоненты в отдельные репозитории, что позволило сократить FCP с 5,7 до 3,4 секунды. Затем перешли с Webpack на Vite, из-за чего размер пакета сократился с 13,6 до 6 МБ. Экспортирование каждого компонента по отдельности с помощью RollupJS помогло еще больше уменьшить размер пакета. В результате размер загрузки составил всего 4 КБ, что дало пользователям возможность загружать только необходимые компоненты, а время первой отрисовки контента (FCP) сократилось примерно до 1 секунды.

Читайте также:

Читайте нас в Telegram, VK и Дзен


Перевод статьи Ali Osman Menekse: JS Performance Optimization with Vite and Rollupjs

Предыдущая статьяKotlin: продвинутые техники функционального программирования
Следующая статьяУпрощаем интеграцию Kafka со Spring Boot