- Prefer functions hooks instead of class components
- Optimize assets size: Convert JPG, PNG, SVG to WEBP
- Use Google Fonts instead of hosted fonts (CDN)
- CSS Animations Instead of JS Animations
- Use route based code splitting and component-based code splitting
(a.k.a multiple chunk files) (React Lazy, Suspense) - Instead of importing the whole library, I use specific functions for the library (lodash/capitalize etc…) (Dependency optimization)
- Use Pure Components for class-based components & for functional component use React.memo to avoiding rerendering
- Remove unused code, libraries
- Remove unused DOM elements with ComponentDidUnmount()
- Update React, React Script, React dom and other libraries (Redux, React Routers, AWS Amplify, etc)
- Reuse components
- Immutable data structure with Redux (Use Reselect)
- Use Source-map-explore for analyzing bundle size
- Use React-dev-tool Chrome Extension profiler for component load time
- Using Eslint-plugin-react
- 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)
- Profiling Components with the Chrome Performance
- Consider Server-side Rendering
- Avoid Reconciliation
- Use
React.Fragments
to Avoid Additional HTML Element Wrappers - Throttling and Debouncing Event Action in JavaScript
- Enable
brotli
compression at server side instead ofgzip
- Using the shouldComponentUpdate Life Cycle Event
- Create Error Boundaries for the Components
- Use Web Workers for CPU Extensive Tasks
Enjoying this post? Don’t forget to: 👏👏👏👏👏