Page Rendering Delays in Large-Scale React Projects with Huge Codebase

[givvemee]

Hello, I'm an web frontend engineer

Recently, I migrated our main project from CRA to Vite - this is our largest codebase with significant legacy code. While I'm experiencing several benefits after the migration, there's one major issue:
When running yarn dev to start the server, it takes several minutes to render the initial screen, and in extreme cases, it simply returns a blank page.

After investigating, I found that the development server is requesting all resources - code that's been split using dynamic imports in app.tsx, numerous .png/.svg files in the images directory, custom hooks, and even fonts. Checking the browser's network tab shows over 1,000 resource requests. And sometimes it stuck in pending rather than 200 so I suspect this heavy request load is causing the slowdown . I'm aware that Vite calls all ESM modules and then caches them in the local environment, which explains the high number of requests. However, I'm curious if there are any methods to mitigate this issue.

Is there a straightforward solution to this problem? I've already tried approaches like vite preview (which requires a build first and doesn't support HMR) and separating chunks with manualChunks. The slow development server is negatively impacting our developer experience. If anyone knows a solution, please help. 🙏

I'm including our version information and vite.config.mts settings for reference:

React v18
React-router-dom v5
TypeScript v5
Vite v6

import { defineConfig } from 'vite';

import react from '@vitejs/plugin-react';
import svgr from 'vite-plugin-svgr';
import { visualizer } from 'rollup-plugin-visualizer';
import { nodePolyfills } from 'vite-plugin-node-polyfills';

import path from 'path';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(),
    svgr({ include: '**/*.svg' }),
    nodePolyfills({
      include: ['fs', 'path', 'url'],
    }),
  ],
  server: {
    open: true,
    strictPort: true,
  },
  define: {
    global: 'globalThis',
  },
  preview: {
    port: 3000,
  },
  build: {
    outDir: 'dist',
    manifest: true,
    rollupOptions: {
      output: {
        manualChunks(id) {
          if (id.includes('node_modules/lottie-web')) {
            return 'lottie-web';
          } else if (id.includes('node_modules/react-beautiful-dnd')) {
            return 'react-beautiful-dnd';
          } else if (id.includes('node_modules/react-json-view')) {
            return 'react-json-view';
          } 
        },
      },
    },
  },
 optimizeDeps: {
    include: ['react', 'react-dom', 'lodash', 'axios'],
    exclude: ['react-lottie', 'lottie-web', 'react-beautiful-dnd',  'moment'],
  },
  resolve: {
    alias: {
      hooks: path.resolve(__dirname, './src/hooks'),
      images: path.resolve(__dirname, './src/images'),
      pages: path.resolve(__dirname, './src/pages'),
      'source-map-js': 'source-map',
    },
  },
});

[Fernando-Espinosa]

Do you mean it's slow when:

• navigating through pages
• The initial load when you run npm start
• Or on HMR?

[givvemee]

@Fernando-Espinosa All of them. 😢

[rschristian]

After investigating, I found that the development server is requesting all resources - code that's been split using dynamic imports in app.tsx, numerous .png/.svg files in the images directory, custom hooks, and even fonts. ... I'm aware that Vite calls all ESM modules and then caches them in the local environment

This isn't the case, no. Vite won't bundle dependencies in dev, but it doesn't attempt to load your entire app up front. Are you lazy loading, or just code splitting? If the latter, that won't help at all as you're still going to request most module near-immediately.

Usual culprit is an over reliance on barrel files. ViteConf talk on the problems of barrel files