“获取JS捆绑”极其缓慢

Question

我一直在尝试在我的Windows机器上创建基本的反应原生Android应用程序一段时间了。即使在部署最基本的“欢迎使用React Native”应用程序时，我的模拟器打印时会遇到极长的等待时间：“获取JS捆绑包”。这些时间已经过了4分钟。

我尝试了各种模拟器，启用了HAXM，启用了gradle，尝试了用于x64 / x86的Intel_x64，Intel_x86，Google API，但仍然放慢速度。

关于我还能尝试什么的任何建议？

Answer 1

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

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

ORIGINAL：

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

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

1. 通过模拟设备震动来访问开发人员菜单（在应用程序中，在模拟器中）。打开Additional Tools -> Accelerometer，然后按下Recorded data: shake下方窗口底部的“播放”。

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

3. 点击Debug server host & port for device并将值设置为网络上我电脑的public IP/Name:Port。 （例如devpc.mynet.local:8081或192.168.1.99:8081）。

4. 关闭反应应用。

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

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

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

官方文件：

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

更新1：以下是有关配置debug_http_host设备首选项的相关阅读。

• Issue 2727 with possible workaround - configuring via code
• Issue 1429 with iOS specific workaround
• Pull request 1546 that should have made this configurable but was never accepted
• Product Pains complaint to make this configurable

Answer 2

花了几天时间试图提高这个模拟器的速度，最终使一切工作变得非常快速和顺畅。

您需要拥有最新版本的节点。如果它已经过时，那将会非常缓慢。

现在，如果您发现自己必须关闭节点服务器并重新运行＆＃34; react-native运行android＆＃34;在你做出的每一个小改变之后，你的文件观察者＆＃34;永远不会被安置。为了使文件观察程序启动，您应该：（1）编辑yourAwesomeApp \ node_modules \ react-native \ packager \ react-packager \ src \ node-haste \ FileWatcher \ index.js（2）并将MAX_WAIT_TIME更改为a更大的值（如600000）。 Node只会等待filewatcher启动这段时间，所以如果该值太低，节点只会跳过它并继续获取该bundle。随着文件观察器的运行，您只需双击R即可重新加载您所做代码的少量更改。

现在，您需要能够看到所有的console.log（）。为了在Genymotion（我推荐的模拟器，甚至是免费模拟器）中执行此操作，请在运行应用程序时按ctrl M并单击“远程调试JS”。这将在您的网络浏览器中打开一个标签（http://localhost:8081/debugger-ui）。检查此页面以调出控制台！

Answer 3

有两种方式从 Metro 服务器下载 js 包：

使用 adb reverse tcp:8081 tcp:8081 将本地 tcp 端口转发到计算机 tcp 端口，因此使用 usb-line 可以极快地从计算机下载 js-bundle。 缺陷：你必须有 use-line 和 adb env 设置 优点：下载速度快，不需要让手机和电脑在同一个局域网

在您的应用程序中将调试服务器主机设置为 192.168.x.xxx:8081， 这样您就可以从远程计算机下载 js-bundle，而无需使用线路连接 缺陷：WIFI连接慢时js-bundle下载速度慢 优点：可以在同一局域网内的任何电脑上下载js-bundle