close
  • English

      • 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',
        },
      },
    },
  },
};