Как узнать размер приложения Blazor WASM PWA

На чтение 3 мин Опубликовано 22.09.2024

Вопрос или проблема

У меня есть крупное приложение Blazor WASM PWA, которое загружается довольно долго после повторной публикации в Azure. Оно большое из-за количества компонентов Blazor и объема кода на C#, а не из-за большого количества файлов контента. Я использую AOT для ускорения выполнения большой части кода на C#, который должен выполняться после множества взаимодействий пользователей. Я также использую режим самодостаточной публики, что увеличивает размер приложения.

Мне любопытно, насколько велико приложение при первом запуске, но я не знаю, как это выяснить. После загрузки повторно опубликованного приложения, использование вкладки Сеть в инструментах разработчика Chrome, похоже, не помогает, поскольку загружаются только сервисный работник и мои небольшие файлы контента. И я ничего не вижу в портале Azure. Есть ли способ получить необходимую информацию?

Ответ или решение

Чтобы определить размер вашего Blazor WASM PWA приложения, существует несколько подходов, которые помогут вам получить необходимые данные.

Использование инструментария разработчика браузера (DevTools):
- Откройте ваше приложение в браузере Google Chrome.
- Включите инструментарий разработчика, нажав клавиши F12 или Ctrl + Shift + I.
- Перейдите на вкладку "Network" (Сеть).
- Очищайте текущую активность, нажав на иконку с ручкой или очистите фильтры.
- Перезагрузите страницу приложения, чтобы начать сбор данных о загрузке.
- После загрузки вы сможете увидеть все загруженные ресурсы. Обратите внимание на размер файлов такие как:
  - app.dll
  - dotnet.wasm
  - blazor.webassembly.js
  - *_pwa.* файлы (если они есть).
- Сложите размеры всех этих файлов, чтобы определить общий размер вашего приложения при первой загрузке.
Использование командной строки для анализа сборки:
- Вы можете использовать инструменты командной строки для анализа вашего проекта.
- Откройте терминал, перейдите в каталог вашего проекта и выполните команду:
```
dotnet publish -c Release -o ./publish --self-contained
```
- После выполнения этой команды, перейдите в каталог publish и используйте команду для отображения размера всех файлов:
```
du -sh *
```
- Это даст вам представление о размере каждого файла в вашей публикации.
Оптимизация и уменьшение размера:
- Если размер вашего приложения остается слишком большим, вы можете рассмотреть несколько методов для его оптимизации:
  - Убедитесь, что вы используете Linker (линкер) для удаления неиспользуемого кода.
  - Проверьте и удалите неиспользуемые зависимости пакетов.
  - Рассмотрите возможность отмены использования режима Publish "Self-contained", если это применимо к вашему сценарию, чтобы уменьшить размер приложения.
  - Оптимизируйте ваши Blazor компоненты и разбивайте их на более мелкие, если это возможно.
Мониторинг через Azure Portal:
- В Azure Portal можно провести мониторинг и увидеть, сколько запросов и сколько данных передается через CDN или другие ресурсы.
- Вы можете использовать Application Insights для более глубокого анализа производительности вашего приложения и понимания задержек в загрузке.

Используя указанные выше методы, вы сможете определить размер вашего Blazor WASM PWA приложения и предпринять шаги для его оптимизации.