React 성능 최적화 체크리스트

더 많은 고객의 유입을 위해서는 Optimization은 어떻게 보면 필수적인 요소이다.

아래의 항목들은 주요 성능 최적화를 본 개발자의 기본 체크리스트이다. 상황에 따라서 더 추가하거나 제외할 수 있다.

 

1. Measure component level rendering performance with either of the following

• Chrome DevTools Performance Panel
• React DevTools Profiler

2. Minimize unnecessary component Re-Renders

• Override ShouldComponentUpdate where applicable
• Use PureComponent for class components
• Use React.memo for functional components
• Memoize Redux select with Reselect for example
• Virtualize super long lists with React Window, React Virtualized for example

3. Measure app level performance with Lighthouse

4. Improve app level performance

• If not server-side rendering, split components with React.lazy
• If server-side rendering, split components with a library like loadable-components
• Use service worker to cache files that are worth caching. Workbox will make your life easier
• If server-side rendering, use streams istedad of string(renderToNodeStream and renderToStaticNodeStream)
• If can't SSR, Pre-render instead. Libraries like react-snap can help
• Extract critical styles if using CSS in JS Library
• Make sure your application is accessible. Consider using libraries like React Ally and Rext-Axe
• Add a web app manifest if you think users would like to access your site through their deveice homescreen