一、启动过程深度剖析

1.1 React Native 启动流程详解

// React Native 启动时间线分析
const RN_STARTUP_TIMELINE = {
  // 1. 原生启动阶段 (iOS/Android)
  'Native Startup': {
    time: '100-500ms',
    activities: [
      '加载原生库和框架',
      '初始化JavaScript引擎',
      '创建主UI线程',
      '加载应用bundle'
    ],
    optimizationTarget: '减少预加载库大小'
  },
  
  // 2. JavaScript引擎初始化
  'JS Engine Init': {
    time: '50-200ms',
    activities: [
      '初始化Hermes/V8引擎',
      '加载JavaScript运行时',
      '执行全局代码',
      '初始化React环境'
    ],
    optimizationTarget: '减少全局代码执行'
  },
  
  // 3. 应用代码加载
  'App Code Loading': {
    time: '200-1000ms',
    activities: [
      '解析和执行bundle',
      '执行模块初始化',
      '加载第三方库',
      '执行应用初始化逻辑'
    ],
    optimizationTarget: '代码分割和懒加载'
  },
  
  // 4. React渲染
  'React Rendering': {
    time: '100-300ms',
    activities: [
      '创建React元素树',
      '协调和渲染',
      '挂载组件',
      '执行useEffect'
    ],
    optimizationTarget: '优化首屏渲染'
  },
  
  // 5. 原生组件挂载
  'Native Mounting': {
    time: '50-200ms',
    activities: [
      '创建原生视图',
      '设置布局',
      '执行动画',
      '最终显示'
    ],
    optimizationTarget: '减少初始视图复杂度'
  }
};

1.2 启动性能瓶颈诊断

// 启动性能分析工具
import { Performance } from 'react-native';

class StartupProfiler {
  constructor() {
    this.metrics = {
      nativeStart: null,
      jsStart: null,
      appStart: null,
      renderStart: null,
      complete: null
    };
  }
  
  // 标记关键时间点
  markNativeStart() {
    this.metrics.nativeStart = Performance.now();
  }
  
  markJSStart() {
    this.metrics.jsStart = Performance.now();
  }
  
  markAppStart() {
    this.metrics.appStart = Performance.now();
  }
  
  markRenderStart() {
    this.metrics.renderStart = Performance.now();
  }
  
  markComplete() {
    this.metrics.complete = Performance.now();
    this.analyze();
  }
  
  analyze() {
    const stages = {
      nativeInit: this.metrics.jsStart - this.metrics.nativeStart,
      jsInit: this.metrics.appStart - this.metrics.jsStart,
      appInit: this.metrics.renderStart - this.metrics.appStart,
      render: this.metrics.complete - this.metrics.renderStart,
      total: this.metrics.complete - this.metrics.nativeStart
    };
    
    console.log('🚀 启动性能分析报告:');
    console.log(`原生初始化: ${stages.nativeInit}ms`);
    console.log(`JS引擎初始化: ${stages.jsInit}ms`);
    console.log(`应用代码加载: ${stages.appInit}ms`);
    console.log(`React渲染: ${stages.render}ms`);
    console.log(`总启动时间: ${stages.total}ms`);
    
    // 识别瓶颈
    const bottleneck = Object.entries(stages)
      .slice(0, -1)
      .sort((a, b) => b[1] - a[1])[0];
    
    console.log(`🔍 主要瓶颈: ${bottleneck[0]} (${bottleneck[1]}ms)`);
    
    return {
      stages,
      bottleneck
    };
  }
}

// 使用示例
const profiler = new StartupProfiler();

// 在合适的地方调用
// iOS: application:didFinishLaunchingWithOptions:
// Android: onCreate()
profiler.markNativeStart();

// index.js 中
profiler.markJSStart();

// App.js 中
profiler.markAppStart();

// 首屏组件渲染时
profiler.markRenderStart();

// 应用完全就绪时
profiler.markComplete();

二、原生层优化策略

2.1 iOS 原生优化

// AppDelegate.m - 优化版本
#import 
#import 
#import 

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application 
    didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  
  // 1. 预加载关键组件（异步）
  dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_HIGH, 0), ^{
    [self preloadCriticalComponents];
  });
  
  // 2. 延迟非必要初始化
  RCTBridge *bridge = [[RCTBridge alloc] 
    initWithDelegate:self
    launchOptions:launchOptions];
  
  // 3. 优化启动画面
  UIViewController *rootViewController = [UIViewController new];
  
  // 使用静态启动图（避免复杂动画）
  UIImageView *splashView = [[UIImageView alloc] 
    initWithFrame:[UIScreen mainScreen].bounds];
  splashView.image = [UIImage imageNamed:@"SplashScreen"];
  splashView.contentMode = UIViewContentModeScaleAspectFill;
  [rootViewController.view addSubview:splashView];
  
  // 4. 创建React根视图
  RCTRootView *rootView = [[RCTRootView alloc] 
    initWithBridge:bridge
    moduleName:@"YourAppName"
    initialProperties:nil];
  
  // 5. 设置背景色与启动图一致
  rootView.backgroundColor = [[UIColor alloc] 
    initWithRed:1.0f green:1.0f blue:1.0f alpha:1];
  
  rootViewController.view = rootView;
  self.window.rootViewController = rootViewController;
  [self.window makeKeyAndVisible];
  
  // 6. 延迟移除启动画面
  dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.5 * NSEC_PER_SEC)), 
    dispatch_get_main_queue(), ^{
      [UIView transitionWithView:splashView
        duration:0.3
        options:UIViewAnimationOptionCurveEaseOut
        animations:^{
          splashView.alpha = 0;
        }
        completion:^(BOOL finished) {
          [splashView removeFromSuperview];
        }];
  });
  
  return YES;
}

// 预加载关键组件
- (void)preloadCriticalComponents {
  // 预加载字体
  UIFont *font = [UIFont fontWithName:@"CustomFont" size:16];
  
  // 预加载图片缓存
  UIImage *cachedImage = [UIImage imageNamed:@"critical_image"];
  
  // 预初始化核心服务
  [SomeCoreService sharedInstance];
}

// 懒加载JS bundle
- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge {
#if DEBUG
  return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index"];
#else
  // 生产环境使用本地bundle
  return [[NSBundle mainBundle] URLForResource:@"main" 
    withExtension:@"jsbundle"];
#endif
}

// 启用Hermes引擎（RN 0.60+）
- (BOOL)useHermes {
#if DEBUG
  return NO; // Debug模式下使用JSC方便调试
#else
  return YES; // 生产环境使用Hermes提升性能
#endif
}

@end

2.2 Android 原生优化

// MainApplication.java - 优化版本
package com.yourapp;

import android.app.Application;
import com.facebook.react.PackageList;
import com.facebook.react.ReactApplication;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint;
import com.facebook.react.defaults.DefaultReactNativeHost;
import com.facebook.soloader.SoLoader;
import java.util.List;

public class MainApplication extends Application implements ReactApplication {
  
  private static SplashScreenManager splashScreenManager;
  
  private final ReactNativeHost mReactNativeHost =
      new DefaultReactNativeHost(this) {
        @Override
        public boolean getUseDeveloperSupport() {
          return BuildConfig.DEBUG;
        }

        @Override
        protected List<ReactPackage> getPackages() {
          @SuppressWarnings("UnnecessaryLocalVariable")
          List<ReactPackage> packages = new PackageList(this).getPackages();
          
          // 延迟加载非必要包
          packages.removeIf(pkg -> 
            pkg.getClass().getSimpleName().contains("NonEssentialPackage")
          );
          
          return packages;
        }

        @Override
        protected String getJSMainModuleName() {
          return "index";
        }

        @Override
        protected String getJSBundleFile() {
          // 自定义bundle加载逻辑
          if (BuildConfig.DEBUG) {
            return super.getJSBundleFile();
          } else {
            // 生产环境使用预加载的bundle
            return "assets://index.android.bundle";
          }
        }

        @Override
        protected boolean isNewArchEnabled() {
          return BuildConfig.IS_NEW_ARCHITECTURE_ENABLED;
        }

        @Override
        protected Boolean isHermesEnabled() {
          // 启用Hermes引擎
          return BuildConfig.IS_HERMES_ENABLED;
        }
      };

  @Override
  public ReactNativeHost getReactNativeHost() {
    return mReactNativeHost;
  }

  @Override
  public void onCreate() {
    super.onCreate();
    
    // 1. 预加载SoLoader（异步）
    Thread preloadThread = new Thread(() -> {
      SoLoader.init(this, false);
    });
    preloadThread.setPriority(Thread.MAX_PRIORITY);
    preloadThread.start();
    
    // 2. 初始化启动屏管理器
    splashScreenManager = new SplashScreenManager(this);
    
    // 3. 延迟非必要初始化
    if (!BuildConfig.DEBUG) {
      // 生产环境优化
      delayNonCriticalInitialization();
    }
    
    // 4. 启用新架构（如果需要）
    if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
      DefaultNewArchitectureEntryPoint.load();
    }
    
