or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

index.mdperformance-optimizations.mdplatform-options.mdpreset-configuration.mdreact-compiler.mdserver-components.md
tile.json

performance-optimizations.mddocs/

Performance Optimizations

Build-time optimizations including tree shaking, lazy imports, environment variable inlining, and platform-specific optimizations.

Capabilities

Lazy Imports

Improves app startup performance by deferring module initialization until first use.

interface LazyImportsOptions {
  /** Enable lazy imports transformation */
  lazyImports?: boolean;
}

/** Set of packages that should not be lazily imported due to side effects */
const lazyImportsBlacklist: Set<string>;

Usage Examples:

// Enable lazy imports (improves startup time)
module.exports = {
  presets: [
    ['babel-preset-expo', {
      native: {
        lazyImports: true
      }
    }]
  ]
};

// Access the blacklist of side-effect packages
const blacklist = require('babel-preset-expo/lazy-imports-blacklist.js');
console.log(blacklist); // Set(['expo', 'expo-asset', 'expo-task-manager'])

Lazy imports transform:

// Before
import { something } from 'expensive-package';
const result = something();

// After (with lazy imports)
const { something } = require('expensive-package');
const result = something();

Tree Shaking Support

Enables dead code elimination by preserving ES modules syntax for bundlers.

interface TreeShakingOptions {
  /** Disable import/export transform to preserve ESM for tree shaking */
  disableImportExportTransform?: boolean;
}

Usage Examples:

// Enable tree shaking (web platform default)
module.exports = {
  presets: [
    ['babel-preset-expo', {
      web: {
        disableImportExportTransform: true
      }
    }]
  ]
};

Platform Defaults:

  • Web: true (supports tree shaking)
  • Native: false (Metro requires CommonJS)

Environment Variable Inlining

Replaces environment variables with their values at build time for optimization.

interface EnvironmentInlining {
  /** Variables inlined at build time */
  inlineVariables: {
    'process.env.EXPO_OS': string;
    'process.env.EXPO_SERVER': boolean;
    'process.env.NODE_ENV': string; // production builds only
    '__DEV__': boolean; // production builds only
    'Platform.OS': string; // production builds only
    'typeof window': string; // when minifyTypeofWindow enabled
  };
}

Inlined Variables:

  • process.env.EXPO_OS → Platform string ('web', 'ios', 'android')
  • process.env.EXPO_SERVER → Server environment boolean
  • process.env.NODE_ENV → 'production' (production builds only)
  • __DEV__ → false (production builds only)
  • Platform.OS → Platform string (production builds only)

Platform.select Optimization

Optimizes React Native Platform.select calls by resolving them at build time.

interface PlatformSelectOptimization {
  /** Enabled in production builds only */
  minifyPlatformSelect: boolean;
}

Transformation Example:

// Before
const styles = Platform.select({
  ios: { color: 'blue' },
  android: { color: 'green' },
  web: { color: 'red' }
});

// After (on iOS production build)
const styles = { color: 'blue' };

typeof window Optimization

Optimizes window object type checks for different environments.

interface WindowOptimization {
  /** Enable typeof window runtime checks optimization */
  minifyTypeofWindow?: boolean;
}

Usage Examples:

// Enable window optimization (server environment default)
module.exports = {
  presets: [
    ['babel-preset-expo', {
      minifyTypeofWindow: true
    }]
  ]
};

// Platform-specific window optimization
module.exports = {
  presets: [
    ['babel-preset-expo', {
      web: {
        minifyTypeofWindow: false // Preserve for Web Workers
      },
      native: {
        minifyTypeofWindow: true // No window on native
      }
    }]
  ]
};

Transformation Example:

// Before
if (typeof window !== 'undefined') {
  // Client-side code
}

// After (server environment)
if (false) {
  // Dead code eliminated
}

// After (client environment)
if (true) {
  // Always executed
}

Hermes Optimization

Optimizes code for the Hermes JavaScript engine used in React Native.

interface HermesOptimization {
  /** Transform profile for Hermes optimization */
  unstable_transformProfile?: 'default' | 'hermes-stable' | 'hermes-canary';
}

Usage Examples:

// Optimize for Hermes (automatic when Hermes detected)
module.exports = {
  presets: [
    ['babel-preset-expo', {
      native: {
        unstable_transformProfile: 'hermes-stable'
      }
    }]
  ]
};

Profile Differences:

  • default: Standard JavaScript transformations
  • hermes-stable: Optimized for stable Hermes features
  • hermes-canary: Optimized for experimental Hermes features

Bundle Splitting Support

Detects dynamic exports for code splitting optimization.

interface BundleSplittingSupport {
  /** Detect dynamic exports for bundle splitting */
  detectDynamicExports: boolean;
}

This optimization helps bundlers identify:

  • Dynamic imports that can be split into separate chunks
  • Exports that are conditionally used
  • Code that can be lazily loaded

Dead Code Elimination

Combines multiple optimization techniques for maximum dead code removal:

  1. Environment Variable Inlining: Removes unreachable code branches
  2. Platform.select Optimization: Eliminates unused platform code
  3. typeof window Optimization: Removes environment-specific code
  4. Tree Shaking: Removes unused exports (web only)

Example Combined Effect:

// Before
if (process.env.NODE_ENV === 'development') {
  console.log('Debug info');
}

if (Platform.OS === 'ios') {
  return iosImplementation();
} else if (Platform.OS === 'android') {
  return androidImplementation();
}

// After (Android production build)
// Debug code removed, iOS code removed
return androidImplementation();