React项目性能优化
Posted lyralee
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了React项目性能优化相关的知识，希望对你有一定的参考价值。
1. 使用生产版本
确保发布的代码是生产模式下（压缩）打包的代码。
一般运行npm run build命令。
直接从webpack看配置文件，需要设置mode = ‘production‘。 调用teaser-webpack-plugin
React Devtools可以根据地址栏右侧图标颜色判断是否是生产模式。
2.可视范围数据加载--虚拟化长列表
当网站需要加载大批量数据时，会加载特别慢。这个时候我们可以使用虚拟滚动插件，只渲染当前屏幕范围内的数据。
鼠标滚动去触发事件，再渲染一屏。
3. 根据性能优化工具修改代码
使用Chrome的Performance工具或者React Devtools的Profiler工具分析
4. 使用PureComponent减少不必要的渲染
以上是关于React项目性能优化的主要内容，如果未能解决你的问题，请参考以下文章