close
Guide
Config
Plugin
API
Community
Version
Guide
Config
Plugin
API
Community

dev.progressBar

  • Type:
type ProgressBar =
  | boolean
  | {
      id?: string;
    };
  • Default: false

Whether to render progress bars to display the build progress.

TIP

In @rsbuild/core < 1.4.0, the progress bar is enabled by default in production mode.

Example

Enable the progress bar:

rsbuild.config.ts
export default {
  dev: {
    progressBar: true,
  },
};

Disable the progress bar:

rsbuild.config.ts
export default {
  dev: {
    progressBar: false,
  },
};

Only enable the progress bar in development mode:

rsbuild.config.ts
const isDev = process.env.NODE_ENV === 'development';

export default {
  dev: {
    progressBar: isDev,
  },
};

Customize the progress bar id

To modify the text displayed on the left side of the progress bar, set the id option:

rsbuild.config.ts
export default {
  dev: {
    progressBar: {
      id: 'Some Text',
    },
  },
};

When using environments, you can set different progress bar id for different environments:

rsbuild.config.ts
export default {
  environments: {
    web: {
      dev: {
        progressBar: {
          id: 'Web',
        },
      },
    },
    node: {
      output: {
        target: 'node',
      },
      dev: {
        progressBar: {
          id: 'Node',
        },
      },
    },
  },
};