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