reactjs - 生产构建中的代码运行速度比 reactjs 中的开发服务器慢

Question

JavaScript Profiler Screenshot

我一直在做一个 reactjs 项目，我在 reactjs 中构建光线追踪器。该应用程序在开发服务器中运行良好(渲染一张图像需要 0.3-0.7 秒)。但是一旦我创建生产版本，时间就会急剧增加到 5 秒，有时甚至增加到 10-12 秒。我检查了 JavaScript 分析器，它说 babel 运行时大部分时间都在调用 vec3.js 中的方法。如何优化相同的速度。我附上了来自 chrome-dev-tool 的 JS 分析器的屏幕截图。

Answer 1

正如您提到的开发服务器和生产构建，我猜您正在使用 Create React App。

生产构建中生成的代码与开发中生成的代码不同，这是因为它们针对的是不同的浏览器。

更多信息在这里:https://create-react-app.dev/docs/supported-browsers-features/

By default, the generated project includes a browserslist configurationin your package.json file to target a broad range of browsers based onglobal usage (> 0.2%) for production builds, and modern browsers fordevelopment. This gives a good development experience, especially whenusing language features such as async/await, but still provides highcompatibility with many browsers in production.

要在生产环境中获得与开发环境相同的性能，一种解决方案是更新 package.json 中的 browserslist 条目。

如果您在production 中设置与在development 中相同的值，您将获得相同的性能，但结果是，您的代码可能无法运行浏览器...