Blazor WASM против React, сравнение производительности

Мы создали два приложения SPA для сравнения производительности: Blazor WASM и React.

Оба приложения имеют одинаковый макет:

Элемент управления вкладками с двумя вкладками в нем
Вкладки имеют 93 элемента управления формой и 2 сетки данных.
В одной из сеток данных есть настраиваемые строки шаблонов с 10 элементами управления формы в каждой строке.
Все элементы управления вводом имеют проверку ввода.
Все элементы управления имеют двустороннюю привязку данных. React использует «useEffect», Blazor использует «@bind».
Оба проекта используют UI-фреймворк. React использует MUI, Blazor использует MudBlazor.

Размеры файлов

Blazor WASM

Мы пробовали две сборки: стандартную и опережающую. Мы использовали профиль Release.

Версия .NET — это .NET 8 Preview 6.

Размещено в IIS.

Стандартная сборка, без сжатия

Стандартная сборка с включенной комиссией Brotli

Использование сжатия Brotli позволило сэкономить 64% от общего размера файла.

Опережающая сборка, без сжатия

Общий размер сборки AOT на 112 % больше, чем сборка по умолчанию.

Упреждающая сборка со сжатием Brotli

Реагировать

Самый маленький Blazor (стандартная сборка с Brotli) в 3 раза больше React без сжатия.

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

Для производительности мы использовали Lighthouse. Мы протестировали две вещи: навигацию (загрузка страницы) и интервал времени. Для Timespand мы выполнили некоторые базовые взаимодействия со страницами в обоих приложениях.

Блейзор ВАСМ

Навигация (Page Load) — стандартная сборка, без сжатия