Facing this problem while trying to run "npm run build
"
(!) Some chunks are larger than 500 KiB after minification. Consider:
- Using dynamic import() to code-split the application
- Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/guide/en/#outputmanualchunks
- Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.
If you don't want to increase the chunkSizeWarningLimit
and instead focus on solving the actual size issue, try this:
export default defineConfig({
....
build: {
rollupOptions: {
output:{
manualChunks(id) {
if (id.includes('node_modules')) {
return id.toString().split('node_modules/')[1].split('/')[0].toString();
}
}
}
}
}
});
This will automatically make separate chunks for each "vendor" in node_modules
. For example, @emotion/react
would go in an emotion
chunk and react-dom
would go in a react-dom
chunk.
One caveat is that you need to manually merge chunks for packages with peer dependencies (just add a couple if statements). The reason for this is that there is currently no way to set the order chunks are loaded. For example, @mui/material
depends on react
, so they need to be placed in the same chunk.
EDIT: This is a work around and only hides warnings
Add command in vite.config.js
build: {
chunkSizeWarningLimit: 1600,
},
full code
// https://vitejs.dev/config/
export default defineConfig({
base: "/Stakepool-Frontend/",
plugins: [vue()],
resolve: {
alias: {
"~": path.resolve(__dirname, "node_modules"),
"@": path.resolve(__dirname, "src"),
},
},
build: {
chunkSizeWarningLimit: 1600,
},
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With