repository·main·Indexed 22 days ago
https://github.com/web-infra-dev/rsdoctorA build analyzer tailored for the Rspack ecosystem and fully compatible with webpack. Rsdoctor provides visualization and deep analysis of build artifacts and processes, including compilation behavior, resource lists, module dependencies, and build-time analysis for Loaders, Plugins, and Resolvers. It supports frameworks such as Rsbuild, Rspress, Rslib, Docusaurus, Next.js, and Nuxt. The ecosystem includes @rsdoctor/core for plugin development, @rsdoctor/client for reporting, @rsdoctor/cli for profile analysis, and @rsdoctor/agent-cli for programmatic access to analysis data.
Rsdoctor is a build analyzer designed for the Rspack ecosystem and is fully compatible with the webpack ecosystem. It provides a one-stop, intelligent analysis platform to make build processes transparent and optimizable through visualization.
Key capabilities include:
Rsdoctor provides comprehensive visibility into the build process through three main lenses: Build Overview, Compilation Analysis, and Bundle Analysis.
Provides high-level information about the project state and artifacts:
Rsdoctor's Bundle Size module allows you to analyze Webpack or Rspack build artifacts. It provides insights into resource sizes, duplicate packages, and module reference relationships.
Key features include:
The analysis is presented in two primary view modes:
The repository includes several example directories to demonstrate different integration scenarios:
rspack-minimal/: A basic Rspack setup integrated with Rsdoctor.rspack-banner-minimal/: Rspack configuration including a banner plugin.rspack-layers-minimal/: Rspack configuration with layer support.rsbuild-minimal/: An Rsbuild setup integrated with Rsdoctor.To effectively use Rsdoctor's analysis and plugin features, it is important to distinguish between the different units of a build process:
Assets are the final static files output to your target directory after a build. These are the files eventually loaded by the browser.
logo.png, main.css, app.js.A chunk is a bundle created by Rspack by packaging multiple modules together. A single chunk can contain one or more assets.
index might contain both index.js and index.css.Modules are the smallest units in the build process. In Rspack, almost any file (JS, CSS, images, etc.) is considered a module. Rspack organizes these through a dependency graph to eventually compose them into assets.
index.js or style.css are modules. They are not the final artifacts themselves, but they are the building blocks that participate in the packaging process.Clicking a module tag opens the module details view, which provides:
stats.reasons.The Compile Overall card on the Rsdoctor homepage provides a high-level summary of your project's compilation process. It breaks down the total time into specific phases.
Key Interaction: If the time data for a phase is displayed in blue, it is interactive. You can click on it to view a detailed breakdown of that specific phase's timing and hook execution.
Loader timing data provided by Rsdoctor is an estimated time. Accurate measurement is difficult because:
Note that timing for plugins like CssExtractRspackPlugin may appear high because the loader waits for other asynchronous loaders to complete during its pitch phase.
Concatenated modules are multiple modules merged into a single closure. Rsdoctor supports analyzing these to identify the real bundled size of sub-modules, which is critical for optimizing code splitting.
For Rspack projects using version >= 1.4.11, the built-in Rsdoctor plugin has enhanced sourcemap capabilities that allow seamless analysis of concatenated modules without needing to manually enable source maps.
For webpack projects, you must enable source maps to accurately decompose and analyze concatenated modules. Supported configurations include:
source-maphidden-source-mapinline-source-mapcheap-source-mapcheap-module-source-mapnosources-source-mapexport default {
// ...
devtool: 'cheap-source-map', // Required for webpack concatenated module analysis
};