    // 5. 初始化React Native
    ReactNativeFlipper.initializeFlipper(this, getReactNativeHost().getReactInstanceManager());
  }
  
  private void delayNonCriticalInitialization() {
    // 将非关键初始化延迟到应用启动后
    Handler handler = new Handler(Looper.getMainLooper());
    handler.postDelayed(() -> {
      // 初始化分析、推送等非关键服务
      initializeAnalytics();
      initializePushNotifications();
    }, 3000); // 延迟3秒
  }
  
  public static SplashScreenManager getSplashScreenManager() {
    return splashScreenManager;
  }
}

// SplashScreenManager.java - 自定义启动屏管理
public class SplashScreenManager {
  private static Dialog splashDialog;
  private final Context context;
  
  public SplashScreenManager(Context context) {
    this.context = context;
  }
  
  public void show() {
    if (splashDialog != null && splashDialog.isShowing()) {
      return;
    }
    
    splashDialog = new Dialog(context, android.R.style.Theme_Translucent_NoTitleBar);
    splashDialog.setCancelable(false);
    
    // 使用简单的ImageView而不是复杂布局
    ImageView splashView = new ImageView(context);
    splashView.setImageResource(R.drawable.splash_screen);
    splashView.setScaleType(ImageView.ScaleType.CENTER_CROP);
    
    splashDialog.setContentView(splashView);
    splashDialog.show();
  }
  
  public void hide() {
    if (splashDialog != null && splashDialog.isShowing()) {
      // 添加淡出动画
      splashDialog.getWindow().getDecorView()
        .animate()
        .alpha(0f)
        .setDuration(300)
        .withEndAction(() -> {
          splashDialog.dismiss();
          splashDialog = null;
        })
        .start();
    }
  }
}

2.3 启动屏优化

// react-native-bootsplash - 专业启动屏方案
// 1. 安装：yarn add react-native-bootsplash

// 2. iOS配置 (AppDelegate.m)
#import "RNBootSplash.h"

// 在didFinishLaunchingWithOptions中
- (BOOL)application:(UIApplication *)application 
    didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  // ... 其他配置
  
  [RNBootSplash initWithStoryboard:@"BootSplash" 
    rootView:rootView];
  
  return YES;
}

// 3. Android配置 (MainActivity.java)
import com.zoontek.rnbootsplash.RNBootSplash;

@Override
protected void onCreate(Bundle savedInstanceState) {
  RNBootSplash.init(this); // 初始化启动屏
  super.onCreate(savedInstanceState);
}

// 4. React Native中使用
import RNBootSplash from 'react-native-bootsplash';

// 在App.js中
function App() {
  useEffect(() => {
    const init = async () => {
      // 执行初始化任务
      await initializeApp();
      
      // 隐藏启动屏（可添加动画）
      RNBootSplash.hide({ 
        fade: true,
        duration: 500 
      });
    };
    
    init();
  }, []);
  
  return <RootNavigator />;
}

// 5. 自定义启动屏组件
const CustomSplashScreen = () => {
  return (
    <View style={styles.container}>
      <Animated.Image
        source={require('./assets/splash-icon.png')}
        style={[
          styles.logo,
          {
            transform: [
              {
                scale: splashAnimation.interpolate({
                  inputRange: [0, 1],
                  outputRange: [0.8, 1.2],
                }),
              },
            ],
          },
        ]}
      />
      <Animated.Text
        style={[
          styles.text,
          {
            opacity: textAnimation,
          },
        ]}>
        Loading...
      </Animated.Text>
    </View>
  );
};

三、JavaScript 层优化

3.1 代码分割与懒加载

// 使用React.lazy和Suspense进行代码分割
import React, { lazy, Suspense } from 'react';
import { View, ActivityIndicator } from 'react-native';

// 1. 懒加载屏幕组件
const HomeScreen = lazy(() => import('./screens/HomeScreen'));
const ProfileScreen = lazy(() => import('./screens/ProfileScreen'));
const SettingsScreen = lazy(() => import('./screens/SettingsScreen'));

// 2. 懒加载重型组件
const HeavyChart = lazy(() => import('./components/HeavyChart'));
const ComplexForm = lazy(() => import('./components/ComplexForm'));

// 3. 预加载策略
class Preloader {
  static cache = new Map();
  
  static preload(modulePath) {
    if (!this.cache.has(modulePath)) {
      this.cache.set(modulePath, import(modulePath));
    }
    return this.cache.get(modulePath);
  }
}

// 4. 路由级代码分割
const createLazyScreen = (loader, placeholder = null) => {
  const LazyComponent = lazy(loader);
  
  return (props) => (
    <Suspense fallback={placeholder || <DefaultLoader />}>
      <LazyComponent {...props} />
    </Suspense>
  );
};

// 5. 按需加载路由配置
const routes = {
  Home: createLazyScreen(() => import('./screens/HomeScreen')),
  Profile: createLazyScreen(() => import('./screens/ProfileScreen')),
  Settings: createLazyScreen(() => import('./screens/SettingsScreen')),
};

// 6. 动态导入优化
const withRetry = (loader, retries = 3, interval = 1000) => {
  return new Promise((resolve, reject) => {
    const attempt = (attemptNumber) => {
      loader()
        .then(resolve)
        .catch((error) => {
          if (attemptNumber <= retries) {
            console.log(`Retry ${attemptNumber}/${retries} for module`);
            setTimeout(() => attempt(attemptNumber + 1), interval);
          } else {
            reject(error);
          }
        });
    };
    attempt(1);
  });
};

