Question-based web performance analysis using rsdoctor/mcp-server.

This content originally appeared on DEV Community and was authored by HusDev

I’ve always wondered what makes a web application truly performant. What’s the best way to analyze a web application, especially when it grows into a massive codebase with hundreds of components and dozens of libraries? It can become quite complex to assess.

During my research on this topic, I came across Rsdoctor, a tool that’s part of the Rstack ecosystem. This tool provides a visual analysis of your bundle, helping you identify areas to optimize. However, it doesn’t suggest specific ways to reduce the bundle or highlight the most critical areas to focus on.

So, I need a tool that tells me what’s wrong with my code and why it’s not performing very well. Luckily, the Rsdoctor team developed the MCP server for Rsdoctor: @rsdoctor/mcp-server.

Let’s go over some quick theory first… You can skip this part if you already know the theory.

A bundler (e.g., Webpack, Rspack, Rollup… etc.) is a tool that combines JS, HTML, CSS, and assets and builds them together to get the output bundle.

A bundle can get too big for a few main reasons: using libraries you don’t need, messy code, not splitting code properly, and not removing unused code. These problems make your app slower to load.

Finally, MCP stands for Model Context Protocol. The “model” refers to the AI model—essentially, how the AI is structured. “Context” means the AI can understand what you’re working on (in our case, the bundle). And “protocol” refers to the communication between the server (Rsdoctor) and clients in the model (GPT agent).

Now, let’s get our hands dirty.

In this tutorial, you will start with unoptimized code and try using the Rsdoctor MCP server to get suggestions and optimize it.

Let’s look at an example:

If you clone this project, which is created by rspack (use VSCode), otherwise, mcp won’t work

https://github.com/HusDev/rsdoctor-mcp-server-example

You can run

> git checkout unoptimized-code
> npm intsall
> npm run analyze

You will get three warnings, which means that you have issues in your code.

Now, let’s analyze by the MCP and the agent.

You already have the file .vscode/mcp.json (this is only for vscode editor; if you have another editor, you need to check their documentation)

{
  "servers": {
    "rsdoctor": {
      "command": "npx",
      "args": ["-y", "@rsdoctor/mcp-server@latest"]
    }
  }
}

You need to run the server

Click on the settings and choose the agent mode

It will pop-up a menu with all mcp servers that you have in your IDE.

I wrote this prompt:

Analyze my project and give me the performance bottlenecks

Here you are! The MCP is giving me the full analysis of what the issues are, what the impact is, and the recommendation.

You can try it and start optimizing based on the suggestions. I’m happy to see your results after you analyze the bundle.

Enjoy!! 🙂

This content originally appeared on DEV Community and was authored by HusDev