React Native 0.73.6项目如何减小APK及Bundle体积？

一、JS Bundle 优化 #

• 启用Hermes引擎：React Native 0.70+默认支持Hermes，它会将JS预编译为字节码，能大幅压缩Bundle体积并提升运行性能。在android/app/build.gradle中确认配置：

  project.ext.react = [
      enableHermes: true,
  ]
  

  启用后清理构建缓存，重新执行打包流程。
• 强化Tree Shaking与代码压缩：确保项目依赖使用ES模块规范，在metro.config.js中配置更激进的压缩规则：

  const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
  
  module.exports = mergeConfig(getDefaultConfig(__dirname), {
    transformer: {
      minifierConfig: {
        compress: {
          drop_console: true,
          drop_debugger: true,
          pure_funcs: ['console.log', 'console.warn'],
        },
      },
    },
  });
  

• 实现按需加载：用React的lazy和Suspense拆分页面代码，避免一次性打包所有模块：

  import { lazy, Suspense } from 'react';
  const SettingsScreen = lazy(() => import('./screens/SettingsScreen'));
  
  // 渲染组件
  <Suspense fallback={<ActivityIndicator size="large" />}>
    <SettingsScreen />
  </Suspense>
  

二、Android 原生层面优化 #

• 优化ProGuard/R8规则：在android/app/proguard-rules.pro中补充精准规则，避免保留无用代码：

  # 仅保留用到的React Native核心模块
  -keep class com.facebook.react.modules.core.** { *; }
  -dontwarn com.facebook.react.modules.**
  # 移除未使用的自定义原生组件
  -keep class com.yourproject.nativecomponents.** { *; }
  

  同时确保build.gradle中开启资源压缩：

  buildTypes {
      release {
          minifyEnabled true
          shrinkResources true
          proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
      }
  }
  

• 改用App Bundle格式：AAB是Google推荐的发布格式，Google Play会根据用户设备生成专属APK，比通用APK体积小30%左右。构建命令：

  ./gradlew bundleRelease
  

• 精简ABI架构：如果不需要兼容x86/x86_64模拟器，只保留主流架构：

  android {
      defaultConfig {
          ndk {
              abiFilters 'armeabi-v7a', 'arm64-v8a'
          }
      }
  }
  

三、依赖库精简 #

• 移除无用依赖：用npm ls或yarn why梳理依赖树，删除未实际使用的npm包。比如某些重型UI库可替换为轻量替代品。
• 替换重体积依赖：例如将react-native-vector-icons替换为仅引入所需图标的方案，或用SVG图标替代字体图标；优先选择纯JS实现的轻量库，避免引入冗余原生代码。
• 检查第三方库的ProGuard支持：部分库自带ProGuard规则，确保这些规则被正确引入，防止冗余代码被误保留。

四、资源文件优化 #

• 转用WebP图片格式：React Native 0.67+原生支持WebP，相比PNG/JPG可减少25%-50%体积，用工具批量转换项目图片后直接引用。
• 清理无用资源：使用Android Studio的Refactor > Remove Unused Resources功能，自动删除未引用的drawable、layout等资源文件。
• 裁剪自定义字体：如果使用了自定义字体，用FontForge等工具裁剪掉未用到的字符集，缩小字体文件体积。

五、辅助排查与优化 #

• 清理构建缓存：定期清理Metro和Gradle缓存，避免旧代码残留：

  npx react-native clean
  ./gradlew clean
  

• 分析Bundle构成：生成Release Bundle后，用source-map-explorer查看模块体积占比，针对性优化：

  npm install -g source-map-explorer
  # 先生成Bundle及source map
  npx react-native bundle --platform android --dev false --entry-file index.js --bundle-output bundle.js --sourcemap-output bundle.map
  source-map-explorer bundle.js bundle.map
  

内容的提问来源于stack exchange，提问作者Darshana