How I Optimize Create-react-app based React App

Syed Ali
2 min readApr 14, 2020
  1. Prefer functions hooks instead of class components
  2. Optimize assets size: Convert JPG, PNG, SVG to WEBP
  3. Use Google Fonts instead of hosted fonts (CDN)
  4. CSS Animations Instead of JS Animations
  5. Use route based code splitting and component-based code splitting
    (a.k.a multiple chunk files) (React Lazy, Suspense)
  6. Instead of importing the whole library, I use specific functions for the library (lodash/capitalize etc…) (Dependency optimization)
  7. Use Pure Components for class-based components & for functional component use React.memo to avoiding rerendering
  8. Remove unused code, libraries
  9. Remove unused DOM elements with ComponentDidUnmount()
  10. Update React, React Script, React dom and other libraries (Redux, React Routers, AWS Amplify, etc)
  11. Reuse components
  12. Immutable data structure with Redux (Use Reselect)
  13. Use Source-map-explore for analyzing bundle size
  14. Use React-dev-tool Chrome Extension profiler for component load time
  15. Using Eslint-plugin-react
  16. Use sharp node.js package on server-side to convert large images in common formats to smaller, JPG, PNG and WebP images instead of gm, ImageMagick, etc…

Other options (Will try in future)

  1. Profiling Components with the Chrome Performance
  2. Consider Server-side Rendering
  3. Avoid Reconciliation
  4. Use React.Fragments to Avoid Additional HTML Element Wrappers
  5. Throttling and Debouncing Event Action in JavaScript
  6. Enablebrotlicompression at server side instead of gzip
  7. Using the shouldComponentUpdate Life Cycle Event
  8. Create Error Boundaries for the Components
  9. Use Web Workers for CPU Extensive Tasks

Enjoying this post? Don’t forget to: 👏👏👏👏👏

--

--