在运行 "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.

- Haseeb Saeed

---

你试过这三件事中的任何一件吗？没有更多的信息，我也无法提供其他建议。 - jonrsharpe

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();
                    }
                }
            }
        }
    }
});

- MohKoma

---

你能否详细说明这个做了什么？ - XRaycat

node_modules 是大块问题的主要原因，使用此方法可以让 Vite 单独处理已使用的模块。为了更好地理解其作用，请尝试比较带有此更改和不带有此更改的构建命令日志。 - MohKoma

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

- Haseeb Saeed

---

所以这只是增加了大小限制，实际上没有解决大小问题？ - OverMars

我认为这不应该成为被接受的答案，因为它只会增加大小限制警告。 - JJP

这只是一个解决问题的临时方案，而不是真正的解决方法。 - Zaid abu khalaf

@JJP哪个答案对你最有效？MohKoma的答案吗？ - Haseeb Saeed

Answer 3

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

Haseeb给出的答案基本上隐藏了警告，可能会导致更多的混淆。

MohKomas的答案走在正确的轨道上，但没有解释为什么。

我在开发一个依赖于Apache ECharts库（当作整个包导入时相当大）的Svelte项目时遇到了同样的问题。关键是只导入所需的部分，并利用库的可树摇动接口。这样做可以从构建的应用程序中削减超过500KiB。

- DrStrangeloovee

Answer 4

这是Nuxt3的解决方案

文件：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();
            }
          },
        },
      },
    },
  },
}

它工作得很好。

- Amir

Answer 5

以下方法在 Vite 上对我有效：

import { defineConfig } from "vite"
‌ 
export default defineConfig({
    build: {
        chunkSizeWarningLimit: 100000000
    },
})

- Mr. Nattapon Kontrong

---

警告是有原因的。将其设置为一些荒谬的高值会使其失去意义。 - Spikatrix

如果你不在意警告，你可以使用这个解决方案，但并不推荐。最好只是保留警告，如果你不打算处理它的话。 - Josh