Expo Atlas: Visualize and Optimize Your Bundle Size

Welcome to Day 6 of the React Native Advent Calendar!

Today we’re exploring Expo Atlas - a bundle analyzer that shows you exactly what’s making your app large and how to fix it. If you’ve ever wondered “why is my bundle 5MB?”, this tool has the answers!

What is Expo Atlas?

Atlas is a bundle analyzer built into Expo (SDK 51+) that visualizes your app’s bundle. Unlike source map tools that show “unmapped” regions, Atlas uses Metro’s dependency graph to show you exactly what’s in your bundle.

Why it matters: Bundle size directly impacts startup time and memory usage. A 5MB bundle can take 10-15 seconds to load on slow 3G!

Quick Start

Enable Atlas with one environment variable:

# Start dev server with Atlas
EXPO_ATLAS=true npx expo start

# Press Shift + M → "Open expo-atlas"
# Or visit: http://localhost:8081/_expo/atlas

For production analysis:

# Export and analyze production bundle
EXPO_ATLAS=true npx expo export
npx expo-atlas .expo/atlas.jsonl

Pro tip: Add to package.json for quick access:

{
	"scripts": {
		"atlas": "EXPO_ATLAS=true expo start"
	}
}

How to Use Atlas

Open Atlas and you’ll see an interactive graph where:

• Bigger nodes = bigger files
• Lines show dependencies (what imports what)
• Colors indicate types (your code vs node_modules)

The power move: Cmd + Click any node to see:

• Exact file size
• What imports it
• What it imports
• Transformed code

This helps you trace why a large package ended up in your bundle!

Real-World Wins

1. Found the Culprit

Scenario: Bundle is 5MB, no idea why.

What Atlas shows: moment.js is 284KB for simple date formatting.

Fix: Switch to date-fns (11KB tree-shaken) → 270KB saved!

2. Caught Accidental Imports

Scenario: Added a small package, bundle grew 500KB.

What Atlas shows: Package imported all of lodash as a dependency.

Fix: Use lodash/specific-function imports → 450KB saved!

3. Found Dead Code

Scenario: Refactored app, suspect old code is still bundled.

What Atlas shows: Old module has zero “Imported By” references.

Fix: Delete unused code → Cleaner codebase!

Wrapping Up

Expo Atlas helps you find bundle bloat fast. Enable it, click around, find the biggest files, and optimize!

The Atlas workflow:

1. Run EXPO_ATLAS=true npx expo start
2. Press Shift + M → Open expo-atlas
3. Look for the biggest nodes
4. Cmd+click to see what imports them
5. Replace heavy dependencies or lazy load them

Want more? Check the Expo Atlas docs for advanced features like platform-specific analysis and CI integration.

Found a 500KB dependency you didn’t know about? Share your findings on Twitter!

Tomorrow we’ll explore Day 7’s topic - see you then! 🎄