#Playground

#Introduction

Playground is an online analysis tool provided by Rsdoctor that supports uploading build analysis data and viewing analysis reports online. No local installation of Rsdoctor is required to quickly experience build analysis features, with support for complete report display.

#Supported Data Formats

#1. Rsdoctor Analysis Data

Supports uploading JSON format analysis data generated by Rsdoctor to re-display complete analysis reports.

#Configuration Requirements

Need to configure output.mode: 'brief' and set output.options.type to ['json'] or ['html', 'json']:

export default {
  plugins: [
    new RsdoctorRspackPlugin({
      output: {
        mode: 'brief',
        options: {
          type: ['json'], // or ['html', 'json']
        },
      },
    }),
  ],
};

• Optional configuration
  • optimizationBailout: Optional configuration. If not enabled, it will only affect the display of Bailout Reason for each Module.

#Usage Steps

1. After building the project, find the rsdoctor-data.json file in the output directory
2. Visit the Playground page
3. Upload the rsdoctor-data.json file
4. View the complete analysis report

:::tip Difference between Brief mode and Normal mode:

• Brief mode: Generates single files (HTML or JSON), convenient for sharing and uploading
• Normal mode: Generates folders containing multiple files, suitable for local viewing :::

#2. Webpack/Rspack Stats Data

Supports uploading stats.json files from Webpack or Rspack to automatically generate analysis reports.

#Configuration Requirements

Need to configure detailed stats options to get complete build information:

Method 1: Use verbose mode

verbose mode outputs all build information (except debug info) and automatically includes all data required by Rsdoctor. For custom configuration, refer to the example below. See Rspack stats for detailed information.

export default {
  stats: 'verbose',
};

Method 2: Stats configuration

Configure according to the Stats options below.

export default {
  stats: {
    all: false,
    chunks: true,
    assets: true,
    modules: true,
    chunkModules: true,
    hash: true,
    ids: true,
    version: true,
    optimizationBailout: true, // Optional configuration
  },
};

#Usage Steps

1. Set the above stats options in the build configuration
2. Build the project to generate the stats.json file
3. Visit the Playground page
4. Upload the stats.json file
5. View the automatically generated analysis report