🚀 React Native Optimizer

Production-grade CLI tool and library for optimizing React Native & Node.js projects

Automatically detect unused code, analyze dependencies, optimize bundle sizes, and generate comprehensive reports with zero configuration.

⚡ Quick Start • ✨ Features • � API • 🤝 Contributing

⚡ Quick Start

# Run instantly with npx (recommended)
npx react-native-optimizer analyze

# Or install globally
npm install -g react-native-optimizer
rnopt analyze

# Or install as project dependency
npm install --save-dev react-native-optimizer

That's it! Get comprehensive insights into your React Native or Node.js project in seconds with zero configuration.

🔍 React Native Optimizer
Analyzing project: my-awesome-app
Project type: 📱 react-native
────────────────────────────────────────────────────────────
📊 Analysis Results (4.3s)
   Files: 247 | Lines: 15,432 | Size: 892.4 KB
────────────────────────────────────────────────────────────
⚠️  Found Issues
   📄 3 files with unused imports
   🗑️ 2 unused files (3.2 KB)
   📦 2 unused packages (828 KB)
   ⚠️ 1 deprecated package
────────────────────────────────────────────────────────────
💡 Quick Wins
   • Remove unused imports → cleaner code
   • Delete unused files → save 3.2KB
   • Uninstall unused packages → save 828KB
   • Update deprecated packages → improve security
────────────────────────────────────────────────────────────
✨ 8 optimization opportunities found!
🌐 Interactive report: ./optimizer-report.html

🎯 Why Use This?

• 🔍 Zero Configuration - Works out of the box with React Native & Node.js projects
• ⚡ Lightning Fast - Powered by Babel AST parsing for accurate analysis
• 📊 Beautiful Reports - Interactive HTML reports with charts and actionable insights
• 🔧 CI/CD Ready - Perfect for automated code quality checks
• 🛡️ Safe & Secure - Read-only analysis, never modifies your code
• 📦 Production Tested - Used by teams to optimize real-world applications

✨ Key Features

🔍 Comprehensive Analysis

• Unused Import Detection - Find and remove unused imports with precise AST parsing
• Dead Code Elimination - Identify unused files safe for removal
• Package Dependency Analysis - Detect unused and deprecated packages
• Bundle Size Optimization - Analyze build outputs and identify bloat

📊 Professional Reporting

• Interactive HTML Reports - Beautiful visualizations with charts and metrics
• JSON Export - Perfect for CI/CD integration and automation
• Actionable Insights - Get specific commands to fix issues

🚀 Framework Intelligence

• React Native Aware - Handles Metro, Expo, and native dependencies
• Node.js Optimized - Supports Express, NestJS, Prisma, and more
• Zero Configuration - Works out of the box with smart defaults
• Framework Safety - Never flags critical framework dependencies

📦 Installation

Global Installation (Recommended)

npm install -g react-native-optimizer

Project Installation

npm install --save-dev react-native-optimizer
# or
yarn add --dev react-native-optimizer

Use with npx (No Installation)

npx react-native-optimizer analyze

🚀 Usage

Basic Commands

# Analyze current project (includes package analysis + HTML report)
npx rnopt analyze

# Quick analysis without HTML report
npx rnopt analyze --no-html

# Full analysis with build insights
npx rnopt analyze --build --verbose

# Save results to JSON for CI/CD
npx rnopt analyze --output report.json --no-html

CLI Options

| Option | Description | Default | |--------|-------------|---------| | --build | Include bundle size analysis | false | | --no-html | Skip HTML report generation | false | | --no-packages | Skip package dependency analysis | false | | --verbose | Show detailed analysis logs | false | | --output <file> | Save JSON report to file | - | | --type <type> | Force project type (react-native, node) | auto-detect |

💻 API Usage

TypeScript/ES6

import { optimizeProject, generateHtmlReport } from 'react-native-optimizer';

// Simple analysis
const result = await optimizeProject('./my-project');
console.log(`Found ${result.unusedImports.length} unused imports`);

// Generate HTML report
const reportPath = generateHtmlReport(result, './my-project');
console.log(`Report saved to: ${reportPath}`);

JavaScript/CommonJS

const { optimizeProject } = require('react-native-optimizer');

optimizeProject('./my-project')
  .then(result => {
    console.log('Analysis complete:', {
      unusedImports: result.unusedImports.length,
      unusedFiles: result.unusedFiles.length,
      unusedPackages: result.packageAnalysis?.unusedPackages.length || 0
    });
  })
  .catch(console.error);

Main Functions

optimizeProject(projectPath, options?)

interface OptimizeOptions {
  includeBuildAnalysis?: boolean;    // Bundle size analysis
  includePackageAnalysis?: boolean; // Package analysis (default: true)
}

