JavaScript Profiler Screenshot
我一直在做一个 reactjs 项目，我在 reactjs 中构建光线追踪器。该应用程序在开发服务器中运行良好（在 0.3-0.7 秒内渲染一张图像）。但是一旦我创建了生产版本，时间就会急剧增加到 5 秒，有时会增加到 10-12 秒。我检查了 JavaScript 分析器，它说 babel 运行时大部分时间都在调用 vec3.js 中的方法。如何优化相同的速度。我附上了来自 chrome-dev-tool 的 JS 分析器的屏幕截图。
【问题讨论】：
标签： reactjs webpack optimization html5-canvas babeljs
当您提到开发服务器和生产构建时，我猜您正在使用 Create React App。
生产构建中生成的代码与开发中的不同，这是因为它们针对不同的浏览器。
更多信息在这里：https://create-react-app.dev/docs/supported-browsers-features/
默认情况下，生成的项目包含 browserslist 配置 在您的 package.json 文件中，以针对基于广泛的浏览器 全球使用 (> 0.2%) 用于生产构建，现代浏览器用于 发展。这提供了良好的开发体验，尤其是当 使用诸如 async/await 之类的语言特性，但仍然提供高 与生产中的许多浏览器兼容。
在生产中获得与开发中相同的性能的一种解决方案是更新 package.json 中的 browserslist 条目。
如果您在production 中设置与development 相同的值，您将获得相同的性能，但结果是，您的代码可能无法在某些浏览器上运行...
【讨论】：