运行“Npm run build”时跳过较大的块

Question

尝试运行“ 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.

Answer 1

如果您不想增加chunkSizeWarningLimit并更多地关注解决实际大小问题，请尝试以下解决方案：

export default defineConfig({
....
build: {
        rollupOptions: {
            output:{
                manualChunks(id) {
                    if (id.includes('node_modules')) {
                        return id.toString().split('node_modules/')[1].split('/')[0].toString();
                    }
                }
            }
        }
    }
});

Answer 2

编辑：这是一种解决方法，仅隐藏警告

在 vite.config.js 中添加命令

build: {
    chunkSizeWarningLimit: 1600,
  },

完整代码

// 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,
  },
});

Answer 3

虽然这些解决方案可能看起来有效，但我对所提供的细节并不是很满意：

Haseeb 给出的答案本质上隐藏了警告，并可能导致更多混乱。

MohKomas 的回答是正确的，但没有解释原因。

我在处理 Svelte 项目时遇到了同样的问题，该项目严重依赖 Apache ECharts 库（将其作为整个包导入时相当大）。关键是只导入所需的部分并利用库的可摇树界面。这样做可以使构建的应用程序减少超过 500KiB 的空间。