Vite本地构建正常，部署至Heroku时构建停滞超时求助

我们将原Webpack构建的React应用迁移到Vite以缩短构建时间，本地构建和开发服务器运行正常，但部署到Heroku时，构建流程在转换JS文件阶段停滞，无报错日志。已尝试取消Heroku的YARN_PRODUCTION和YARN_CACHE设置，无效；怀疑内存不足但未收到Heroku相关提示。

构建日志 #

...
2023-02-05T19:26:35.377Z vite:resolve 2.32ms css_variables/colors.css -> /tmp/build_38ed17db/src/css/css_variables/colors.css
2023-02-05T19:26:35.861Z vite:resolve 0.33ms css_variables/durations.css -> /tmp/build_38ed17db/src/css/css_variables/durations.css
2023-02-05T19:26:36.059Z vite:resolve 0.12ms css_variables/sizes.css -> /tmp/build_38ed17db/src/css/css_variables/sizes.css
2023-02-05T19:26:36.090Z vite:resolve 0.12ms css_variables/indices.css -> /tmp/build_38ed17db/src/css/css_variables/indices.css
2023-02-05T19:26:36.175Z vite:resolve 0.22ms index.css -> /tmp/build_38ed17db/src/css/index.css
2023-02-05T19:26:36.210Z vite:resolve 0.12ms nav_bar.css -> /tmp/build_38ed17db/src/css/nav_bar.css
2023-02-05T19:26:36.340Z vite:resolve 0.19ms other_pages/auth_page.css -> /tmp/build_38ed17db/src/css/other_pages/auth_page.css
2023-02-05T19:26:36.460Z vite:resolve 0.37ms other_pages/page.css -> /tmp/build_38ed17db/src/css/other_pages/page.css
2023-02-05T19:26:36.724Z vite:resolve 0.19ms other_pages/simple_pages.css -> /tmp/build_38ed17db/src/css/other_pages/simple_pages.css
2023-02-05T19:26:37.009Z vite:resolve 0.18ms superadmin/superadmin_page.css -> /tmp/build_38ed17db/src/css/superadmin/superadmin_page.css
2023-02-05T19:26:37.133Z vite:resolve 0.16ms other_pages/pricing_calculator_page.css -> /tmp/build_38ed17db/src/css/other_pages/pricing_calculator_page.css
2023-02-05T19:26:37.954Z vite:resolve 0.20ms other_pages/project_portfolio_page.css -> /tmp/build_38ed17db/src/css/other_pages/project_portfolio_page.css

当前Vite配置 #

import { defineConfig, loadEnv } from "vite";
import * as path from "path";
import { fileURLToPath } from "url";
import react from "@vitejs/plugin-react";
import rollupNodePolyFill from "rollup-plugin-polyfill-node";
import { NodeModulesPolyfillPlugin } from "@esbuild-plugins/node-modules-polyfill";
import svgr from "vite-plugin-svgr";
import inject from "@rollup/plugin-inject";
import progress from 'vite-plugin-progress'
import dns from "dns";

dns.setDefaultResultOrder("verbatim");

