monosize Rspack Bundler Plugin

0.2.1 verified Thu Apr 23 auth: no javascript

monosize-bundler-rspack is a specialized plugin for the `monosize` tool, designed to integrate Rspack as the underlying bundler for comprehensive JavaScript bundle size analysis. It allows developers to harness the high performance of Rspack for evaluating bundle sizes within large-scale monorepos or projects optimized for `monosize`. Currently at version 0.2.1, it is an actively developed component within the broader Microsoft `monosize` ecosystem. While exact release cadences are not strictly defined for this plugin, its early version number indicates ongoing development and potential for rapid evolution. A key differentiator is its default 'batch build mode,' which significantly enhances build speed (8-14x faster in typical scenarios) compared to sequential bundling, making it exceptionally well-suited for efficient monorepo size optimization. The plugin also provides an API to customize the underlying rsbuild configuration, offering flexibility for intricate build requirements.

Common errors

error Error: Cannot find module 'monosize-bundler-rspack' from 'monosize.config.mjs' ↓

cause The `monosize-bundler-rspack` package has not been installed, or the path in the import statement is incorrect.

fix

Ensure the package is installed as a dev dependency: npm install --save-dev monosize-bundler-rspack or yarn add --dev monosize-bundler-rspack.

error TypeError: rspackBundler is not a function ↓

cause This usually indicates a CommonJS `require` call was used in an ES module context (`.mjs` file) or a named import was attempted for a default export.

fix

Ensure your monosize.config.mjs uses import rspackBundler from 'monosize-bundler-rspack'; and not const rspackBundler = require(...) or import { rspackBundler } from '...'. Also verify the file extension is .mjs.

error rsbuild build failed: [detailed Rspack error messages] ↓

cause The customized rsbuild configuration is invalid, or there's an issue with one of the source files being bundled (e.g., missing dependencies, syntax errors).

fix

Carefully review the Rspack error messages for specifics. Debug your monosize.config.mjs customization by commenting out changes, and ensure all source files and their dependencies are correctly resolved and valid.

Warnings

breaking As a pre-1.0 package (current version 0.2.1), `monosize-bundler-rspack` may introduce breaking changes in minor or even patch versions. Developers should review release notes carefully when upgrading. ↓

fix Always check the GitHub repository's release notes or changelog before upgrading for versions below 1.0.0.

gotcha By default, `monosize` runs in 'batch build mode' when using this bundler, which is significantly faster. However, this can sometimes obscure issues related to individual builds. If you suspect an issue with a specific fixture's build, you might need to switch to sequential mode. ↓

fix To use sequential mode, run `monosize measure --build-mode=sequential`. This builds one fixture at a time, which can be helpful for debugging build-specific problems.

gotcha The `rspackBundler` function accepts a callback to customize the rsbuild configuration. Incorrect modifications to this configuration, especially if they conflict with `monosize`'s internal bundling assumptions, can lead to incorrect size measurements or build failures. ↓

fix When customizing the configuration, make incremental changes and thoroughly test the output. Refer to the rsbuild documentation for valid configuration options. Utilize `console.log(config)` within the callback to inspect the default configuration before modification.

Install

npm install monosize-bundler-rspack

yarn add monosize-bundler-rspack

pnpm add monosize-bundler-rspack

Imports

rspackBundler
wrong
```
const rspackBundler = require('monosize-bundler-rspack');
```
correct
```
import rspackBundler from 'monosize-bundler-rspack';
```
This plugin expects an ES module environment, typically used within a `monosize.config.mjs` file.
RspackBundlerConfig
```
import type { RspackBundlerConfig } from 'monosize-bundler-rspack';
```
Import for TypeScript type definitions when customizing the rsbuild configuration.
CustomizeConfigCallback
```
import type { CustomizeConfigCallback } from 'monosize-bundler-rspack';
```
Type for the callback function passed to `rspackBundler` for configuration customization.

Quickstart

This quickstart demonstrates configuring `monosize.config.mjs` to use `monosize-bundler-rspack` as the bundler, including examples of customizing the underlying rsbuild configuration for aliases and module rules.

/* monosize.config.mjs */
import rspackBundler from 'monosize-bundler-rspack';

/**
 * @type {import('monosize').MonosizeConfig}
 */
export default {
  // Define your workspace roots for monosize to scan
  workspaces: [
    'packages/*',
    'apps/*'
  ],
  // Specify fixtures (entry points) for size measurement
  fixtures: {
    'my-component': 'packages/my-component/src/index.ts',
    'my-util': 'packages/my-util/src/index.ts'
  },
  // Integrate the Rspack bundler plugin
  bundler: rspackBundler(config => {
    // Example: Customize Rspack's resolve alias for specific packages
    config.resolve ??= {};
    config.resolve.alias = {
      ...config.resolve.alias,
      'some-internal-lib': 'libs/some-internal-lib/dist/esm/index.js'
    };
    // Example: Add a new rule for handling SVG files
    config.module?.rules?.push({
        test: /\.svg$/,
        type: 'asset/resource'
    });
    return config;
  }),
  // Other monosize configurations...
  output: {
    dir: './monosize-results',
    filename: 'report.json'
  }
};

/* Example of how to run this config in your package.json */
// "scripts": {
//   "measure-size": "monosize measure"
// }