使用Vite打包前端Vue项目，碰到依赖包体积大，出现内存溢出的解决办法

Elcker

已于 2025-05-14 15:17:42 修改

阅读量479

点赞数 1

CC 4.0 BY-SA版权

分类专栏：项目错误问题处理文章标签：前端 javascript

于 2025-05-14 15:16:35 首次发布

Elcker技术分享

本文链接：https://blog.csdn.net/sxlesq/article/details/147955071

项目错误问题处理专栏收录该内容

2 篇文章

订阅专栏

vite.config.ts 中

方式一

使用 esbuild

  build: {
    outDir: "dist",
    minify: "esbuild",
    sourcemap: false,
    chunkSizeWarningLimit: 5000,
    rollupOptions: {
      experimentalLogSideEffects: false,
      output: {
        // 最小化拆分包
        manualChunks(id) {
          if (id.includes("node_modules")) {
            return id
              .toString()
              .split("node_modules/")[1]
              .split("/")[0]
              .toString();
          }
        },
        experimentalMinChunkSize: 20 * 1024, //阀值设置为 20 KB，模块大小，大于20kb的才会单独打包成chunk。
        chunkFileNames: "koi/js/[name]-[hash].js",
        entryFileNames: "koi/js/[name]-[hash].js",
        assetFileNames: "koi/[ext]/[name]-[hash].[ext]",
      },
    },
  },

方式二

使用 terser

  build: {
    sourcemap: false,
    minify: "terser",
    chunkSizeWarningLimit: 1500,
    emptyOutDir: true,
    terserOptions: {
      compress: {
        drop_console: true,
        drop_debugger: true,
      },
    },
    rollupOptions: {
      output: {
        manualChunks(id) {
          if (id.includes("node_modules")) {
            return id
              .toString()
              .split("node_modules/")[1]
              .split("/")[0]
              .toString();
          }
        },
        chunkFileNames: (chunkInfo) => {
          const facadeModuleId = chunkInfo.facadeModuleId
            ? chunkInfo.facadeModuleId.split("/")
            : [];
          const fileName =
            facadeModuleId[facadeModuleId.length - 2] || "[name]";
          return `js/${fileName}/[name].[hash].js`;
        },
      },
    },
  }