如何解决在生产版本上运行的代码比在reactjs中开发服务器运行的速度慢
JavaScript Profiler Screenshot
我一直在从事reactjs项目,该项目是在reactjs中构建ray tracer的。该应用程序在开发服务器上运行良好(在0.3-0.7秒内渲染一张图像)。但是,一旦我创建了生产版本,时间就会急剧增加到5秒,有时会增加到10-12秒。我检查了JavaScript事件探查器,它说babel运行时大部分时间都在调用vec3.js中的方法。如何优化相同的速度。我已经从chrome-dev-tool附加了JS profiler的屏幕截图。
解决方法
当您提到开发服务器和生产构建时,我猜您正在使用 Create React App。
生产构建中生成的代码与开发中生成的代码不同,这是因为它们针对不同的浏览器。
此处的更多信息:https://create-react-app.dev/docs/supported-browsers-features/
默认情况下,生成的项目包含一个 browserslist 配置 在您的 package.json 文件中以基于 生产版本的全球使用率 (> 0.2%),以及现代浏览器 发展。这提供了良好的开发体验,尤其是当 使用 async/await 等语言特性,但仍提供高 与生产中的许多浏览器兼容。
在生产中具有与开发中相同性能的一种解决方案是更新 package.json 中的 browserslist
条目。
如果您在 production
中设置与 development
中相同的值,您将获得相同的性能,但结果是,您的代码可能无法在某些浏览器上运行...>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。