Checklist tối ưu hiệu năng React

Muốn tối ưu hiệu năng React, sau đây là checklist để tăng tốc website sử dụng React

1. Công cụ do hiệu năng render của từng Component React:

   • Chrome DevTools Performance panel
   • React DevTools profiler

2. Giảm thiểu tối đa việc các component re-renders:

   • Override shouldComponentUpdate để kiểm soát việc re-render
   • Sử dụng PureComponent class components
   • Sử dụng React.memo functional components
   • Memoize Redux selectors (reselect là một ví dụ)
   • Virtualize super long lists (react-window là một ví dụ)

3. Công cụ đo hiệu năng app-level với Lighthouse

4. Tối ưu hiệu năng ở mức ứng dụng

   • Nếu bạn không sử dụng server-side rendering, cắt nhỏ components với React.lazy
   • Nếu bạn sử dụng server-side rendering, cắt nhỏ components với thư viện, giống như loadable-components
   • Sử dụng service worker để cache files. Workbox sẽ giúp bạn rất nhiều trong việc cache resouce.
   • Nếu bạn sử dụng server-side rendering, sử dụng streams thay vì strings (sử dụng renderToNodeStream và renderToStaticNodeStream)
   • Không thể Server-side rendering? Sử dụng pre-render như một biện pháp thay thế. Hãy sử dụng react-snap.
   • Hãy chắc chắn trang React của bạn luôn accessible. Hãy sử dụng React A11y và react-axe.
   • Sử dụng web app manifest nếu bạn muốn user truy cập trang của bạn trên device homescreen.