- Forums
- react
- [SOLVED] (!) Some Chunks Are Larger Than 500 Kb After Minification
This is how I was able to fix this warning error in my react application with vitejs [5358], Last Updated: Sun Mar 01, 2026
edw
Sun Dec 28, 2025
0 Comments
226 Visits
UPDATE: 1/23/26
Today I got the error again:
(!) Some chunks are larger than 500 kBs after minification. Consider:
- Using dynamic import() to code-split the application
- Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/configuration-options/#output-manualchunks
- Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.
✓ built in 4.81s
Solution: Change the vite.config.js file and added the build: property like this:
export default defineConfig({
server: { https: true,host: true },
plugins: [react(),basicSsl()],
base: '/',
build: {
chunkSizeWarningLimit: 1600,
rollupOptions: {
output: {
manualChunks(id) {
if (id.includes('node_modules')) {
return id.toString().split('node_modules/')[1].split('/')[0].toString();
}
}
}
}
}
})
This is how I was able to fix this warning error in my react application with vitejs in a react typescript project.
I was able to resolved the chunk size warning by configuring manualChunks in vite.config.ts.
Do this also:
- split the dependencies into three separate chunks:
- google-ai: Contains @google/generative-ai and @google/genai.
- react-vendor: Contains react, react-dom, and react-router-dom.
- vendor: Contains any other node_modules.
- The build output now shows all chunks are well under the 500 kB limit:
react-vendor: ~224 kB
google-ai: ~248 kB
vendor: ~40 kB
index (app code): ~10 kB
You can verify this by running npm run build again.
After this I tried npm run build and no longer seen the message again.
vite.configs.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import basicSsl from '@vitejs/plugin-basic-ssl'
// https://vite.dev/config/
export default defineConfig({
plugins: [react(), basicSsl()],
build: {
rollupOptions: {
output: {
manualChunks(id) {
if (id.includes('node_modules')) {
if (id.includes('@google/generative-ai') || id.includes('@google/genai')) {
return 'google-ai';
}
if (id.includes('react') || id.includes('react-dom') || id.includes('react-router-dom')) {
return 'react-vendor';
}
return 'vendor';
}
},
},
},
},
})
reponse:
I've updated vite.config.ts to address the chunk size warning.
I implemented two changes:
- Code Splitting (manualChunks): I configured Vite to split your dependencies into separate cacheable chunks:
- react-vendor: React, React DOM, React Router
mui-vendor: Material UI and Emotion
google-genai: Google Generative AI libraries
vendor: All other node modules
- Increased Warning Limit (chunkSizeWarningLimit): I raised the warning threshold to 1000 kB (1 MB) to accommodate larger libraries that might slightly exceed the default 500 kB limit even after splitting.
You can now run npm run build again, and the warning should be resolved.
resolved.