如何确定React Native打包器实际纳入应用打包的具体文件？

以下是几种实用方法，帮你定位React Native打包时纳入的文件，找出体积增长的原因：

• 用Metro的verbose日志追踪打包文件
  运行打包命令时添加--verbose参数，会输出每个被打包文件的详细信息，包括路径和大小：

  npx react-native bundle --platform ios --entry-file index.js --bundle-output output.bundle --verbose
  

  日志里会逐一列出所有被Metro处理并纳入打包的文件，对比不同版本的日志，就能找出新增的大文件。

• 生成可视化打包分析报告
  使用react-native-bundle-visualizer工具生成交互式体积分析报告，直观查看各文件/依赖的占比：

  1. 安装依赖：

     npm install --save-dev react-native-bundle-visualizer
     

  2. 运行分析：

     npx react-native-bundle-visualizer
     

  报告按文件大小排序，能快速定位占体积最大的模块或资源，方便对比版本间的变化。

• 检查Metro配置规则
  查看项目根目录的metro.config.js，重点关注resolver部分的配置，比如assetExts（被视为资源的文件扩展名）、sourceExts（源代码文件扩展名）、blacklistRE（排除打包的文件正则）。如果最近修改过这些规则，可能导致额外文件被纳入打包。

• 直接查看原生打包产物的内容

  • iOS：打包完成后，在Xcode的Products目录找到.app文件，右键选择“显示包内容”，可直接浏览所有打包进去的文件（包括JS bundle、原生框架、图片资源等），对比不同版本的.app文件大小和内容差异。
  • Android：生成APK后，用unzip命令解压查看内部结构：

    unzip app-release.apk -d apk-contents
    

    重点检查assets（存放JS bundle和资源）、lib（存放原生so库）目录，看是否有新增的大文件或库。

• 排查第三方依赖的变化
  应用体积增长常和新增/升级的第三方库有关：

  • 用npm ls查看依赖树，对比不同版本的依赖差异，确认是否新增了体积较大的库；
  • 直接查看node_modules目录下各依赖的大小，有些库会自带大量未优化的资源或冗余代码。

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