Features FAQ#

Style processing#

How to skip the preprocessing of Less / Sass files in bundleless mode?#

Bundleless means that each source file is compiled and built separately, which can be understood as the process of code conversion of source files only. To skip the preprocessing of .less/.scss files, you need to:

1. Set source.entry to remove .less/.scss files from the entry.
2. Set output.copy to copy .less/.scss files to the output directory.
3. Set redirect.style.extension to false to disable the redirect behavior for the import path of .less/.scss files.

Below is an example of skipping the .scss file processing. All .scss files in src will be copied to the output directory and retained with consistent relative paths.

export default defineConfig({
  lib: [
    {
      // ...
      source: {
        entry: {
          index: ['./src/**', '!src/**/*.scss'],
        },
      },
      output: {
        copy: [{ from: '**/*.scss', context: path.join(__dirname, 'src') }],
      },
      redirect: {
        style: {
          extension: false,
        },
      },
    },
  ],
});

Code minification#

How to preserve all comments in the output files?#

By default, Rslib uses SWC to remove comments. The corresponding SWC jsc.minify.format configuration is

{
    comments: 'some',
    preserveAnnotations: true,
}

This will only preserve some legal comments and annotations. If you want to preserve all comments, you can refer to the following configuration

export default {
  lib: [
    // ...
  ],
  output: {
    minify: {
      jsOptions: {
        minimizerOptions: {
          format: {
            comments: 'all', // This will preserve all comments
          },
        },
      },
    },
  },
};

How to compress the output size while preserving code readability?#

Compressing code can reduce the output size and improve loading speed, but the compressed code is less readable and harder to debug. If you want to preserve code readability, you can keep variable names and disable compression to facilitate debugging. Refer to web-infra-dev/rsbuild#966.

export default {
  lib: [
    // ...
  ],
  output: {
    minify: {
      jsOptions: {
        minimizerOptions: {
          // preserve variable name and disable minify for easier debugging
          mangle: false,
          minify: false,
          compress: true,
        },
      },
    },
  },
};

d.ts generation#

How to additionally exclude specified dependencies when dts.bundle is true?#

Rslib uses rsbuild-plugin-dts to generate d.ts files, which supports configuration via output.externals for excluding certain dependencies from bundled d.ts files.

For example, a typical React component library often does not declare @types/react in peerDependencies but only in devDependencies. Following the autoExternal logic for dependency handling, Rslib will attempt to bundle @types/react into the d.ts artifact during the build. However, in practice, a component library should not bundle @types/react.

In this scenario, you can configure output.externals to exclude @types/react.

export default {
  lib: [
    // ...
  ],
  output: {
    externals: ['@types/react'],
  },
};