"获取JS Bundle" 极其缓慢

Question

我一直在尝试在Windows上创建基本的React Native安卓应用程序。即使是部署最基本的“欢迎来到React Native”应用程序时，当我的模拟器打印“获取JS包”时，我经历了极长的等待时间。这些时间已经超过了4分钟。

我尝试了各种模拟器，启用了HAXM，启用了gradle，尝试了Intel_x64、Intel_x86、Google APIs for x64 / x86等，但仍然出现缓慢。

有什么其他建议吗？

- Ahmed Haque

---

在真实设备上需要多长时间？ - Jean Regisser

@JeanRegisser 在真实设备上也超过了4分钟... - Ahmed Haque

增加了混乱的是，对于模拟器和设备来说，屏幕不会刷新以反映代码更改。 - Ahmed Haque

你是否开启了远程调试？我在使用远程调试时遇到了非常长的加载时间，但一旦关闭它，问题就解决了。在使用Android模拟器时，这个问题比使用iOS模拟器时更加严重。 - Garrett McCullough

这里也有同样的问题。关于加载不出来的事情，他们的问题页面上似乎有很多相关讨论。特别是这个新的 https://github.com/facebook/react-native/issues/10689 - 1mike12

等一下，你安装了哪个版本的Python、Node和NPM？我开始怀疑这可能会产生影响。 - 1mike12

Answer 1

我通过不使用adb来反转我的TCP端口8081来解决了这个问题。

更新2：我认为我通过使用我的公共IP/主机名解决了这个问题，但事实证明，react-native run-android每次执行时都会重新创建adb reverse。有关相关链接，请参见底部的更新1。

原始内容：

当我最初为React Native设置我的计算机时，我运行了以下命令，以使React应用程序与React Packager通信：adb reverse tcp:8081 tcp:8081。我观察到每次运行react-native run-android时，我的模拟器都会停留在“长时间获取JS Bundle”上。

要解决Windows上的模拟器问题：

1. 通过模拟设备摇动来访问开发人员菜单（在应用程序中，在模拟器中）。打开附加工具->加速计，并在窗口底部的记录数据：摇晃下方按下播放按钮。

2. 点击Dev Settings（最后一个菜单项）。

3. 点击Debug server host & port for device，并将值设置为网络上我的PC的公共IP/名称：端口。（例如：devpc.mynet.local:8081或192.168.1.99:8081）。

4. 关闭React应用程序。

5. 运行adb reverse --remove-all以撤消我之前的adb reverse tcp:8081...命令。

6. 从我的PC重新启动所有内容，通过运行react-native run-android。观察到这一次，Fetching JS Bundle步骤几乎立即执行。

我刚刚在我的环境中发现了这个解决方法。我还没有在任何实际设备上尝试过它。此外，我想知道是否有一种方法可以从代码中指定它，以便第一次就能正确地工作（而不是必须在设备上运行应用程序并在Dev设置中设置我的计算机的公共IP /名称...）

官方文档：

• https://facebook.github.io/react-native/docs/running-on-device-android.html

更新1：关于配置debug_http_host设备首选项，以下是一些相关阅读材料。

• 可能的解决方法 - 通过代码进行配置的问题2727
• iOS特定的解决方法的问题1429
• 拉取请求1546应该已经使其可配置，但从未被接受
• 产品痛点投诉使其可配置

- Wayne Bloss

Answer 2

花了几天的时间尝试提高这个模拟器的速度，最终使一切都非常快速和流畅。

您需要拥有最新版本的node。如果过时了，它将变得非常缓慢。

现在，如果您发现自己不得不在每次进行小改动后关闭节点服务器并重新运行"react-native run android"，那么您的“文件监视器”永远不会被实例化。为了启动文件监视器，您应该：(1)编辑yourAwesomeApp\node_modules\react-native\packager\react-packager\src\node-haste\FileWatcher\index.js (2)并将MAX_WAIT_TIME更改为较大的值(如600000)。Node只会等待此时间量以启动文件监视器，因此如果值太低，节点将跳过它并继续获取捆绑包。有了文件监视器，您只需双击R即可重新加载对代码所做的小更改。

现在，您需要能够查看所有的console.log()。为了在Genymotion中实现这一点（我推荐使用这个模拟器，即使是免费的），在运行应用程序时按下ctrl M并单击“Debug JS Remotely”。这将在您的Web浏览器中打开一个选项卡（http://localhost:8081/debugger-ui）。检查此页面以打开控制台！

- Michelle Hettinger

Answer 3

从Metro服务器下载JS捆绑包有两种方法：

使用adb reverse tcp:8081 tcp:8081将本地TCP端口转发到计算机TCP端口，因此使用USB线可以从计算机快速下载JS捆绑包。 缺点：您必须设置使用线和adb环境 优点：快速下载，不需要让手机和计算机在同一局域网上

在应用程序中将调试服务器主机设置为192.168.x.xxx:8081， 因此您可以从远程计算机下载JS捆绑包而无需使用线连接 缺点：当WIFI连接较慢时，JS捆绑包可能会下载缓慢 优点：您可以从同一局域网中的任何计算机下载JS捆绑包

- DeepCode