// 7. 应用示例
function App() {
  const [isReady, setIsReady] = useState(false);
  
  useEffect(() => {
    // 预加载关键模块
    const preloadCriticalModules = async () => {
      // 预加载导航相关
      await Preloader.preload('@react-navigation/native');
      await Preloader.preload('@react-navigation/stack');
      
      // 预加载UI组件
      await Preloader.preload('react-native-vector-icons/Ionicons');
      
      // 预加载业务模块
      await Preloader.preload('./services/api');
      await Preloader.preload('./utils/storage');
      
      setIsReady(true);
    };
    
    preloadCriticalModules();
  }, []);
  
  if (!isReady) {
    return <SplashScreen />;
  }
  
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen 
          name="Home" 
          component={routes.Home} 
          options={{ headerShown: false }}
        />
        <Stack.Screen name="Profile" component={routes.Profile} />
        <Stack.Screen name="Settings" component={routes.Settings} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

// 默认加载组件
const DefaultLoader = () => (
  <View style={styles.loaderContainer}>
    <ActivityIndicator size="large" color="#007AFF" />
  </View>
);

3.2 模块初始化优化

// 模块初始化管理器
class ModuleInitializer {
  static stages = {
    CRITICAL: 'critical',     // 启动时必须
    IMPORTANT: 'important',   // 首屏需要
    BACKGROUND: 'background', // 可延迟
    LAZY: 'lazy'             // 按需加载
  };
  
  constructor() {
    this.modules = new Map();
    this.initialized = new Set();
  }
  
  // 注册模块
  register(name, initializer, stage = this.stages.IMPORTANT) {
    this.modules.set(name, { initializer, stage });
  }
  
  // 按阶段初始化
  async initializeByStage(stage) {
    const modules = Array.from(this.modules.entries())
      .filter(([_, config]) => config.stage === stage);
    
    const promises = modules.map(async ([name, config]) => {
      if (this.initialized.has(name)) return;
      
      try {
        const startTime = Date.now();
        await config.initializer();
        const duration = Date.now() - startTime;
        
        console.log(`✅ ${name} 初始化完成 (${duration}ms)`);
        this.initialized.add(name);
      } catch (error) {
        console.error(`❌ ${name} 初始化失败:`, error);
      }
    });
    
    await Promise.all(promises);
  }
  
  // 智能初始化
  async initialize() {
    const startTime = Date.now();
    
    // 1. 关键模块（同步）
    console.log('🚀 初始化关键模块...');
    await this.initializeByStage(this.stages.CRITICAL);
    
    // 2. 重要模块（异步，不阻塞）
    setTimeout(() => {
      this.initializeByStage(this.stages.IMPORTANT);
    }, 0);
    
    // 3. 后台模块（延迟）
    setTimeout(() => {
      this.initializeByStage(this.stages.BACKGROUND);
    }, 3000);
    
    const totalTime = Date.now() - startTime;
    console.log(`🎉 核心初始化完成 (${totalTime}ms)`);
  }
  
  // 按需初始化
  async initializeLazy(name) {
    const module = this.modules.get(name);
    if (!module || module.stage !== this.stages.LAZY) {
      return;
    }
    
    if (!this.initialized.has(name)) {
      await module.initializer();
      this.initialized.add(name);
    }
  }
}

// 使用示例
const moduleManager = new ModuleInitializer();

// 注册模块
moduleManager.register('storage', async () => {
  await AsyncStorage.init();
}, ModuleInitializer.stages.CRITICAL);

moduleManager.register('api', async () => {
  await apiClient.configure();
}, ModuleInitializer.stages.IMPORTANT);

moduleManager.register('analytics', async () => {
  await analytics.init();
}, ModuleInitializer.stages.BACKGROUND);

moduleManager.register('heavyChart', async () => {
  await import('./charts/HeavyChart');
}, ModuleInitializer.stages.LAZY);

// 在App.js中
function App() {
  const [isCriticalReady, setIsCriticalReady] = useState(false);
  
  useEffect(() => {
    const init = async () => {
      // 只初始化关键模块
      await moduleManager.initializeByStage(
        ModuleInitializer.stages.CRITICAL
      );
      setIsCriticalReady(true);
      
      // 其他模块在后台初始化
      moduleManager.initialize();
    };
    
    init();
  }, []);
  
  if (!isCriticalReady) {
    return <SplashScreen />;
  }
  
  return <MainApp />;
}

3.3 第三方库优化

// 第三方库加载优化策略
class LibraryOptimizer {
  static async optimize() {
    // 1. 按需导入
    await this.selectiveImports();
    
    // 2. 版本检查
    await this.checkVersions();
    
    // 3. 配置优化
    await this.optimizeConfigs();
  }
  
  static async selectiveImports() {
    // 避免全量导入，按需导入
    // ❌ 错误方式
    // import * as lodash from 'lodash';
    
    // ✅ 正确方式
    // import debounce from 'lodash/debounce';
    // import throttle from 'lodash/throttle';
  }
  
  static async checkVersions() {
    const criticalLibs = {
      'react': '^18.2.0',
      'react-native': '^0.72.0',
      'react-navigation': '^6.0.0',
    };
    
    for (const [lib, expected] of Object.entries(criticalLibs)) {
      try {
        const actual = require(`${lib}/package.json`).version;
        console.log(`${lib}: ${actual} (expected: ${expected})`);
      } catch (error) {
        console.warn(`无法检查 ${lib} 版本`);
      }
    }
  }
  
  static async optimizeConfigs() {
    // React Navigation 优化
    this.optimizeReactNavigation();
    
    // Vector Icons 优化
    this.optimizeVectorIcons();
    
    // AsyncStorage 优化
    this.optimizeAsyncStorage();
  }
  
  static optimizeReactNavigation() {
    // 使用原生堆栈导航器
    import { createNativeStackNavigator } from '@react-navigation/native-stack';
    
    // 禁用不必要的动画
    const stackOptions = {
      animation: 'none', // 启动时禁用动画
      gestureEnabled: false, // 启动时禁用手势
    };
  }
  
  static optimizeVectorIcons() {
    // 只加载需要的图标集
    import Ionicons from 'react-native-vector-icons/Ionicons';
    
    // 预加载常用图标
    Ionicons.loadFont().catch(error => {
      console.log('图标字体加载失败:', error);
    });
    
    // 或者使用更轻量的方案
    // import { MaterialCommunityIcons } from '@expo/vector-icons';
  }
  
  static optimizeAsyncStorage() {
    // 使用MMKV替代AsyncStorage（性能更好）
    // import { MMKV } from 'react-native-mmkv';
    
    // 或者优化AsyncStorage配置
    import AsyncStorage from '@react-native-async-storage/async-storage';
    
    // 启动时清理过期数据
    setTimeout(async () => {
      try {
        await this.cleanupOldData();
      } catch (error) {
        // 静默失败，不影响启动
      }
    }, 5000);
  }
  
  static async cleanupOldData() {
    const oneWeekAgo = Date.now() - 7 * 24 * 60 * 60 * 1000;
    
    // 清理一周前的缓存
    // 具体实现取决于应用逻辑
  }
}

// package.json 优化配置
const optimizedPackageJson = {
  "dependencies": {
    // 核心库（必须）
    "react": "^18.2.0",
    "react-native": "^0.72.0",
    
    // 导航（按需选择）
    "@react-navigation/native": "^6.1.0",
    "@react-navigation/native-stack": "^6.9.0", // 性能更好
    
    // 状态管理（按需）
    "zustand": "^4.0.0", // 轻量级
    // "redux": "^4.2.0", // 较重，按需使用
    
    // UI组件（按需）
    "react-native-safe-area-context": "^4.5.0",
    
    // 图标（按需）
    "react-native-vector-icons": "^9.2.0",
    
    // 存储（选择性能好的）
    "react-native-mmkv": "^2.5.0", // 推荐
    // "@react-native-async-storage/async-storage": "^1.18.0",
    
    // 图片（优化版本）
    "react-native-fast-image": "^8.6.0",
    
    // 网络（按需）
    "axios": "^1.4.0",
  },
  "devDependencies": {
    // 构建优化工具
    "metro-react-native-babel-preset": "^0.76.0",
    
    // 分析工具
    "react-native-bundle-visualizer": "^3.1.3",
    "@react-native-community/cli-plugin-metro": "^11.3.0",
    
    // 代码分割
    "babel-plugin-transform-imports": "^2.0.0",
  }
};

四、构建与打包优化

4.1 Metro 配置优化

// metro.config.js - 优化版本
const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
const path = require('path');

// 默认配置
const defaultConfig = getDefaultConfig(__dirname);

// 自定义配置
const customConfig = {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: true, // 启用内联require
      },
    }),
    babelTransformerPath: require.resolve('react-native-svg-transformer'),
    minifierConfig: {
      keep_classnames: true, // 保持类名（调试用）
      keep_fnames: true,     // 保持函数名
      mangle: {
        keep_classnames: true,
        keep_fnames: true,
      },
    },
  },
  
  serializer: {
    // 优化序列化
    createModuleIdFactory: () => {
      return (path) => {
        // 生成更短的模块ID
        const projectRootPath = __dirname + '/';
        const modulePath = path.startsWith(projectRootPath)
          ? path.substr(projectRootPath.length)
          : path;
          
        // 简单的hash生成
        let hash = 0;
        for (let i = 0; i < modulePath.length; i++) {
          hash = ((hash << 5) - hash) + modulePath.charCodeAt(i);
          hash |= 0;
        }
        
        return hash;
      };
    },
  },
  
  resolver: {
    // 解析优化
    resolverMainFields: ['react-native', 'browser', 'main'],
    extraNodeModules: {
      // 别名配置
      '@': path.resolve(__dirname, 'src'),
      'components': path.resolve(__dirname, 'src/components'),
      'screens': path.resolve(__dirname, 'src/screens'),
    },
    // 排除不需要的文件
    blockList: [
      /.*.test.js$/,
      /.*.spec.js$/,
      /.*__mocks__.*/,
    ],
  },
  
  maxWorkers: 4, // 根据CPU核心数调整
  resetCache: false, // 生产构建时设为true
  
  // 缓存配置
  cacheStores: [
    new (require('metro-cache')).FileStore({
      root: path.join(__dirname, 'node_modules', '.cache', 'metro'),
    }),
  ],
  
  // 观察忽略配置
  watchFolders: [
    path.resolve(__dirname, '../../'),
  ],
  
  // 源映射配置
  sourceExts: ['js', 'jsx', 'ts', 'tsx', 'json', 'svg'],
};

// 合并配置
module.exports = mergeConfig(defaultConfig, customConfig);

// 生产环境特定配置
if (process.env.NODE_ENV === 'production') {
  module.exports.transformer.minify = true;
  module.exports.transformer.optimization = {
    minimize: true,
    concatenateModules: true,
    usedExports: true,
  };
  
  // 禁用开发工具
  module.exports.transformer.dev = false;
  
  // 清理缓存
  module.exports.resetCache = true;
}

4.2 Bundle 分析与优化

// bundle分析脚本
const fs = require('fs');
const path = require('path');
const { execSync } = require('child_process');

class BundleAnalyzer {
  constructor() {
    this.report = {
      totalSize: 0,
      modules: [],
      warnings: [],
      suggestions: []
    };
  }
  
  async analyze() {
    console.log('🔍 开始分析Bundle...');
    
    // 1. 生成source map
    await this.generateSourceMap();
    
    // 2. 解析source map
    await this.parseSourceMap();
    
    // 3. 分析模块大小
    await this.analyzeModuleSizes();
    
    // 4. 生成报告
    await this.generateReport();
    
    return this.report;
  }
  
  async generateSourceMap() {
    try {
      console.log('📦 生成Source Map...');
      
      // 使用Metro生成source map
      execSync(
        'react-native bundle --platform android --dev false --entry-file index.js --bundle-output ./android-release.bundle --sourcemap-output ./android-release.bundle.map',
        { stdio: 'inherit' }
      );
      
      console.log('✅ Source Map生成成功');
    } catch (error) {
      console.error('❌ Source Map生成失败:', error);
    }
  }
  
