Rsdoctor: A Bundle Analysis Solution

As 2024 unfolds, it’s apparent that one aspect of web development remains challenging: optimizing the performance and size of web applications. During the development process, it’s common to encounter issues such as bloated bundles or sluggish build times. Identifying the underlying causes of these issues is crucial yet often complex, particularly for those managing large-scale projects.

For developers who have dealt with this, the journey has often involved experimenting with various analysis tools.

The objective is clear: to gain a comprehensive understanding of build times and bundle sizes within Webpack or Rspack builds. Finding a tool that provides visibility into these factors has been like searching for a proverbial needle in a haystack. Many of the existing tools have not kept pace with updates, such as those in Webpack 5.

Webpack bundle analyzer, for example, offers insightful visual representations of a project’s structure. But, fell short of delivering the level of detail required for larger application builds. When it comes to regressions in build speed, there are even fewer options to diagnose the problem.

The good news is that this gap has not gone unnoticed.

Rsdoctor

Rsdoctor is a versatile, one-stop tool designed to help diagnose and analyze the intricacies of your build process and the artifacts it generates.

• Support for Rspack and Webpack: It caters to a wide range of projects by offering comprehensive build analysis for both platforms.
• Detailed Compilation Insights: Rsdoctor breaks down the time-consuming aspects and behavioral details of the compilation, offering a clear view of your build’s inner workings.
• Anti-Degradation Capabilities: With features like bundle Diff, Rsdoctor ensures your builds remain efficient over time.
• Easy to use: a great UX that's easy to navigate and understand

Key Features of Rsdoctor

Provides corresponding data and analysis functions for Loaders, Plugins, and Module Resolve to help you analyze problems in the compilation process.

• Compilation Visualization: A visual representation of the compilation behavior and time consumption, making it easier to identify and resolve build issues.
• Multiple Analysis Capabilities: From supporting build artifact analysis to build-time analysis, Rsdoctor equips you with tools to examine resource lists, module dependencies, and more.
• Custom Rule Support: Tailor the analysis to your project’s needs by adding custom component scan rules based on Rsdoctor’s build data.
• Framework Independence: Rsdoctor supports all projects built on Webpack or Rspack, just install and enjoy, wherever you’re at.

Getting Started with Rsdoctor

Step 1: Install Dependencies

To begin using Rsdoctor, you’ll need to install the necessary dependencies for your project type:

For Rspack Projects:

npm install @rsdoctor/rspack-plugin -D

For Webpack Projects:

npm install @rsdoctor/webpack-plugin -D

Step 2: Register Plugin

After installing the dependencies, integrate Rsdoctor into your project’s configuration:

For Rspack:

In rspack.config.js, add the RsdoctorRspackPlugin:

const { RsdoctorRspackPlugin } = require('@rsdoctor/rspack-plugin');
module.exports = {
  // ...
  plugins: [
    process.env.RSDOCTOR && new RsdoctorRspackPlugin({
        // plugin options
    }),
  ].filter(Boolean),
};

For Rsbuild:

In rsbuild.config.ts, add the RsdoctorRspackPlugin within the tools.rspack section:

typescript

import { RsdoctorRspackPlugin } from '@rsdoctor/rspack-plugin';
export default {
  // ...
  tools: {
    rspack(config, { appendPlugins }) {
      if (process.env.RSDOCTOR) {
        appendPlugins(new RsdoctorRspackPlugin({
            // plugin options
        }));
      }
    },
  },
};

For Webpack:

In webpack.config.js, add the RsdoctorWebpackPlugin:

const { RsdoctorWebpackPlugin } = require('@rsdoctor/webpack-plugin');
module.exports = {
  // ...
  plugins: [
    process.env.RSDOCTOR && new RsdoctorWebpackPlugin({
        // plugin options
    }),
  ].filter(Boolean),
};

For Modern.js Framework:

If you’re using Modern.js, register the RsdoctorWebpackPlugin plugin through tools.webpack.

Step 3: Run Build

With Rsdoctor enabled, run the build command:

# Enable Rsdoctor
RSDOCTOR=true npm run build

# Disable Rsdoctor
npm run build

Rsdoctor Features

• Project Overview: View your current project configuration, version, and more.
• Bundle Overview: See details about the artifacts built for your project.
• Compilation Overview: Access data on your project’s compilation process, like build times, resolve times, transform times
• Bundle Alert: Get alerts based on build artifact data for proactive issue resolution.

Compilation Analysis

• Loader Compilation Behavior Analysis: Analyze loader behavior at the directory and file level.
• Loader Time Consumption Analysis: View the execution sequence of all loaders.
• Plugins Analysis: Dive into the data of plugins used in your project.
• Resolver Analysis: Get insights on Resolver parsing capabilities.

Bundle Analysis

• Bundle Analysis: Examine relationships between assets, chunks, and modules, as well as the packaged code and size analysis of each module.
• Module Analysis: Understand module dependencies within your project.
• Duplicate Packages Optimization: Identify and optimize duplicate dependencies.
• Bundle Diff: A planned feature for comparative analysis of two artifacts.

Rsdoctor

GitHub - web-infra-dev/rsdoctor: A one-stop build analyzer for Rspack and Webpack.

While it's still v0.1 — it looks promising!