React Native搭配Metro打包时iOS模拟器刷新出现payload超104857600字节报错断开连接

报错提示中的104857600 bytes即为100MB，是Metro内置WebSocket通信库的单条消息硬限制。这个问题和你新增的Intro组件没有直接关联——哪怕你删掉组件报错仍存在，是因为首次触发超限时，异常的大体积消息帧已经卡在了Metro的缓存和通信队列中，不会随删除组件自动清除。
触发这个错误的常见原因不是组件代码本身，是Metro在某次打包时误将超过100MB的异常内容打进了待传输的bundle，通过WebSocket发给设备时触发了库的校验拦截。

• 清除所有Metro残留缓存
  1. 按Ctrl+C终止当前运行的Metro服务进程
  2. 删除系统临时目录下所有Metro、haste相关的缓存文件，执行命令：
     rm -rf $TMPDIR/metro-* $TMPDIR/haste-*
  3. 完全关闭iOS模拟器，从后台任务列表彻底划除，不要仅关闭窗口
• 带缓存重置参数启动Metro
  执行启动命令：npx react-native start --reset-cache，等服务完全启动后，再重新打开模拟器中的RN应用加载内容
• 若清空后仍报相同错误，排查打包源的异常大文件
  1. 检查项目根目录下的metro.config.js，确认watchFolders、resolver.extraNodeModules配置没有误包含项目外的超大目录（比如整个用户文件夹、系统目录）
  2. 手动执行dev环境打包，检查bundle实际大小：
     npx react-native bundle --entry-file index.js --platform ios --dev true --bundle-output ./test_bundle.js
     如果生成的test_bundle.js大小接近或超过100MB，就遍历项目目录找出大小超过10MB的非代码类文件（比如误存放的视频、压缩包、大体积静态资源），将这些文件移出Metro的打包扫描范围
• 注意：不要直接修改node_modules中ws库的源码调大payload阈值，这属于绕开校验的临时方案，会让应用在加载超大bundle时出现内存溢出、白屏的问题，核心要定位并移除导致bundle异常变大的源头。

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