Best practices for optimizing performance in Create React App projects

[TUANKIET0397]

Hi everyone 👋

I’m currently working on a fairly large project using Create React App, and I’ve started noticing performance issues both during build time and when running in production.

I’d love to hear from the community:

• What are the most common best practices for improving performance in CRA projects?
• Is it worth ejecting to customize Webpack, or are there lighter alternatives?
• Are there recommended plugins or libraries to help reduce bundle size and speed up builds?

Any tips, experiences, or resources would be greatly appreciated 🙏

[ismaildasci]

here are some practical tips for cra performance:

build time improvements:

1. use react-scripts 5.x if not already - has better caching and faster rebuilds.

2. exclude large dependencies from babel transform if they are already es5. add to package.json:

"browserslist": {
  "production": [">0.2%", "not dead", "not op_mini all"]
}

3. reduce number of files being watched. add to .env:

CHOKIDAR_USEPOLLING=false
FAST_REFRESH=true

bundle size reduction:

4. analyze your bundle first:

npm install -D source-map-explorer
npx source-map-explorer build/static/js/*.js

5. lazy load routes and heavy components:

const HeavyComponent = React.lazy(() => import("./HeavyComponent"));

6. import only what you need from libraries:

// bad
import _ from "lodash";
// good
import debounce from "lodash/debounce";

7. use smaller alternatives: date-fns instead of moment, preact-compat for smaller bundles.

production performance:

8. enable code splitting by using dynamic imports.

9. use react.memo for expensive components.

10. virtualize long lists with react-window or react-virtualized.

about ejecting:

i would avoid ejecting. instead use craco or react-app-rewired to customize webpack without ejecting. this keeps you updatable:

npm install -D @craco/craco

then customize in craco.config.js.

if cra is too limiting, consider migrating to vite or next.js which are faster and more flexible.