【问题标题】:very poor performance react js [closed]性能非常差的反应js [关闭]
【发布时间】:2023-03-03 16:39:03
【问题描述】:

我有一个基于 Reactjs 的 Web 应用程序,即使在生产环境中它的性能也非常低

什么可以帮助我提高绩效?我该怎么做才能让性能如此之低?



【问题讨论】:

  • 在您发布的图片中,列出了您可以采取哪些措施来提高机会下的分数。
  • 也许有人已经使用了 Reactjs 库中的一些东西来提高性能,我有一些建议
  • 如果您使用快速服务器压缩文件,请尝试使用“压缩”。 React waypoint 是一个很好的工具,可以在滚动到它时帮助加载东西
  • 很多这些事情与 React 无关,而是你如何为最终用户提供应用程序。 “启用文本压缩”是在服务器上完成的,“以下一代格式提供图像”意味着对图像使用 webp 而不是 jpeg(可能还有 png)。
  • 我只是认为这是非常糟糕的性能,也许我可以从我的应用程序中做些什么?

标签: reactjs webpack create-react-app


【解决方案1】:

https://www.gatsbyjs.org/ 如果您非常关心性能,可能是一个不错的选择。此外,如果它只是一个没有复杂状态管理要求的网站,只需将其构建为静态 HTML 网站。 :)

【讨论】:

  • 我需要SPA 申请,gatsby 几乎不适合我
  • Gatsby = React + Extras(包括性能优化)。您可以将其视为 Create React App 的入门替代品,它还默认执行 SSR 和其他很酷的事情。您可以使用 Gatsby 构建完全动态的 SPA 应用程序。更多信息请见:gatsbyjs.org/blog/2018-10-15-beyond-static-intro
  • 这就是我推荐它的原因,但是嘿,你的应用就是你的规则 :)
【解决方案2】:

您可以通过查看快照来提高应用性能。

  1. 在构建中将NODE_ENV 设置为production
  2. 在您的服务器机器上使用启用 gzip 压缩
  3. 也可以使用cdn 来服务器静态文件(js、css、图像等)
  4. 使用摇树。如果您使用的是 webpack,请在生产模式下运行它。
  5. 使用purge unused css webpack plugin 删除死css
  6. 对图片使用延迟加载
  7. 使用代码拆分来减少包大小
  8. 延迟脚本
  9. 您也可以使用预缓存

【讨论】:

    猜你喜欢
    • 2010-11-18
    • 2012-06-28
    • 2017-03-08
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多