Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Skipping larger chunks while running "Npm run build"

Tags:

npm

vue.js

vite

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.
like image 905
Haseeb Saeed Avatar asked Sep 03 '25 05:09

Haseeb Saeed


2 Answers

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.

like image 121
MohKoma Avatar answered Sep 04 '25 23:09

MohKoma


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,
  },
});
like image 29
Haseeb Saeed Avatar answered Sep 05 '25 01:09

Haseeb Saeed