  async parseSourceMap() {
    const sourceMapPath = './android-release.bundle.map';
    
    if (!fs.existsSync(sourceMapPath)) {
      throw new Error('Source Map文件不存在');
    }
    
    console.log('📊 解析Source Map...');
    
    const sourceMap = JSON.parse(fs.readFileSync(sourceMapPath, 'utf8'));
    const modules = sourceMap.sources
      .map((source, index) => {
        const size = this.calculateModuleSize(sourceMap, index);
        return {
          path: source,
          size: size,
          percentage: 0
        };
      })
      .filter(module => module.size > 0)
      .sort((a, b) => b.size - a.size);
    
    const totalSize = modules.reduce((sum, module) => sum + module.size, 0);
    
    modules.forEach(module => {
      module.percentage = (module.size / totalSize * 100).toFixed(2);
    });
    
    this.report.modules = modules;
    this.report.totalSize = totalSize;
  }
  
  calculateModuleSize(sourceMap, moduleIndex) {
    // 简化计算，实际应该更精确
    let size = 0;
    const mappings = sourceMap.mappings;
    
    // 这里简化处理，实际应该解析VLQ编码
    // 更精确的实现可以使用source-map库
    return Math.floor(Math.random() * 10000); // 示例
  }
  
  async analyzeModuleSizes() {
    console.log('📈 分析模块大小...');
    
    const largeModules = this.report.modules
      .filter(module => module.size > 100 * 1024) // 大于100KB
      .slice(0, 10);
    
    console.log('
🚨 大型模块Top 10:');
    largeModules.forEach((module, index) => {
      console.log(`${index + 1}. ${module.path}`);
      console.log(`   大小: ${(module.size / 1024).toFixed(2)}KB (${module.percentage}%)`);
    });
    
    // 检测重复依赖
    this.detectDuplicateDependencies();
    
    // 检测未使用的模块
    this.detectUnusedModules();
  }
  
  detectDuplicateDependencies() {
    console.log('
🔄 检测重复依赖...');
    
    const packageJson = JSON.parse(
      fs.readFileSync('./package.json', 'utf8')
    );
    
    const dependencies = {
      ...packageJson.dependencies,
      ...packageJson.devDependencies
    };
    
    // 简单检测重复的库
    const libCount = {};
    Object.keys(dependencies).forEach(lib => {
      const mainLib = lib.split('/')[0];
      libCount[mainLib] = (libCount[mainLib] || 0) + 1;
    });
    
    const duplicates = Object.entries(libCount)
      .filter(([_, count]) => count > 1)
      .map(([lib]) => lib);
    
    if (duplicates.length > 0) {
      this.report.warnings.push('发现重复依赖');
      console.log('⚠️  重复依赖:', duplicates.join(', '));
    }
  }
  
  detectUnusedModules() {
    console.log('
🗑️  检测可能未使用的模块...');
    
    // 这里可以添加静态分析逻辑
    // 例如使用depcheck工具
    
    this.report.suggestions.push(
      '使用 depcheck 检测未使用的依赖',
      '考虑移除大型但很少使用的库',
      '检查是否有多个相同功能的库'
    );
  }
  
  async generateReport() {
    console.log('
📋 生成优化报告...');
    
    const reportPath = './bundle-analysis-report.json';
    fs.writeFileSync(reportPath, JSON.stringify(this.report, null, 2));
    
    console.log(`✅ 报告已生成: ${reportPath}`);
    
    // 生成HTML可视化报告
    await this.generateHTMLReport();
  }
  
  async generateHTMLReport() {
    const html = `



  
  


  
Bundle分析报告
  
总大小: ${(this.report.totalSize / 1024 / 1024).toFixed(2)} MB
  
  
大型模块
  ${this.report.modules.slice(0, 20).map(module => `
    

      
${module.path}
      
${(module.size / 1024).toFixed(2)}KB (${module.percentage}%)
      
${module.percentage}%">
    
  `).join('')}
  
  ${this.report.warnings.length > 0 ? `
    
警告
    

      ${this.report.warnings.map(w => `
${w}`).join('')}
    
  ` : ''}
  
  
优化建议
  

    ${this.report.suggestions.map(s => `
${s}`).join('')}
  


    `;
    
    fs.writeFileSync('./bundle-report.html', html);
    console.log('✅ HTML报告已生成: bundle-report.html');
  }
}

// 使用示例
const analyzer = new BundleAnalyzer();
analyzer.analyze().then(report => {
  console.log('🎉 分析完成！');
}).catch(error => {
  console.error('分析失败:', error);
});

4.3 Hermes 引擎优化

// Hermes配置优化
const hermesConfig = {
  // Android配置 (android/app/build.gradle)
  android: `
project.ext.react = [
    enableHermes: true,  // 启用Hermes
    hermesFlags: ["-O", "-output-source-map"], // 优化级别
    bundleInDebug: false, // Debug模式不打包
    bundleInRelease: true, // Release模式打包
    devDisabledInRelease: true // Release禁用dev
]

def jscFlavor = 'org.webkit:android-jsc:+'
def hermesPath = "../../node_modules/hermes-engine/android/"

def enableHermes = project.ext.react.get("enableHermes", false);

dependencies {
    if (enableHermes) {
        implementation files(hermesPath + "hermes-debug.aar")
        releaseImplementation files(hermesPath + "hermes-release.aar")
    } else {
        implementation jscFlavor
    }
}
  `,
  
  // iOS配置 (ios/Podfile)
  ios: `
use_react_native!(
  :path => config[:reactNativePath],
  :hermes_enabled => true,  # 启用Hermes
  :fabric_enabled => false  # 按需启用Fabric
)

# 优化Pod安装
post_install do |installer|
  installer.pods_project.targets.each do |target|
    if target.name == 'React-Hermes'
      # Hermes特定优化
      target.build_configurations.each do |config|
        config.build_settings['GCC_PREPROCESSOR_DEFINITIONS'] ||= ['$(inherited)']
        config.build_settings['GCC_PREPROCESSOR_DEFINITIONS'] << 'HERMES_ENABLE_DEBUGGER=0'
      end
    end
    
    # 通用优化
    target.build_configurations.each do |config|
      config.build_settings['IPHONEOS_DEPLOYMENT_TARGET'] = '12.0'
      config.build_settings['SWIFT_OPTIMIZATION_LEVEL'] = '-Owholemodule'
    end
  end
end
  `,
  
  // Hermes运行时优化
  runtime: `
// 在index.js中配置Hermes
if (typeof HermesInternal === 'undefined') {
  console.log('Hermes引擎未启用');
} else {
  console.log('Hermes引擎已启用');
  
  // Hermes内存配置
  HermesInternal.setGCConfig({
    // 调整GC策略
    minGC: 1024 * 1024, // 1MB
    initHeap: 8 * 1024 * 1024, // 8MB初始堆
    maxHeap: 64 * 1024 * 1024, // 64MB最大堆
  });
  
  // 预编译字节码（高级优化）
  if (__DEV__) {
    // 开发环境：解释执行，便于调试
  } else {
    // 生产环境：字节码执行
    HermesInternal.compile = true;
  }
}

// 使用Hermes的BigInt支持（如果需要）
if (HermesInternal.hasPromise()) {
  // Hermes支持Promise
}
  `,
  
  // 生产环境优化
  production: `
// metro.config.js - Hermes优化
const hermesTransformer = require('metro-hermes-transformer');

module.exports = {
  transformer: {
    // 使用Hermes转换器
    babelTransformerPath: require.resolve('metro-hermes-transformer'),
    
    // 优化配置
    minifierPath: require.resolve('metro-minify-hermes'),
    minifierConfig: {
      compress: {
        drop_console: true, // 移除console
        drop_debugger: true, // 移除debugger
        pure_funcs: ['console.log'], // 移除特定函数
      },
      mangle: true, // 代码混淆
    },
  },
  
  // 生成Hermes字节码
  serializer: {
    createModuleIdFactory: () => {
      return (path) => {
        // 为Hermes优化模块ID
        return someHashFunction(path);
      };
    },
    customSerializer: hermesTransformer.createSerializer(),
  },
};
  `,
  
  // 性能监控
  monitoring: `
// Hermes性能监控
class HermesMonitor {
  static startMonitoring() {
    if (typeof HermesInternal !== 'undefined') {
      // 监控内存使用
      setInterval(() => {
        const stats = HermesInternal.getInstrumentedStats();
        console.log('Hermes内存使用:', {
          total: stats.js_VMHeapSize,
          used: stats.js_VMHeapSize - stats.js_free,
          allocated: stats.js_allocatedBytes,
        });
      }, 30000); // 每30秒
      
      // 监控GC
      const originalGC = HermesInternal.gc;
      HermesInternal.gc = function() {
        const start = Date.now();
        originalGC();
        const duration = Date.now() - start;
        console.log(`GC耗时: ${duration}ms`);
        
        if (duration > 100) {
          console.warn('GC时间过长，可能需要优化内存使用');
        }
      };
    }
  }
}

// 在应用启动后调用
HermesMonitor.startMonitoring();
  `
};

五、首屏渲染优化

5.1 组件渲染优化

// 首屏组件优化策略
import React, { useState, useEffect, useMemo, useCallback } from 'react';
import { View, Text, Image, ActivityIndicator } from 'react-native';

// 1. 轻量级启动组件
const LightweightSplash = () => {
  return (
    <View style={styles.lightContainer}>
      {/* 使用纯色背景替代图片 */}
      <View style={styles.background} />
      
      {/* 简单的文字logo */}
      <Text style={styles.logoText}>App Name</Text>
      
      {/* 最小化的加载指示器 */}
      <View style={styles.loadingDot}>
        <ActivityIndicator size="small" color="#FFFFFF" />
      </View>
    </View>
  );
};

// 2. 渐进式首屏
const ProgressiveFirstScreen = () => {
  const [loadedSections, setLoadedSections] = useState({
    header: false,
    banner: false,
    list: false,
    footer: false
  });
  
  useEffect(() => {
    // 分阶段加载
    const timers = [];
    
    // 立即加载头部
    setLoadedSections(prev => ({ ...prev, header: true }));
    
    // 延迟加载横幅（100ms后）
    timers.push(setTimeout(() => {
      setLoadedSections(prev => ({ ...prev, banner: true }));
    }, 100));
    
    // 延迟加载列表（300ms后）
    timers.push(setTimeout(() => {
      setLoadedSections(prev => ({ ...prev, list: true }));
    }, 300));
    
    // 延迟加载底部（500ms后）
    timers.push(setTimeout(() => {
      setLoadedSections(prev => ({ ...prev, footer: true }));
    }, 500));
    
    return () => timers.forEach(timer => clearTimeout(timer));
  }, []);
  
  return (
    <View style={styles.container}>
      {loadedSections.header && <Header />}
      {loadedSections.banner && <Banner />}
      {loadedSections.list && <ProductList />}
      {loadedSections.footer && <Footer />}
    </View>
  );
};

// 3. 图片优化组件
const OptimizedImage = ({ source, placeholder, style }) => {
  const [isLoaded, setIsLoaded] = useState(false);
  const [error, setError] = useState(false);
  
  const imageSource = useMemo(() => {
    if (typeof source === 'string') {
      return { uri: source };
    }
    return source;
  }, [source]);
  
  const handleLoad = useCallback(() => {
    setIsLoaded(true);
  }, []);
  
  const handleError = useCallback(() => {
    setError(true);
  }, []);
  
  return (
    <View style={[style, styles.imageContainer]}>
      {!isLoaded && !error && (
        <View style={styles.placeholder}>
          {placeholder || <ActivityIndicator size="small" />}
        </View>
      )}
      
      {error && (
        <View style={styles.errorPlaceholder}>
          <Text>加载失败</Text>
        </View>
      )}
      
      <Image
        source={imageSource}
        style={[style, { opacity: isLoaded ? 1 : 0 }]}
        onLoad={handleLoad}
        onError={handleError}
        resizeMode="cover"
        fadeDuration={0} // 禁用淡入动画（启动时）
      />
    </View>
  );
};

// 4. 虚拟化列表（长列表优化）
const OptimizedList = ({ data }) => {
  const renderItem = useCallback(({ item }) => (
    <ListItem item={item} />
  ), []);
  
  const keyExtractor = useCallback((item) => item.id, []);
  
  const getItemLayout = useCallback((_, index) => ({
    length: ITEM_HEIGHT,
    offset: ITEM_HEIGHT * index,
    index,
  }), []);
  
  return (
    <FlatList
      data={data}
      renderItem={renderItem}
      keyExtractor={keyExtractor}
      initialNumToRender={5} // 初始只渲染5项
      maxToRenderPerBatch={3}
      windowSize={7}
      getItemLayout={getItemLayout}
      removeClippedSubviews={true}
    />
  );
};

// 5. 缓存常用组件
const ComponentCache = {
  components: new Map(),
  
  get(type, props) {
    const key = `${type}-${JSON.stringify(props)}`;
    if (!this.components.has(key)) {
      this.components.set(key, this.createComponent(type, props));
    }
    return this.components.get(key);
  },
  
  createComponent(type, props) {
    switch (type) {
      case 'button':
        return <Button {...props} />;
      case 'text':
        return <Text {...props} />;
      default:
        return null;
    }
  }
};

// 6. 使用原生组件替代复杂JS组件
const NativeOptimizedView = () => {
  // 对于复杂动画，考虑使用原生组件
  // 例如：react-native-reanimated
  
  return (
    <View>
      {/* 使用原生驱动动画 */}
      <Animated.View
        style={{
          transform: [{ scale: scaleAnimation }],
        }}
        useNativeDriver={true} // 启用原生驱动
      >
        <Text>原生动画</Text>
      </Animated.View>
    </View>
  );
};

// 7. 首屏渲染监控
const FirstRenderMonitor = ({ children }) => {
  const [renderStart] = useState(Date.now());
  const [metrics, setMetrics] = useState(null);
  
  useEffect(() => {
    const measure = () => {
      const renderTime = Date.now() - renderStart;
      setMetrics({
        renderTime,
        timestamp: new Date().toISOString(),
        component: children.type?.displayName || 'Unknown'
      });
      
      // 发送到监控系统
      if (renderTime > 100) {
        console.warn(`首屏渲染时间过长: ${renderTime}ms`);
      }
    };
    
    // 使用requestAnimationFrame确保在渲染后执行
    requestAnimationFrame(measure);
  }, []);
  
  return children;
};

5.2 数据预取与缓存

// 数据预取管理器
class DataPrefetchManager {
  constructor() {
    this.cache = new Map();
    this.prefetchQueue = [];
    this.isPrefetching = false;
  }
  
  // 注册预取任务
  registerPrefetch(key, fetcher, priority = 0) {
    this.prefetchQueue.push({
      key,
      fetcher,
      priority,
      timestamp: Date.now()
    });
    
    // 按优先级排序
    this.prefetchQueue.sort((a, b) => b.priority - a.priority);
  }
  
  // 执行预取
  async executePrefetch(limit = 3) {
    if (this.isPrefetching || this.prefetchQueue.length === 0) {
      return;
    }
    
    this.isPrefetching = true;
    
    try {
      // 取出高优先级任务
      const tasks = this.prefetchQueue.splice(0, limit);
      
      await Promise.allSettled(
        tasks.map(async (task) => {
          try {
            const startTime = Date.now();
            const data = await task.fetcher();
            const duration = Date.now() - startTime;
            
            this.cache.set(task.key, {
              data,
              timestamp: Date.now(),
              duration
            });
            
            console.log(`✅ 预取完成: ${task.key} (${duration}ms)`);
          } catch (error) {
            console.error(`❌ 预取失败: ${task.key}`, error);
          }
        })
      );
    } finally {
      this.isPrefetching = false;
      
      // 如果还有任务，继续执行
      if (this.prefetchQueue.length > 0) {
        setTimeout(() => this.executePrefetch(limit), 100);
      }
    }
  }
  
  // 获取数据（优先从缓存）
  async get(key, fetcher, useCache = true) {
    if (useCache && this.cache.has(key)) {
      const cached = this.cache.get(key);
      
      // 检查缓存是否过期（5分钟）
      if (Date.now() - cached.timestamp < 5 * 60 * 1000) {
        return cached.data;
      }
    }
    
    // 缓存不存在或过期，重新获取
    const data = await fetcher();
    this.cache.set(key, {
      data,
      timestamp: Date.now()
    });
    
    return data;
  }
  
  // 预取首屏数据
  prefetchFirstScreenData() {
    // 用户信息
    this.registerPrefetch('user', async () => {
      return api.get('/user/profile');
    }, 10);
    
    // 首页配置
    this.registerPrefetch('home_config', async () => {
      return api.get('/home/config');
    }, 9);
    
    // 推荐内容
    this.registerPrefetch('recommendations', async () => {
      return api.get('/home/recommendations');
    }, 8);
    
    // 启动预取
    setTimeout(() => {
      this.executePrefetch(2); // 先执行2个最高优先级
    }, 0);
  }
}

// 在应用中使用
const prefetchManager = new DataPrefetchManager();

// App.js中
function App() {
  useEffect(() => {
    // 启动数据预取
    prefetchManager.prefetchFirstScreenData();
    
    // 同时执行其他初始化
    const initApp = async () => {
      await Promise.all([
        initializeAuth(),
        initializeStorage(),
        prefetchManager.executePrefetch(3)
      ]);
      
      // 隐藏启动屏
      hideSplashScreen();
    };
    
    initApp();
  }, []);
  
  return <MainNavigator />;
}

// 屏幕组件中使用缓存
function HomeScreen() {
  const [data, setData] = useState(null);
  
  useEffect(() => {
    const loadData = async () => {
      // 尝试从缓存获取
      const cachedData = await prefetchManager.get(
        'home_data',
        () => api.get('/home/data'),
        true
      );
      
      setData(cachedData);
      
      // 后台刷新数据
      setTimeout(async () => {
        const freshData = await api.get('/home/data');
        setData(freshData);
        prefetchManager.cache.set('home_data', {
          data: freshData,
          timestamp: Date.now()
        });
      }, 1000);
    };
    
    loadData();
  }, []);
  
  if (!data) {
    return <LoadingSkeleton />;
  }
  
  return <HomeContent data={data} />;
}

// 骨架屏组件
const LoadingSkeleton = () => {
  return (
    <View style={styles.skeletonContainer}>
      {/* 头部骨架 */}
      <View style={styles.skeletonHeader} />
      
      {/* Banner骨架 */}
      <View style={styles.skeletonBanner} />
      
      {/* 列表骨架 */}
      {[1, 2, 3, 4, 5].map((item) => (
        <View key={item} style={styles.skeletonItem}>
          <View style={styles.skeletonImage} />
          <View style={styles.skeletonText}>
            <View style={styles.skeletonLine} />
            <View style={[styles.skeletonLine, { width: '60%' }]} />
          </View>
        </View>
      ))}
    </View>
  );
};

六、监控与持续优化

6.1 性能监控系统

// 性能监控SDK
class PerformanceMonitor {
  constructor() {
    this.metrics = {
      startup: {},
      screens: {},
      network: {},
      memory: {}
    };
    
    this.config = {
      sampleRate: 0.1, // 10%采样率
      endpoint: 'https://analytics.example.com/performance',
      enabled: !__DEV__ // 生产环境启用
    };
    
    this.setupMonitoring();
  }
  
  setupMonitoring() {
    // 监控启动时间
    this.monitorStartup();
    
    // 监控屏幕渲染
    this.monitorScreenPerformance();
    
    // 监控网络请求
    this.monitorNetwork();
    
    // 监控内存使用
    this.monitorMemory();
  }
  
  monitorStartup() {
    const startupStart = Date.now();
    
    // App.js中调用
    global.startupStart = startupStart;
    
    // 监听应用就绪
    const onAppReady = () => {
      const startupTime = Date.now() - startupStart;
      this.recordMetric('startup', {
        total: startupTime,
        timestamp: new Date().toISOString(),
        deviceInfo: this.getDeviceInfo()
      });
      
      // 根据启动时间分级
      if (startupTime < 2000) {
        console.log('🚀 启动速度优秀');
      } else if (startupTime < 4000) {
        console.log('✅ 启动速度良好');
      } else {
        console.warn('⚠️ 启动速度需要优化');
        this.reportIssue('slow_startup', { time: startupTime });
      }
    };
    
    // 在应用完全就绪时调用
    global.onAppReady = onAppReady;
  }
  
  monitorScreenPerformance() {
    // 使用React Navigation的事件监听
    const navigationContainerRef = React.createRef();
    
    const onStateChange = (state) => {
      const currentRoute = this.getActiveRouteName(state);
      const screenStart = Date.now();
      
      // 记录屏幕进入时间
      this.metrics.screens[currentRoute] = {
        start: screenStart,
        loadTime: null
      };
      
      // 监听屏幕渲染完成
      setTimeout(() => {
        const loadTime = Date.now() - screenStart;
        this.metrics.screens[currentRoute].loadTime = loadTime;
        
        if (loadTime > 500) {
          console.warn(`屏幕 ${currentRoute} 加载较慢: ${loadTime}ms`);
        }
      }, 0);
    };
  }
  
  monitorNetwork() {
    // 拦截fetch请求
    const originalFetch = global.fetch;
    
    global.fetch = async (...args) => {
      const startTime = Date.now();
      const url = args[0];
      
      try {
        const response = await originalFetch(...args);
        const duration = Date.now() - startTime;
        
        this.recordMetric('network', {
          url: typeof url === 'string' ? url : url.url,
          duration,
          status: response.status,
          timestamp: new Date().toISOString()
        });
        
        if (duration > 5000) {
          this.reportIssue('slow_network', { url, duration });
        }
        
        return response;
      } catch (error) {
        const duration = Date.now() - startTime;
        
        this.recordMetric('network_error', {
          url: typeof url === 'string' ? url : url.url,
          duration,
          error: error.message,
          timestamp: new Date().toISOString()
        });
        
        throw error;
      }
    };
  }
  
  monitorMemory() {
    if (Platform.OS === 'android' && !global.androidMemoryMonitor) {
      // Android内存监控
      const monitorInterval = setInterval(() => {
        if (typeof PerformanceMonitorNative !== 'undefined') {
          PerformanceMonitorNative.getMemoryInfo((info) => {
            this.recordMetric('memory', {
              ...info,
              timestamp: new Date().toISOString()
            });
            
            if (info.used > 100 * 1024 * 1024) { // 100MB
              this.reportIssue('high_memory', info);
            }
          });
        }
      }, 30000); // 每30秒
      
      global.androidMemoryMonitor = monitorInterval;
    }
  }
  
  recordMetric(type, data) {
    if (!this.config.enabled || Math.random() > this.config.sampleRate) {
      return;
    }
    
    this.metrics[type] = this.metrics[type] || [];
    this.metrics[type].push(data);
    
    // 批量发送
    if (this.metrics[type].length >= 10) {
      this.sendMetrics(type);
    }
  }
  
  async sendMetrics(type) {
    try {
      const metrics = this.metrics[type];
      this.metrics[type] = [];
      
      await fetch(this.config.endpoint, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          type,
          metrics,
          appVersion: this.getAppVersion(),
          deviceId: await this.getDeviceId()
        })
      });
    } catch (error) {
      console.error('发送性能数据失败:', error);
    }
  }
  
  reportIssue(type, data) {
    // 上报问题到监控系统
    console.log(`上报问题: ${type}`, data);
    
    // 可以集成Sentry、Firebase Crashlytics等
  }
  
  getDeviceInfo() {
    return {
      platform: Platform.OS,
      version: Platform.Version,
      model: Platform.constants?.Model,
      hermes: typeof HermesInternal !== 'undefined'
    };
  }
  
  getAppVersion() {
    return require('./package.json').version;
  }
  
  async getDeviceId() {
    // 获取设备唯一标识
    const { getUniqueId } = require('react-native-device-info');
    return getUniqueId();
  }
  
  getActiveRouteName(state) {
    const route = state.routes[state.index];
    
    if (route.state) {
      return this.getActiveRouteName(route.state);
    }
    
    return route.name;
  }
}

// 初始化监控
const performanceMonitor = new PerformanceMonitor();

// 在应用就绪时调用
export const markAppReady = () => {
  if (global.onAppReady) {
    global.onAppReady();
  }
};

6.2 A/B 测试与渐进式优化

// 启动优化实验管理器
class StartupOptimizationExperiment {
  constructor() {
    this.experiments = new Map();
    this.currentVariant = null;
    this.results = [];
  }
  