export default defineConfig(({ command, mode, ssrBuild }) => {
  const env = loadEnv(mode, process.cwd(), "");

  return {
    base: "/",
    root: "./",

    resolve: {
      alias: {
        "react-native": "react-native-web",
        "src": path.resolve(path.dirname(fileURLToPath(import.meta.url)), "./src"),
        util: "rollup-plugin-node-polyfills/polyfills/util",
        sys: "util",
        events: "rollup-plugin-node-polyfills/polyfills/events",
        stream: "rollup-plugin-node-polyfills/polyfills/stream",
        path: "rollup-plugin-node-polyfills/polyfills/path",
        querystring: "rollup-plugin-node-polyfills/polyfills/qs",
        punycode: "rollup-plugin-node-polyfills/polyfills/punycode",
        url: "rollup-plugin-node-polyfills/polyfills/url",
        string_decoder:
          "rollup-plugin-node-polyfills/polyfills/string-decoder",
        http: "rollup-plugin-node-polyfills/polyfills/http",
        https: "rollup-plugin-node-polyfills/polyfills/http",
        os: "rollup-plugin-node-polyfills/polyfills/os",
        assert: "rollup-plugin-node-polyfills/polyfills/assert",
        constants: "rollup-plugin-node-polyfills/polyfills/constants",
        _stream_duplex:
          "rollup-plugin-node-polyfills/polyfills/readable-stream/duplex",
        _stream_passthrough:
          "rollup-plugin-node-polyfills/polyfills/readable-stream/passthrough",
        _stream_readable:
          "rollup-plugin-node-polyfills/polyfills/readable-stream/readable",
        _stream_writable:
          "rollup-plugin-node-polyfills/polyfills/readable-stream/writable",
        _stream_transform:
          "rollup-plugin-node-polyfills/polyfills/readable-stream/transform",
        timers: "rollup-plugin-node-polyfills/polyfills/timers",
        console: "rollup-plugin-node-polyfills/polyfills/console",
        vm: "rollup-plugin-node-polyfills/polyfills/vm",
        zlib: "rollup-plugin-node-polyfills/polyfills/zlib",
        tty: "rollup-plugin-node-polyfills/polyfills/tty",
        domain: "rollup-plugin-node-polyfills/polyfills/domain",
        buffer: "rollup-plugin-node-polyfills/polyfills/buffer-es6",
        process: "rollup-plugin-node-polyfills/polyfills/process-es6",
        "node-modules-polyfills:buffer": "buffer",
        "node-modules-polyfills:string_decoder": "string_decoder"
      }
    },

    server: {
      port: 3001
    },

    // Env vars aren't exposed by default so we need to opt-in by prefix
    envPrefix: [
      "REACT_APP_",
      "NODE_ENV"
    ],

    define: {
      __APP_ENV__: env.APP_ENV,
      "process.env": env,
      VITE: true
    },

    build: {
      target: "modules",
      minify: "esbuild",
      manifest: true,
      sourcemap: true,
      outDir: "build",
      rollupOptions: {
        cache: true,
        plugins: [
          inject({
            exclude: ["node_modules/library/**/*.js"]
          }),
          rollupNodePolyFill()
        ],
        output: {
          manualChunks(id) {
            if (id.includes('recharts')) {
              return 'recharts';
            }
          }
        }
      },
      commonjsOptions: {
        transformMixedEsModules: true,
        esmExternals: "auto"
      }
    },

    optimizeDeps: {
      esbuildOptions: {
        define: {
          global: "globalThis"
        },
        plugins: [
          NodeModulesPolyfillPlugin()
        ]
      }
    },

    plugins: [
      react(),
      svgr(),
      progress()
    ]
  };
});

排查方向与解决方案 #

1. 内存限制排查与优化 #

Heroku默认dyno内存有限，构建停滞大概率和内存不足有关：

• 临时升级Heroku dyno到更高规格（如Standard 1X）测试构建是否能完成，验证内存问题。
• 关闭构建时的sourcemap生成：将build.sourcemap设为false，减少内存占用。
• 调整manualChunks策略，拆分更多大依赖包（如antd、lodash等），避免单chunk过大导致内存过载。

2. Vite配置优化 #

当前配置中polyfill相关设置可能导致构建流程异常：

• 移除冗余的polyfill插件：rollupNodePolyFill和NodeModulesPolyfillPlugin可能重复工作，尝试只保留NodeModulesPolyfillPlugin在optimizeDeps.esbuildOptions.plugins中，移除rollupOptions中的rollupNodePolyFill。
• 简化resolve.alias中的node模块polyfill：很多现代库已适配浏览器环境，不需要全量polyfill，可逐步移除不必要的alias，只保留实际用到的模块（如process、buffer）。
• 关闭rollup缓存：将rollupOptions.cache设为false，避免缓存导致的内存泄漏或构建异常。

3. 构建流程调试 #

• 增加Vite构建日志级别：在Heroku构建命令中添加VITE_LOG_LEVEL=debug环境变量，获取更详细的构建日志，定位停滞的具体环节。
• 本地模拟Heroku环境：使用Heroku Local工具在本地复现构建流程，看是否能复现停滞问题，便于调试。

4. 依赖与缓存清理 #

• 清理Heroku构建缓存：执行heroku builds:cache:purge命令，清除旧缓存后重新构建。
• 检查package.json中的依赖版本：确保Vite及相关插件版本兼容，尝试降级/升级Vite到稳定版本（如4.x系列）。

内容的提问来源于stack exchange，提问作者Ja Superior