首页 > 其他 > 详细

React项目性能优化

时间:2019-09-22 23:26:07      阅读:96      评论:0      收藏:0      [点我收藏+]

1. 使用生产版本

确保发布的代码是生产模式下(压缩)打包的代码。

一般运行npm run build命令。

直接从webpack看配置文件,需要设置mode = ‘production‘。 调用teaser-webpack-plugin

React Devtools可以根据地址栏右侧图标颜色判断是否是生产模式。

2.可视范围数据加载--虚拟化长列表

当网站需要加载大批量数据时,会加载特别慢。这个时候我们可以使用虚拟滚动插件,只渲染当前屏幕范围内的数据。

鼠标滚动去触发事件,再渲染一屏。

3. 根据性能优化工具修改代码

使用Chrome的Performance工具或者React Devtools的Profiler工具分析

4. 使用PureComponent减少不必要的渲染

 

React项目性能优化

原文:https://www.cnblogs.com/lyraLee/p/11569755.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!