  // 定义实验
  defineExperiment(name, variants, metrics) {
    this.experiments.set(name, {
      name,
      variants,
      metrics,
      startTime: Date.now(),
      participants: new Set()
    });
  }
  
  // 分配实验变体
  assignVariant(experimentName, userId) {
    const experiment = this.experiments.get(experimentName);
    if (!experiment || experiment.participants.has(userId)) {
      return null;
    }
    
    // 随机分配变体
    const variantIndex = Math.floor(Math.random() * experiment.variants.length);
    const variant = experiment.variants[variantIndex];
    
    experiment.participants.add(userId);
    this.currentVariant = variant;
    
    console.log(`分配实验变体: ${experimentName} -> ${variant.name}`);
    
    return variant;
  }
  
  // 启动优化实验配置
  setupStartupExperiments() {
    // 实验1: 预加载策略
    this.defineExperiment('preloading_strategy', [
      {
        name: 'aggressive',
        config: {
          preloadModules: true,
          preloadData: true,
          concurrentLimit: 5
        }
      },
      {
        name: 'conservative',
        config: {
          preloadModules: false,
          preloadData: true,
          concurrentLimit: 2
        }
      },
      {
        name: 'minimal',
        config: {
          preloadModules: false,
          preloadData: false,
          concurrentLimit: 1
        }
      }
    ], ['startup_time', 'memory_usage']);
    
    // 实验2: 代码分割策略
    this.defineExperiment('code_splitting', [
      {
        name: 'route_level',
        config: {
          level: 'route',
          chunkSize: 10000
        }
      },
      {
        name: 'component_level',
        config: {
          level: 'component',
          chunkSize: 5000
        }
      }
    ], ['js_load_time', 'interaction_ready']);
    
    // 实验3: 图片加载策略
    this.defineExperiment('image_loading', [
      {
        name: 'eager',
        config: {
          priority: 'high',
          placeholder: 'none'
        }
      },
      {
        name: 'lazy',
        config: {
          priority: 'low',
          placeholder: 'skeleton'
        }
      }
    ], ['fcp', 'lcp']);
  }
  
