GitHubCreative Dev & WebGLidea-techcode

expo/atlas

expo·@expo·Sep 5, 2024

개요 React Native 앱의 번들 구성을 시각화하여 최적화 포인트를 찾을 수 있는 도구다. Expo와 Metro 번들러 환경에서 번들 크기 분석을 직관적인 UI로 제공한다.

핵심 내용 Metro 번들러의 소스맵을 분석해 각 모듈별 파일 크기, 의존성 트리, 중복 모듈 등을 인터랙티브한 트리맵 형태로 시각화한다. Expo 프로젝트에 내장되어 별도 설정 없이 바로 사용할 수 있다. 번들 크기가 커지는 원인을 모듈 단위로 추적할 수 있다.

기존 대비 차별점 기존 웹 번들러 분석 도구(webpack-bundle-analyzer 등)는 Metro 환경에 맞지 않았는데, Atlas는 Expo/Metro에 특화된 분석 도구다. Expo 공식 팀이 만들어 Expo SDK와 깊이 통합되어 있다.

활용 가능성 앱 로딩 속도 개선, 불필요한 의존성 제거, 트리 쉐이킹 효과 확인 등 React Native 앱 성능 최적화 작업에 필수적인 도구다. 대형 앱에서 번들 크기가 커지기 시작할 때 특히 유용하다.

참고 자료 - 원본

TypeScript216analyzerbundleexplorerexpometroreact-nativesourcemapvisualizer
#expo#bundle-analyzer#metro#optimization#typescript

Related in Creative Dev & WebGL