How to optimize large projects with dynamic imports and code splitting in ViteJS?

[garryvoxel]

I have a large ViteJS project that suffers from slow initial load times.
I've read that dynamic imports and code splitting can help optimize the performance.
Can someone provide an advanced guide on how to implement these techniques effectively in a ViteJS project?
Specifically, I'm looking for best practices and any potential pitfalls to avoid.

[ghost]

Great question! Optimizing large projects with dynamic imports and code splitting in ViteJS can significantly improve performance.
Here's a detailed guide:

1. Dynamic Imports:
   Dynamic imports allow you to load modules only when they are needed. This reduces the initial bundle size.

   // Instead of this:
   import MyComponent from './components/MyComponent';

   // Use this:
   const MyComponent = () => import('./components/MyComponent');

2. Code Splitting with Vite:
   ViteJS uses Rollup under the hood, which makes code splitting straightforward.

Auto Code Splitting:
By default, ViteJS will automatically split your code based on dynamic imports.

Manual Code Splitting:
You can manually control code splitting using Rollup’s manualChunks option.

import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['react', 'react-dom'],
          ui: ['@mui/material', '@mui/icons-material']
        }
      }
    }
  }
});

3. Lazy Loading Routes:
   If you are using a router (like React Router), you can use lazy loading to split your routes into separate chunks.

import { lazy } from 'react';
const Home = lazy(() => import('./pages/Home'));
const About = lazy(() => import('./pages/About'));

<Suspense fallback={<div>Loading...</div>}>
  <Switch>
    <Route path="/home" component={Home} />
    <Route path="/about" component={About} />
  </Switch>
</Suspense>

[sagarguhe]

@garryvoxel did you try above solution? It solves your problem? if yes by how much percentage your loading time improved?