  // 应用实验配置
  applyVariantConfig(variant) {
    switch (variant.name) {
      case 'aggressive':
        // 应用激进预加载
        this.applyAggressivePreloading();
        break;
      case 'conservative':
        // 应用保守预加载
        this.applyConservativePreloading();
        break;
      // ... 其他变体
    }
  }
  
  applyAggressivePreloading() {
    // 预加载所有可能用到的模块
    const modulesToPreload = [
      '@react-navigation/native',
      '@react-navigation/stack',
      'react-native-vector-icons',
      './services/api',
      './utils/storage'
    ];
    
    modulesToPreload.forEach(module => {
      import(module).catch(() => {});
    });
    
    // 预取数据
    this.prefetchCriticalData();
  }
  
  applyConservativePreloading() {
    // 只预加载核心模块
    const coreModules = [
      './services/api',
      './utils/storage'
    ];
    
    coreModules.forEach(module => {
      import(module).catch(() => {});
    });
  }
  
  // 记录实验结果
  recordResult(experimentName, metric, value) {
    this.results.push({
      experimentName,
      variant: this.currentVariant?.name,
      metric,
      value,
      timestamp: Date.now()
    });
    
    // 定期上报结果
    if (this.results.length >= 10) {
      this.reportResults();
    }
  }
  
