Skipping Larger Chunks While Running "Npm Run Build"
Facing This Problem While Trying to Run "Npm Run Build" (!) Some Chunks Are Larger Than 500 Kib After Minification. Consider: - Using Dynamic Import() to...
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:
- Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.
5 Answers
If you don't want to increase the chunkSizeWarningLimit and focus more on solving the actual size issue, Try this solution:
export default defineConfig({
....
build: {
rollupOptions: {
output:{
manualChunks(id) {
if (id.includes('node_modules')) {
return id.toString().split('node_modules/')[1].split('/')[0].toString();
}
}
}
}
}
});
EDIT: This is a work around and only hides warnings
Add command in vite.config.js
build: {
chunkSizeWarningLimit: 1600,
},
full code
//
export default defineConfig({
base: "/Stakepool-Frontend/",
plugins: [vue()],
resolve: {
alias: {
"~": path.resolve(__dirname, "node_modules"),
"@": path.resolve(__dirname, "src"),
},
},
build: {
chunkSizeWarningLimit: 1600,
},
});
While these solutions may seem valid I am not really satisfied with the details provided:
The answer given by Haseeb essentially hides the warning and may lead to more confusion.
MohKomas answer is on the right track but doesn't explain the whys.
I was facing the same issue while working on a Svelte project which relies heavily on the Apache ECharts library (which is quite big when importing it as a whole package). The key was to just import the parts needed and make use of the tree-shakeable interface of the library. Doing this shaved off over 500KiB from the built application.
This is solution for Nuxt3
file: nuxt.confin.ts
export default {
...
vite: {
build: {
rollupOptions: {
output: {
manualChunks(id: any) {
if (id.includes("node_modules")) {
return id.toString().split("node_modules/")[1].split("/")[0].toString();
}
},
},
},
},
},
}it`s work nice
The following worked for me on Vite:
import { defineConfig } from "vite"
export default defineConfig({
build: {
chunkSizeWarningLimit: 100000000
},
})
Elena Rostova holds a Master's degree in Public Health Journalism. She covers groundbreaking medical research, holistic wellness trends, mental health awareness, and nutritional science.
