React Native应用加载过慢（Metro Bundler卡97.4%）排查咨询

这种卡在97.4%半天不动的情况真的太闹心了，我之前调试React Native项目时也碰到过类似的打包延迟问题，给你分享几个亲测有效的排查方向：

Metro默认日志比较简略，你可以启动时加上--verbose参数，输出详细打包过程：

npx react-native start --verbose

盯着日志看进度到97.4%时的输出，通常会显示当前正在处理的模块或资源文件。比如我之前遇到过是某个未压缩的4K高清图片在转码，还有一次是第三方UI库的超大SVG组件拖慢了进度。找到具体文件后，针对性优化就行。

• 静态资源优化：项目里如果有大图片、视频、字体文件，优先压缩处理。比如把PNG转成WebP（体积能小一半以上），用工具压缩SVG的冗余代码，避免直接引入几十MB的本地资源。
• 依赖瘦身：用npm list或者yarn why检查有没有引入体积超大的第三方库，或者有没有重复依赖。比如某些老的JavaScript库没有ES模块版本，Metro需要额外转译，耗时会翻倍。可以考虑替换成轻量化的替代库，或者在Metro配置里排除该库的非必要文件（比如测试用例、文档）。

有时候Metro的缓存文件损坏会导致重复处理模块，试试彻底清空缓存：

# 重置Metro缓存
npx react-native start --reset-cache

# 同时清空iOS/Android的构建缓存
# iOS
cd ios && pod deintegrate && pod install && cd ..
# Android
./gradlew clean

我之前有次就是缓存炸了，重置后打包时间直接从2分钟降到20秒。

打开项目根目录的metro.config.js，检查以下配置：

• 关闭enableBabelRCLookup：这个选项会遍历每个目录查找.babelrc文件，项目大了之后特别慢，建议设置为false。
• 改用Hermes转译器：如果你的项目已经启用Hermes，把transformer换成hermes-transformer，它比默认的Babel转译快很多：

  module.exports = {
    transformer: {
      getTransformOptions: async () => ({
        transform: {
          experimentalImportSupport: false,
          inlineRequires: true,
        },
      }),
      babelTransformerPath: require.resolve('react-native/hermes-transformer'),
    },
  };
  

• 配置blockList排除无关文件：比如排除.git、__tests__、docs这些不需要打包的目录：

  const blacklist = require('metro-config/src/defaults/blacklist');
  module.exports = {
    resolver: {
      blacklistRE: blacklist([
        /\.git\/.*/,
        /__tests__\/.*/,
        /docs\/.*/,
      ]),
    },
  };
  

循环引用会让Metro反复处理同一个模块，导致打包时间飙升。你可以用madge工具检测项目里的循环引用：

npx madge --circular src/

如果发现循环引用，调整代码结构解开循环就行。另外，如果项目文件嵌套层级太深，也会增加Metro的路径解析时间，试试整理一下目录结构，用别名简化路径（在metro.config.js和babel.config.js里配置module-resolver）。

打包时打开任务管理器（Windows）或活动监视器（Mac），看看CPU和内存占用：

• 如果CPU跑满了，关闭其他占用资源的程序（比如浏览器的多个标签页、视频剪辑软件）。
• 如果内存不足，给Node.js分配更多内存：

  NODE_OPTIONS="--max-old-space-size=4096" npx react-native start
  

  这个命令会给Node.js分配4GB内存，适合大项目打包。

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