Description
Currently, when running the production build, Vite produces a massive vendor chunk (dist/assets/vendor-*.js is over 2MB), which significantly exceeds the recommended 800kB limit. This negatively impacts the initial load time and performance of the application.
We need to optimize the build by splitting the code so the browser doesn't have to download everything up front.
Expected Behavior
- The main vendor chunk should be broken down into smaller, more manageable chunks.
- The build should no longer throw the
Some chunks are larger than 800 kB warning.
Proposed Solution
- Use Dynamic Imports (
React.lazy() and Suspense) in the React router setup for heavy routes or components that aren't needed on the initial page load.
- Configure
build.rollupOptions.output.manualChunks in vite.config.ts to explicitly split heavy third-party dependencies (like monaco-editor, framer-motion, @tanstack/react-query, etc.) into their own separate chunks.
Description
Currently, when running the production build, Vite produces a massive vendor chunk (
dist/assets/vendor-*.jsis over 2MB), which significantly exceeds the recommended 800kB limit. This negatively impacts the initial load time and performance of the application.We need to optimize the build by splitting the code so the browser doesn't have to download everything up front.
Expected Behavior
Some chunks are larger than 800 kBwarning.Proposed Solution
React.lazy()andSuspense) in the React router setup for heavy routes or components that aren't needed on the initial page load.build.rollupOptions.output.manualChunksinvite.config.tsto explicitly split heavy third-party dependencies (likemonaco-editor,framer-motion,@tanstack/react-query, etc.) into their own separate chunks.