  async reportResults() {
    try {
      await fetch('https://analytics.example.com/experiments', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(this.results)
      });
      
      this.results = [];
    } catch (error) {
      console.error('上报实验结果失败:', error);
    }
  }
  
  // 分析实验效果
  analyzeExperiment(experimentName) {
    const experiment = this.experiments.get(experimentName);
    if (!experiment) return null;
    
    const resultsByVariant = {};
    
    this.results.forEach(result => {
      if (result.experimentName === experimentName) {
        if (!resultsByVariant[result.variant]) {
          resultsByVariant[result.variant] = [];
        }
        resultsByVariant[result.variant].push(result);
      }
    });
    
    // 计算每个变体的平均指标
    const analysis = {};
    
    Object.entries(resultsByVariant).forEach(([variant, results]) => {
      const metrics = {};
      
      experiment.metrics.forEach(metric => {
        const metricResults = results.filter(r => r.metric === metric);
        if (metricResults.length > 0) {
          const avg = metricResults.reduce((sum, r) => sum + r.value, 0) / metricResults.length;
          metrics[metric] = avg;
        }
      });
      
      analysis[variant] = metrics;
    });
    
    return analysis;
  }
}

// 在应用中使用
const experimentManager = new StartupOptimizationExperiment();

// 设置实验
experimentManager.setupStartupExperiments();

// App.js中
function App() {
  const [variant, setVariant] = useState(null);
  
  useEffect(() => {
    const init = async () => {
      // 分配实验变体
      const userId = await getUserId();
      const assignedVariant = experimentManager.assignVariant(
        'preloading_strategy',
        userId
      );
      
      setVariant(assignedVariant);
      
      // 应用变体配置
      if (assignedVariant) {
        experimentManager.applyVariantConfig(assignedVariant);
      }
      
      // 记录启动时间
      const startupTime = Date.now() - global.startupStart;
      experimentManager.recordResult(
        'preloading_strategy',
        'startup_time',
        startupTime
      );
    };
    
    init();
  }, []);
  
  // 根据变体渲染不同内容
  const renderContent = () => {
    if (!variant) {
      return <DefaultLoading />;
    }
    
    switch (variant.name) {
      case 'aggressive':
        return <AggressiveLoading />;
      case 'conservative':
        return <ConservativeLoading />;
      default:
        return <DefaultLoading />;
    }
  };
  
  return (
    <View style={styles.container}>
      {renderContent()}
    </View>
  );
}

七、总结与最佳实践

7.1 优化检查清单

const OPTIMIZATION_CHECKLIST = {
  // ✅ 已完成  ❌ 未完成  ⚠️ 需要改进
  
  // 原生层优化
  NATIVE: [
    '✅ 使用Hermes引擎',
    '✅ 优化启动屏（快速显示）',
    '✅ 延迟非必要原生初始化',
    '✅ 使用App Bundle/动态交付',
    '⚠️  启用新架构（Fabric）'
  ],
  
  // JavaScript层优化
  JAVASCRIPT: [
    '✅ 启用内联require（inlineRequires）',
    '✅ 代码分割和懒加载',
    '✅ 优化第三方库导入',
    '✅ 减少全局初始化代码',
    '⚠️  使用Tree Shaking'
  ],
  
  // 构建优化
  BUILD: [
    '✅ 配置Metro优化选项',
    '✅ 生产环境启用压缩',
    '✅ 生成和分析bundle报告',
    '✅ 移除console.log（生产环境）',
    '⚠️  启用Hermes字节码'
  ],
  
  // 首屏优化
  FIRST_SCREEN: [
    '✅ 骨架屏/占位符',
    '✅ 图片懒加载和优化',
    '✅ 数据预取和缓存',
    '✅ 组件级代码分割',
    '⚠️  服务器端渲染（复杂）'
  ],
  
  // 监控和迭代
  MONITORING: [
    '✅ 启动时间监控',
    '✅ 性能指标收集',
    '✅ A/B测试框架',
    '✅ 用户反馈收集',
    '⚠️  自动化性能测试'
  ]
};

// 优化优先级矩阵
const OPTIMIZATION_PRIORITY = [
  {
    level: 'P0 - 紧急',
    items: [
      '启用Hermes引擎',
      '配置内联require',
      '优化启动屏显示时间',
      '移除生产环境console.log'
    ],
    impact: '高',
    effort: '低'
  },
  {
    level: 'P1 - 高',
    items: [
      '代码分割和懒加载',
      '图片优化',
      '数据预取',
      '第三方库优化'
    ],
    impact: '高',
    effort: '中'
  },
  {
    level: 'P2 - 中',
    items: [
      '骨架屏实现',
      'Metro构建优化',
      '性能监控',
      'A/B测试'
    ],
    impact: '中',
    effort: '中'
  },
  {
    level: 'P3 - 低',
    items: [
      '新架构迁移',
      '服务器端渲染',
      '深度Tree Shaking',
      '自定义原生模块'
    ],
    impact: '低',
    effort: '高'
  }
];

7.2 各阶段优化目标

const OPTIMIZATION_TARGETS = {
  // 冷启动时间目标（从点击到首屏完全加载）
  COLD_START: {
    excellent: '< 2秒',
    good: '2-4秒',
    poor: '> 4秒',
    industryAverage: '2-3秒'
  },
  
  // 热启动时间目标
  WARM_START: {
    excellent: '< 1秒',
    good: '1-2秒',
    poor: '> 2秒'
  },
  
  // 首次内容绘制（FCP）
  FCP: {
    excellent: '< 1.5秒',
    good: '1.5-3秒',
    poor: '> 3秒'
  },
  
  // 最大内容绘制（LCP）
  LCP: {
    excellent: '< 2.5秒',
    good: '2.5-4秒',
    poor: '> 4秒'
  },
  
  // 可交互时间（TTI）
  TTI: {
    excellent: '< 3.5秒',
    good: '3.5-7秒',
    poor: '> 7秒'
  },
  
  // 各阶段时间分配（理想情况）
  TIME_DISTRIBUTION: {
    nativeStartup: '15%',
    jsEngine: '10%',
    bundleLoading: '30%',
    appInitialization: '25%',
    rendering: '20%'
  }
};

// 性能预算
const PERFORMANCE_BUDGET = {
  // Bundle大小限制
  bundleSize: {
    android: '3MB',
    ios: '3MB',
    withHermes: '2MB'
  },
  
  // 初始加载资源数量
  initialRequests: {
    max: 6,
    target: 4
  },
  
  // 内存使用
  memory: {
    initial: '30MB',
    peak: '100MB'
  },
  
  // 帧率
  fps: {
    target: 60,
    minimum: 30
  }
};

7.3 持续优化流程

// 启动优化工作流
class StartupOptimizationWorkflow {
  constructor() {
    this.stages = [
      '测量基准',
      '识别瓶颈',
      '实施优化',
      '测试验证',
      '监控迭代'
    ];
    this.currentStage = 0;
  }
  
  async run() {
    console.log('🚀 启动优化工作流开始');
    
    for (const stage of this.stages) {
      await this.executeStage(stage);
    }
    
    console.log('🎉 优化工作流完成');
  }
  
  async executeStage(stage) {
    console.log(`
=== 阶段: ${stage} ===`);
    
    switch (stage) {
      case '测量基准':
        await this.measureBaseline();
        break;
      case '识别瓶颈':
        await this.identifyBottlenecks();
        break;
      case '实施优化':
        await this.implementOptimizations();
        break;
      case '测试验证':
        await this.testAndValidate();
        break;
      case '监控迭代':
        await this.monitorAndIterate();
        break;
    }
  }
  
  async measureBaseline() {
    console.log('1. 收集当前性能数据...');
    
    const metrics = {
      coldStart: await this.measureColdStart(),
      warmStart: await this.measureWarmStart(),
      bundleSize: await this.getBundleSize(),
      memoryUsage: await this.getMemoryUsage()
    };
    
    console.log('📊 基准数据:', metrics);
    this.baseline = metrics;
  }
  
