1. Use the production version
Ensure that the code is released under the mode of production (compression) package code.
Generally run npm run build command.
See profile directly from webpack, need to set mode = 'production'. Call teaser-webpack-plugin
React Devtools right of the address bar icon can determine whether the color mode of production.
2. Loading visual range - a long list of virtualization
When a website needs to load large quantities of data will be loaded very slowly. This time we can use the virtual scroll plug, rendering the data only within the scope of the current screen.
Scroll mouse to trigger event, and then render a screen.
3. modify the code performance optimization tools
Use Chrome's Performance Profiler tool or a tool for analyzing React Devtools
4. reduce unnecessary rendering PureComponent