[Bug]: Uncontrolled memory consumption during production build using RSBuild

[Ayush048]

Version

System:
    OS: macOS 15.0
    CPU: (12) arm64 Apple M2 Pro
    Memory: 173.06 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Browsers:
    Chrome: 131.0.6778.205
    Edge: 131.0.2903.112
    Safari: 18.0
  npmPackages:
    @rsbuild/core: ^1.1.4 => 1.1.4
    @rsbuild/plugin-eslint: ^1.1.0 => 1.1.0
    @rsbuild/plugin-sass: ^1.1.2 => 1.1.2

Details

I'm encountering high memory usage with the RsBuild dev server & production build as well. I cannot effectively limit it, despite setting the NODE_OPTIONS=--max-old-space-size environment variable as recommended in the Rsbuild documentation.

However, monitoring memory usage via the Activity Monitor shows it consistently exceeds 5 GB, regardless of these settings.

Relevant Tech Stack: node: v18.17.0 yarn: v1.22.22 react: v18.2 @rsbuild/core: v1.1.10 typeScript: v4.9.4

Device Specs: OS: macOS Sequoia (v15.0) RAM: 16 GB

I’ve attempted to restrict memory consumption using the following methods:

Using Node and executing rebuild file directly,
"script":{ "build": "node --max-old-space-size=4096 ./node_modules/@rsbuild/core/bin/rsbuild.js build" }

Using NODE_OPTIONS,
"script":{ "build": "NODE_OPTIONS=--max_old_space_size=4096 rsbuild build" }

Setting the environment variable in the rsbuild.config.js file,
process.env.NODE_OPTIONS = '--max-old-space-size=4096'

Even tried using different rsbuild versions as well, like v1.1.4, v1.1.6, v1.1.10, v1.2.0-alpha.0

Reproduce link

NA

Reproduce Steps

In my case, I am migrating my project from the webpack using rebuild.
Project TechStake: React, Typescript.
Number of files in project: 6.7k

Please find below my rsbuild.config.js

module.exports = defineConfig(async ({ env, command }) => {
  return {
    mode: 'production',
    plugins: [
      pluginSass(),
      pluginSvgr({ mixedImport: true }),
      pluginReact({ swcReactOptions: { importSource: '@emotion/react' } }),
    ],
    html: {
      template: paths.appHtml,
      inject: true,
      crossorigin: true,
      templateParameters: {
        ...Env.raw,
        PUBLIC_URL: '',
      },
    },
    tools: {
      rspack: (config, { rspack }) => {

        config.plugins?.push(
          new rspack.CssExtractRspackPlugin({
            // Options similar to the same options in webpackOptions.output
            // both options are optional
            filename: 'static/css/[name].[contenthash:8].css',
            chunkFilename: 'static/css/[name].[contenthash:8].chunk.css',
          })
        );

        config.plugins?.push(new ESLintPlugin({ failOnError: true }));

        config.output.publicPath = publicPath;

        config.module = {
          ...config.module,
          rules: [
            ...config.module.rules,
            {
              test: /\.(j|t)s$/,
              exclude: [/[\\/]node_modules[\\/]/],
              loader: 'builtin:swc-loader',
              options: {
                jsc: {
                  parser: {
                    syntax: 'typescript',
                  },
                  externalHelpers: true,
                  transform: {
                    react: {
                      runtime: 'automatic',
                    },
                  },
                },
                env: {
                  targets: 'Chrome >= 48',
                },
              },
            },
            {
              test: /\.(j|t)sx$/,
              loader: 'builtin:swc-loader',
              exclude: [/[\\/]node_modules[\\/]/],
              options: {
                jsc: {
                  parser: {
                    syntax: 'typescript',
                    tsx: true,
                  },
                  transform: {
                    react: {
                      runtime: 'automatic',
                    },
                  },
                  externalHelpers: true,
                },
                env: {
                  targets: 'Chrome >= 48', // browser compatibility
                },
              },
            },
            {
              test: /\.css$/,
              use: [CssExtractPlugin.loader, cssLoader, postcssLoader],
              type: 'javascript/auto',
            },
            {
              test: /\.s[c|a]ss$/,
              use: [
                CssExtractPlugin.loader,
                cssLoader,
                postcssLoader,
                {
                  loader: 'sass-loader',
                },
              ],
              type: 'javascript/auto',
            },
            {
              test: /\.svg$/,
              include: [paths.appIcons, paths.fwkIcons],
              loader: require.resolve('@svgr/webpack'),
              options: {
                svgoConfig: {
                  plugins: [
                    {
                      name: 'preset-default',
                      params: {
                        overrides: {
                          removeViewBox: false,
                        },
                      },
                    },
                  ],
                },
                ref: true,
              },
            },
          ],
        };

        return config;
      },
    },
    output: {
      sourceMap: true,
      distPath: {
        root: paths.appBuild,
      },
      assetPrefix: publicPath,
      copy: {
        patterns: [\`${paths.appSrc}/service-worker.js\`],
      },
    },
    resolve: {
      alias: {
        src: path.resolve('src/'),
      },
    },
    source: {
      entry: {
        index: paths.appIndexJs,
        appWorker: {
          import: paths.appWorkerIndexJs,
          html: false,
        },
      },
      tsconfigPath: './tsconfig.json',
      assetsInclude: /\.svg$/,
      define: {
        ...Env.stringified,
      },
    },
    performance: {
      removeMomentLocale: true,
    },
    experiments: {
      css: true,
    },
    module: {
      css: {
        namedExports: true,
      },
      'css/auto': {
        namedExports: true,
      },
      'css/module': {
        namedExports: true,
      },
    },
  };
});

[chenjiahan]

Can you try to disable the ESLintPlugin? This will help us determine if the memory usage is related to ESLint.

[Ayush048]

I tried that too. Memory usage was the same in both cases.

[chenjiahan]

According to https://nodejs.org/api/cli.html#--max-old-space-sizesize-in-mib, the --max-old-space-size flag only limits the max memory size of V8's old memory section.

However, the memory usage shown in Activity Monitor will include old space and semi space, and possibly more.

[Ayush048]

We were using the same memory flag, where it was controlling the memory and the same was reflecting in Activity Monitor too. So, as far as I understand, this should have worked, but it doesn't seem to.

is there any other way to control overall memory through any flag?

Let me know if you need any profiling reports from my side.

[chenjiahan]

Can you share why you need to limit memory? If the purpose is to reduce memory usage, perhaps analyzing the reasons for memory usage is more important.

[Ayush048]

We have a dedicated server for parallel building our frontend and backend applications. However, if one build consumes too much memory, it could affect other builds running at the same time, which is a concern for us.