  async identifyBottlenecks() {
    console.log('2. 分析性能瓶颈...');
    
    const bottlenecks = [];
    
    if (this.baseline.coldStart > 4000) {
      bottlenecks.push({
        area: '冷启动时间',
        severity: 'high',
        suggestion: '优化原生启动和JS加载'
      });
    }
    
    if (this.baseline.bundleSize > 3 * 1024 * 1024) {
      bottlenecks.push({
        area: 'Bundle大小',
        severity: 'medium',
        suggestion: '代码分割和Tree Shaking'
      });
    }
    
    console.log('🔍 识别到的瓶颈:', bottlenecks);
    this.bottlenecks = bottlenecks;
  }
  
  async implementOptimizations() {
    console.log('3. 实施优化措施...');
    
    const optimizations = [];
    
    for (const bottleneck of this.bottlenecks) {
      console.log(`处理瓶颈: ${bottleneck.area}`);
      
      switch (bottleneck.area) {
        case '冷启动时间':
          optimizations.push(await this.optimizeColdStart());
          break;
        case 'Bundle大小':
          optimizations.push(await this.optimizeBundleSize());
          break;
      }
    }
    
    console.log('✅ 实施的优化:', optimizations);
  }
  
  async optimizeColdStart() {
    return {
      name: '冷启动优化',
      actions: [
        '启用Hermes引擎',
        '配置内联require',
        '实现启动屏快速显示',
        '延迟非必要初始化'
      ]
    };
  }
  
  async optimizeBundleSize() {
    return {
      name: 'Bundle大小优化',
      actions: [
        '配置代码分割',
        '分析并移除未使用代码',
        '优化第三方库导入',
        '启用生产环境压缩'
      ]
    };
  }
  
  async testAndValidate() {
    console.log('4. 测试优化效果...');
    
    const afterMetrics = {
      coldStart: await this.measureColdStart(),
      bundleSize: await this.getBundleSize()
    };
    
    const improvements = {
      coldStart: this.baseline.coldStart - afterMetrics.coldStart,
      bundleSize: this.baseline.bundleSize - afterMetrics.bundleSize
    };
    
    console.log('📈 优化效果:', {
      优化前: this.baseline,
      优化后: afterMetrics,
      改进: improvements
    });
    
    // 验证是否达到目标
    const isSuccessful = afterMetrics.coldStart < 4000;
    console.log(isSuccessful ? '✅ 优化成功' : '⚠️ 需要进一步优化');
  }
  
  async monitorAndIterate() {
    console.log('5. 建立监控和迭代机制...');
    
    // 建立持续监控
    await this.setupContinuousMonitoring();
    
    // 设置定期审查
    await this.scheduleRegularReviews();
    
    // 建立反馈循环
    await this.setupFeedbackLoop();
  }
  
  async setupContinuousMonitoring() {
    console.log('建立性能监控...');
    
    // 集成性能监控SDK
    // 设置报警阈值
    // 建立dashboard
  }
  
  async scheduleRegularReviews() {
    console.log('设置定期审查...');
    
    // 每月性能审查
    // 季度优化冲刺
    // 年度架构评估
  }
  
  async setupFeedbackLoop() {
    console.log('建立反馈循环...');
    
    // 收集用户反馈
    // 分析崩溃报告
    // 监控应用商店评价
  }
  
  // 测量方法
  async measureColdStart() {
    // 实际测量逻辑
    return 3500; // 示例值
  }
  
  async measureWarmStart() {
    return 1200; // 示例值
  }
  
  async getBundleSize() {
    const fs = require('fs');
    const path = require('path');
    
    const bundlePath = path.join(__dirname, 'android-release.bundle');
    if (fs.existsSync(bundlePath)) {
      const stats = fs.statSync(bundlePath);
      return stats.size;
    }
    
    return 0;
  }
  
  async getMemoryUsage() {
    return {
      used: 50 * 1024 * 1024, // 50MB
      total: 100 * 1024 * 1024 // 100MB
    };
  }
}

// 启动优化工作流
const workflow = new StartupOptimizationWorkflow();
workflow.run().catch(console.error);

八、工具和资源

8.1 推荐工具列表

const OPTIMIZATION_TOOLS = {
  // Bundle分析
  bundleAnalysis: [
    {
      name: 'react-native-bundle-visualizer',
      type: 'CLI工具',
      purpose: '可视化分析bundle大小',
      link: 'https://github.com/IjzerenHein/react-native-bundle-visualizer'
    },
    {
      name: 'source-map-explorer',
      type: '分析工具',
      purpose: '分析bundle中模块大小',
      link: 'https://github.com/danvk/source-map-explorer'
    },
    {
      name: 'Metro Bundle Analyzer',
      type: 'Metro插件',
      purpose: '集成到构建流程的分析',
      link: 'https://github.com/IjzerenHein/react-native-bundle-visualizer'
    }
  ],
  
  // 性能监控
  performanceMonitoring: [
    {
      name: 'React Native Performance',
      type: '监控库',
      purpose: '监控FPS、内存等',
      link: 'https://github.com/oblador/react-native-performance'
    },
    {
      name: 'Firebase Performance',
      type: '云服务',
      purpose: '应用性能监控',
      link: 'https://firebase.google.com/products/performance'
    },
    {
      name: 'Sentry Performance',
      type: '监控平台',
      purpose: '性能追踪和监控',
      link: 'https://sentry.io/for/performance/'
    }
  ],
  
  // 图片优化
  imageOptimization: [
    {
      name: 'react-native-fast-image',
      type: '图片库',
      purpose: '高性能图片加载',
      link: 'https://github.com/DylanVann/react-native-fast-image'
    },
    {
      name: 'react-native-image-cache',
      type: '缓存库',
      purpose: '图片缓存和优化',
      link: 'https://github.com/wcandillon/react-native-img-cache'
    }
  ],
  
  // 启动屏
  splashScreens: [
    {
      name: 'react-native-bootsplash',
      type: '启动屏库',
      purpose: '专业的启动屏解决方案',
      link: 'https://github.com/zoontek/react-native-bootsplash'
    },
    {
      name: 'react-native-splash-screen',
      type: '启动屏库',
      purpose: '简单的启动屏实现',
      link: 'https://github.com/crazycodeboy/react-native-splash-screen'
    }
  ],
  
  // 内存优化
  memoryOptimization: [
    {
      name: 'react-native-mmkv',
      type: '存储库',
      purpose: '高性能键值存储',
      link: 'https://github.com/mrousavy/react-native-mmkv'
    },
    {
      name: 'Hermes',
      type: 'JS引擎',
      purpose: '替代JSC，性能更好',
      link: 'https://hermesengine.dev/'
    }
  ]
};

8.2 优化资源链接

const LEARNING_RESOURCES = {
  // 官方文档
  officialDocs: [
    'React Native Performance: https://reactnative.dev/docs/performance',
    'Hermes Engine: https://reactnative.dev/docs/hermes',
    'Metro Bundler: https://facebook.github.io/metro/'
  ],
  
  // 博客和文章
  blogs: [
    '如何将React Native应用的启动时间减少一半: https://medium.com/p/62d0023c18e7',
    'React Native性能优化指南: https://www.reactnative.guide/performance/',
    '使用Hermes优化React Native应用: https://engineering.fb.com/2019/07/12/android/hermes/'
  ],
  
  // 视频教程
  videos: [
    'React Native性能优化 - React Conf 2021: https://www.youtube.com/watch?v=F1oyZaWr_-8',
    'Hermes引擎深入解析: https://www.youtube.com/watch?v=wS2T_bHOPRw',
    'React Native启动优化实践: https://www.youtube.com/watch?v=0-S5a0eXPoc'
  ],
  
  // 案例分析
  caseStudies: [
    'Facebook Marketplace性能优化: https://engineering.fb.com/2020/03/26/android/facebook-marketplace-performance/',
    'Shopify React Native性能优化: https://shopify.engineering/react-native-performance',
    'Discord移动端性能优化: https://discord.com/blog/how-discord-achieves-native-ios-performance-with-react-native'
  ]
};

总结

React Native应用启动速度优化是一个系统工程，需要从多个层面入手：

关键优化策略：

1. 原生层优化：使用Hermes引擎，优化启动屏，延迟非必要初始化
2. JavaScript层优化：代码分割，懒加载，优化模块初始化
3. 构建优化：配置Metro，启用内联require，优化bundle大小
4. 首屏渲染优化：骨架屏，图片懒加载，数据预取
5. 持续监控：建立性能监控，A/B测试，持续迭代

实施建议：

1. 先测量后优化：建立性能基准，识别主要瓶颈
2. 循序渐进：从低投入高回报的优化开始
3. 数据驱动：基于监控数据做决策
4. 用户为中心：优化最终要服务于用户体验

预期收益：

通过全面优化，可以将React Native应用的启动时间从4-6秒减少到2-3秒，提升用户体验和留存率。

记住：优化是一个持续的过程，而不是一次性的任务。建立持续监控和优化的工作流，才能确保应用始终保持良好的性能表现。