Skip to content

Latest commit

 

History

History
43 lines (24 loc) · 2.65 KB

performance.md

File metadata and controls

43 lines (24 loc) · 2.65 KB
Raw

🚄 Performance

Code Splitting

Code splitting is a technique of splitting production JavaScript into smaller files, thus allowing the application to be only partially downloaded. Any unused code will not be downloaded until it is required by the application.

Most of the time code splitting should be done on the routes level, but can also be used for other lazy loaded parts of application.

Do not code split everything as it might even worsen your application's performance.

Code Splitting Example Code

Component and state optimizations

  • Do not put everything in a single state. That might trigger unnecessary re-renders. Instead split the global state into multiple stores according to where it is being used.

  • Keep the state as close as possible to where it is being used. This will prevent re-rendering components that do not depend on the updated state.

  • If you have a piece of state that is initialized by an expensive computation, use the state initializer function instead of executing it directly because the expensive function will be run only once as it is supposed to. e.g:

// instead of this which would be executed on every re-render:
const [state, setState] = React.useState(myExpensiveFn());

// prefer this which is executed only once:
const [state, setState] = React.useState(() => myExpensiveFn());

  • If you develop an application that requires the state to track many elements at once, you might consider state management libraries with atomic updates such as recoil or jotai.

  • If your application is expected to have frequent updates that might affect performance, consider switching from runtime styling solutions (Chakra UI, emotion, styled-components that generate styles during runtime) to zero runtime styling solutions (tailwind, linaria, vanilla-extract, CSS modules which generate styles during build time).

Image optimizations

Consider lazy loading images that are not in the viewport.

Use modern image formats such as WEBP for faster image loading.

Use srcset to load the most optimal image for the clients screen size.

Web vitals

Since Google started taking web vitals in account when indexing websites, you should keep an eye on web vitals scores from Lighthouse and Pagespeed Insights.