React-Tuning-List
React Production List
Performance Optimization | 性能优化
-
2018-React Profiler: React 16.5 新增了对开发工具（DevTools）性能分析插件（profiler plugin）的支持。
-
2017-React Performance Fixes on Airbnb Listing Pages: We have been hard at work migrating the airbnb.com core booking flow into a single-page server-rendered app using React Router and Hypernova.
-
React Office Site：Optimizing Performance: For many applications, using React will lead to a fast user interface without doing much work to specifically optimize for performance. Nevertheless, there are several ways you can speed up your React application.
-
2017-Keep Your React Redux Healthy, Performance Optimization Story: I am here to be honest about React optimization.
-
2017-React at Light Speed: Lessons in optimizing performance at Vixlet
-
2017-Our Best Practices for Writing React Components: When I first started writing React, I remember seeing many different approaches to writing components, varying greatly from tutorial to tutorial. Though the framework has matured considerably since then, there doesn’t seem to yet be a firm ‘right’ way of doing things.
-
How to Benchmark React Components: The Quick and Dirty Guide
-
React Performance Optimization: Performance optimization can be a big pain with any language. Especially when you are optimizing your app and you have no idea what to optimize. React has some really nice tools to do this, I will be talking about one specifically that will make your life a lot better.
-
2017-React at Light Speed, Lessons in optimizing performance at Vixlet: Here we will share some of the lessons we have learned along the way.
-
2017-reactopt
: A CLI React performance optimization tool that identifies potential unnecessary re-rendering. -
2017-React is Slow, React is Fast: Optimizing React Apps in Practice: If you care about performance, it’s fairly easy to make any React application super fast. Here is how.
-
2017-React Performance Fixes on Airbnb Listing Pages: There may be a lot of low-hanging fruit affecting performance in areas you might not track very closely but are still very important.
-
Creating more efficient React views with windowing: In this presentation, the bvaughn talks something abot performance, search, and app architecture in React development.
Metrics
Avoid Unnecessary Re-renders
-
High Performance React: 3 New Tools to Speed Up Your Apps: In this post I’ll highlight tools and techniques for making React apps fast. Each section also has an interactive, and (hopefully) fun demo!
-
React PureComponent Pitfalls: Unnecessary re-renders can slow down your app, especially when rendering large collections where updates to the collection occur frequently.
Code Splitting & Components Decomposition | 代码分割与组件解耦
-
2017-Code Splitting in Create React App: This chapter is an extra step that can help speed up the initial load time of your React app.
-
2017-https://parg.co/bXz: Techniques for decomposing React components. React components have a lot of power and flexibility. With so many tools at your disposal, it is incredibly easy for components to grow over time, become bloated and do too much.
-
2018-Server Rendering, Code Splitting, and Lazy Loading with React Router v4: In this article, software engineers from Airbnb share practices in combing server rendering and code splitting.
-
Upgrading a create-react-app project to a SSR + code splitting setup: This is what we’ll cover: Server-side rendering, Code splitting with react-loadable, Code splitting on the server, Taking benefit of webpack’s chunkNames.
Server Side Rendering | 服务端渲染
-
2017-Introducing Rapscallion
: a new approach for server-side rendering React applications. -
2017-Server-Side React Rendering: In this tutorial, we’ll take you through a server side rendering example step-by-step. including working around a common roadblock for React apps that talk to APIs.
-
React on the Server for Beginners: Build a Universal React and Node App
-
Client-side vs. server-side rendering: why it’s not all black and white.: Since the dawn of time, the conventional method for getting your HTML up onto a screen was by using server-side rendering. It was the only way. You loaded up your .html pages on your server, then your server went and turned them into useful documents on your users’ browsers.
-
Introducing Rapscallion: a new approach for server-side rendering React applications.
-
2017-Scaling React Server-Side Rendering: Some of the insights here are React-specific, but many are simply generic scalability challenges, or simple mistakes that were made.
-
Streaming Server-Side Rendering and Caching at Spectrum: In this guest post he describes the journey to high performance server-rendering of their React application with streaming responses and distributed caching.