interface OptimizerResult {
  success: boolean;
  projectType: 'react-native' | 'node' | 'unknown';
  projectStats: { totalFiles: number; totalLines: number; totalSize: number; };
  unusedImports: Array<{ file: string; imports: string[]; }>;
  unusedFiles: Array<{ path: string; size: number; }>;
  packageAnalysis?: {
    unusedPackages: Array<{ name: string; version: string; size: number; }>;
    deprecatedPackages: Array<{ name: string; reason: string; }>;
  };
  suggestions: string[];
}

generateHtmlReport(result, projectPath, outputPath?)

Generates an interactive HTML report from analysis results.

🔧 CI/CD Integration

GitHub Actions

name: Code Quality
on: [push, pull_request]

jobs:
  optimize:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '18'
      - name: Install dependencies
        run: npm ci
      - name: Run React Native Optimizer
        run: npx react-native-optimizer analyze --output report.json --no-html
      - name: Upload artifacts
        uses: actions/upload-artifact@v3
        with:
          name: optimization-report
          path: report.json

GitLab CI

code_quality:
  image: node:18
  script:
    - npm ci
    - npx react-native-optimizer analyze --output gl-code-quality-report.json --no-html
  artifacts:
    reports:
      codequality: gl-code-quality-report.json

Jenkins Pipeline

pipeline {
  agent any
  stages {
    stage('Code Quality') {
      steps {
        sh 'npm ci'
        sh 'npx react-native-optimizer analyze --output report.json --no-html'
        publishHTML([
          allowMissing: false,
          alwaysLinkToLastBuild: true,
          keepAll: true,
          reportDir: '.',
          reportFiles: 'report.json',
          reportName: 'Optimization Report'
        ])
      }
    }
  }
}

⚙️ Configuration

Project Configuration (.optimizerrc.json)

{
  "buildAnalysis": {
    "enabled": false,
    "bundleThreshold": 1024
  },
  "packageAnalysis": {
    "enabled": true,
    "checkDeprecated": true
  },
  "excludePatterns": [
    "**/*.test.*",
    "**/fixtures/**",
    "**/__mocks__/**",
    "**/dist/**",
    "**/build/**"
  ],
  "logLevel": "INFO"
}

Package.json Configuration

{
  "reactNativeOptimizer": {
    "excludePatterns": ["**/test/**"],
    "packageAnalysis": { "enabled": true },
    "logLevel": "WARN"
  }
}

Environment Variables

OPTIMIZER_LOG_LEVEL=DEBUG     # Set log verbosity
OPTIMIZER_NO_COLOR=true       # Disable colored output
OPTIMIZER_MAX_FILES=10000     # Limit files processed

📂 What Gets Analyzed

Supported Project Types

• React Native - Metro configs, platform directories, native dependencies
• Node.js - Express apps, APIs, microservices, CLI tools
• Universal - Any TypeScript/JavaScript project

Code Analysis

• Included: .js, .jsx, .ts, .tsx source files, import/export patterns
• Excluded: Test files, config files, build outputs, type definitions
• Smart Filtering: Automatically excludes framework-specific files

Package Analysis

• Unused Detection - Scans source code for actual package usage
• Deprecation Check - Queries npm registry for package status
• Size Calculation - Estimates potential space savings

❓ FAQ

Q: Does this tool modify my code?
A: No, it's read-only analysis. We never modify your source code.

Q: How accurate is the unused code detection?
A: Very accurate! We use Babel AST parsing instead of regex for precise analysis.

Q: Can I use this in CI/CD pipelines?
A: Absolutely! Many teams use it to fail builds with too many issues.

Q: Does it work with monorepos?
A: Yes! Run it in each package directory or at the root level.

Q: Is it safe for production projects?
A: Yes, it's completely safe and used by production teams worldwide.

🤝 Contributing

We love contributions! Here's how to get started:

# 1. Fork & clone the repo
git clone https://github.com/junaidsaleemtkxel/react-native-optimizer
cd react-native-optimizer

# 2. Install dependencies
npm install

# 3. Build & test
npm run build
npm test

# 4. Test your changes
npx rnopt analyze ./test-project

See our Contributing Guide for detailed guidelines.

🌐 Community & Support

• 🐛 Report Issues: GitHub Issues
• 💬 Discussions: GitHub Discussions
• 📋 Roadmap: Project Roadmap
• 📧 Email: [email protected]

📄 License

MIT © Junaid Saleem

🌟 Show Your Support

Found this useful? Help us grow the community:

• ⭐ Star this repo if it helped optimize your project
• 🐦 Share on Twitter with #ReactNativeOptimizer
• 📝 Write a review or blog post about your experience
• 🤝 Contribute improvements and new features

⭐ Star on GitHub • 📦 View on npm • 📚 Read the Docs

Built for developers, by developers 🚀