/react-native-best-practices

Skill: Determine Library Size

Evaluate third-party library size impact before adding to your project.

Quick Command

# Check size before installing
# Visit: https://bundlephobia.com/package/[package-name]

# Or use CLI
npx bundle-phobia-cli <package-name>

When to Use

• Evaluating new dependencies
• Comparing alternative libraries
• Auditing existing dependencies
• Investigating bundle bloat

Tools Overview

bundlephobia.com

Usage

Visit bundlephobia.com and enter package name.

Shows

• Minified size: Raw JS size
• Minified + Gzipped: Network transfer size
• Download time: Estimated on various connections
• Dependencies: What else gets pulled in
• Composition: Breakdown by dependency

Example Analysis

react-native-paper
├── Minified: 312 kB
├── Gzipped: 78 kB
└── Dependencies: 12 packages
    ├── @callstack/react-theme-provider
    ├── color
    └── ...

pkg-size.dev

Backup when bundlephobia fails.

Visit pkg-size.dev with package name.

Difference: Actually installs package in web container, may be more accurate for edge cases.

Import Cost (VS Code Extension)

Install

Search "Import Cost" in VS Code extensions or:

code --install-extension wix.vscode-import-cost

Usage

Shows inline size next to imports:

import React from 'react';           // 6.5K (gzipped)
import lodash from 'lodash';         // 71.5K (gzipped: 24.7K)
import get from 'lodash/get';        // 8K (gzipped: 2.9K)

Limitations

• Uses Webpack internally (not Metro)
• May fail on React Native-specific packages
• Doesn't account for tree shaking

Bundlephobia, pkg-size.dev, and Import Cost measure JavaScript package cost. They do not capture native code added by React Native libraries such as maps, Reanimated, Firebase, camera, video, or analytics SDKs. For native dependencies, always verify the actual IPA/AAB/APK size after installation.

Comparison Workflow

Before Adding Dependency

1. Check on bundlephobia:

   https://bundlephobia.com/package/[package-name]

2. Compare alternatives:

   moment (289 kB) vs date-fns (75 kB) vs dayjs (6 kB)

3. Check what you actually need:

   • Full library import vs specific functions
   • Native alternative available?

After Adding

1. Analyze bundle (see bundle-analyze-js.md)
2. Verify actual impact matches expected
3. Check for duplicate dependencies

Common Large Dependencies

Quick Size Check Script

# Check size before installing
npx bundle-phobia-cli <package-name>

# Or use npm directly (less accurate)
npm pack <package-name> --dry-run 2>&1 | grep "total files"

Decision Rule

Prefer the smallest option that satisfies correctness and platform requirements, then verify the real app artifact. JS package size alone is not enough for React Native dependencies with native code.

Code Example: Optimizing Imports

// BAD: Full library
import _ from 'lodash';
_.get(obj, 'path.to.value');

// BETTER: Specific import
import get from 'lodash/get';
get(obj, 'path.to.value');

// BEST: Native JS
obj?.path?.to?.value;

Related Skills

• bundle-analyze-js.md - Verify actual bundle impact
• bundle-barrel-exports.md - Optimize how you import
• native-sdks-over-polyfills.md - Native alternatives to JS libs