时间戳

首页 > 解决方案 > 生产构建中的代码运行速度比 reactjs 中的开发服务器慢

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

问题描述

JavaScript 探查器屏幕截图

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

标签： reactjswebpackoptimizationhtml5-canvasbabeljs

解决方案

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

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

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

默认情况下，生成的项目在您的 package.json 文件中包含一个 browserslist 配置，以针对基于全局使用（> 0.2%）的广泛浏览器用于生产构建，以及用于开发的现代浏览器。这提供了良好的开发体验，尤其是在使用 async/await 等语言特性时，但仍提供与生产中的许多浏览器的高度兼容性。

在生产中与开发中具有相同性能的一种解决方案是更新您browserslist在 package.json 中的条目。

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

推荐阅读