Mobile React Native
· 10.12 · ред.Способы анализа работы приложения в React Native
Начнём с простого уровня. У вас есть приложение React Native. Оно пока в режиме разработки, то есть ваше приложение ещё не собрано для сторов (AppStore, Google Play, RuStore и т.д.), запущен сервер Metro. Что самое первое можно сделать? Запустить режим отладки и Show Perf Monitor. Это выведет плашку в окне приложения поверх всех окон, в которой три основных показателя: JS Thread FPS, UI Thread FPS и потребляемая приложением оперативка. Способ самый быстрый и уже даёт нам представление о том, что происходит. Мы начинаем видеть чрезмерный жор оперативки, проседания частоты кадров в UI (поздравляю, вы умудрились его посадить!) и в JS (довольно частое явление, но сильные проседания, например до 0 кадров, — это не есть норма 😊).
Идём дальше — React Debugger, мощный инструмент, который позволяет измерять время рендера компонентов, дерево компонентов и т.д.
Далее — Reactotron для анализа store (MobX/Redux), анализа сетевых запросов (ограниченного, многие запросы могут просто не показываться), вызываемых action в тех же сторах, удобного вывода log и т.д.
Proxyman — более продвинутый анализ запросов, причём даже для production-приложений.
И всё же давайте не забывать, что мы имеем дело с нативной платформой (Android/iOS). Поэтому там, где заканчивается обычный анализ, начинается нативный 🫡. Тут и начинается настоящее веселье, ведь это профилировщики потребления памяти, процессора, анализ утечек, разбор графа памяти для выявления циклических ссылок и т.д.
Например, в Android Studio есть Logcat, который выводит очень много полезной информации, предупреждений, ошибок. Его можно использовать для анализа уже собранного APK (production-сборка).
Также в Android Studio есть профилировщик для анализа потребления ресурсов приложением.
В Xcode есть Debug, который сразу же можно использовать для базового профилирования, так и для продвинутого. Например, вы можете смотреть иерархию нативных View, чтобы глубже видеть загруженность дерева View и их отношения. Также вы можете посмотреть Memory Graph, чтобы выявлять циклические связи, утечки памяти и т.д.
Если хотите ещё больше заморочиться, вы можете запустить приложение через Xcode: Product -> Profile. У вас запустится приложение в режиме production-сборки (без Metro, с собранным JS-бандлом), и там ещё больше инструментов, например анализ утечек памяти (уже от самого Xcode) и т.д.
В общем, подводя итог сказанного, — в RN у вас есть куча хороших инструментов, чтобы не сидеть подобно слепому, а понимать, что происходит с вашим приложением на самом деле…
еще контент автора
еще контент автора
Mobile React Native
· 10.12 · ред.войдите, чтобы увидеть
и подписаться на интересных профи