ЭКСПЕРИМЕНТАЛЬНАЯ ОЦЕНКА ВЛИЯНИЯ РАЗДЕЛЕНИЯ КОДА И ОПТИМИЗАЦИИ ИЗОБРАЖЕНИЙ НА ПРОИЗВОДИТЕЛЬНОСТЬ ОДНОСТРАНИЧНОГО REACT-ПРИЛОЖЕНИЯ

Abstract

В работе исследовано раздельное и совместное влияние двух распространённых методов оптимизации клиентских веб-приложений: раз- деления JavaScript-кода по маршрутам и оптимизации доставки изображе- ний. Для эксперимента разработано одностраничное приложение на React с четырьмя функциональными разделами, локальным набором из 18 000 аналитических записей и восемью изображениями. Сформированы четы- ре эквивалентные production-сборки: базовая, с разделением кода, с преоб- разованием изображений JPEG в WebP и отложенной загрузкой, а также комплексно оптимизированная. Каждая конфигурация пять раз протести- рована с помощью Lighthouse в режиме мобильной эмуляции и симулируе- мого ограничения ресурсов. По медиане измерений комплексная оптимиза- ция снизила объём первоначально передаваемых данных с 7,85 до 0,31 МБ, уменьшила Largest Contentful Paint с 29,62 до 2,50 с и повысила Performance Score с 55 до 93. Установлено, что разделение кода преимущественно влия- ет на ранний вывод интерфейса и объём JavaScript, а оптимизация изобра- жений – на сетевой трафик и время отображения крупнейшего элемента. Совместное применение методов устраняет оба независимых узких места, однако требует контроля визуальной стабильности при использовании асинхронных компонентов.