-1

I'm having a strange performance problem in my React + Vite application.

Everything works well and quickly during development mode (npm run dev). Also, when building the project itself (npm run build) to production, it finishes the build process well and doesn't give any errors or warnings. It takes about a minute to finish, even so some files are over 500kb. The index.js generated in dist/assets has 1800 KB of size.

The problem is, when I run it to production, which is hosted on Google Cloud Storage + GCP's Web Server, or even test it with npm run preview, the app slows down by alot.

Pages take forever to load, and DevTools shows big waterfalls with huge delays in loading and rendering of JS chunks.

Here are some performance improvements I've already made to Vite to try and fix this:

  • No barrel files;
  • Used clear file extensions in imports;
  • Minified with esbuild;
  • Disabled sourcemaps;
  • opped console logs with terserOptions.

Even with those things already applied, the production performance is still very bad; I didn't see any improvements.

Has anyone else been in a situation like this?

Could this problem have something to do with chunking, dynamic imports, caching headers, or even how GCP is sending the files? I have no idea what is causing this.

PS: Details for achieving MRE and better understanding of my current architecture.

  • My vite.config.js uses @vitejs/pluginc-react and target: 'es2020';
  • Minification is done using esbuild;
  • Sourcemaps are disabled;
  • Console Logs are also disabled;
  • I implemented some manual chunks into vendor (React and ReactDOM), mui (MUI Core and Icons), charts (ApexCharts, Charts.js and React Wrapper) and utils (Axios, dayjs, uuid);
  • My packages.json contains over 70 dependencies in total;
  • Design Libraries include:
    • @mui/material (Which I'll need to move other components to use this one only)
    • react-bootstrap, reactstrap, evergreen-ui (Legacy clutter)
  • My tsconfig.json uses ES2020 and moduleResolution is already setted to "bundler".
  • strict mode and common linting flags are enabled and it only compiles src/ folder.

Important: I'm aware that using multiple UI components libraries (MUI + Bootstrap + Evergreen) is not ideal and can negatively impact performance, however, this is a legacy code base I inherited and I'm already planning to standardize everything around Material UI.

Still, since the slow down issue could be related to other things, like chunking strategy, HTTP headers, CDN cache, etc, I'm seeking help here to better understand what could be causing this severe slowdown in production.

Improve this question

1 Answer 1

Reset to default
1

You probably should take a look at lazy loading your routes. Since your index.js is so big, i guess you are not doing any lazy loading of routes and thus end up with 1 giant bundle. Lazy loading routes is dependent on the router you are using, but for react-router i would take a look at https://reactrouter.com/6.30.1/route/lazy#lazy

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

I believe that this is a test I did'nt do it yet. I've done literally a LOT of changes, it did improve a little but I'll try implementing Lazy Loading to see if it solves my issue.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.