<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: HusDev</title>
    <description>The latest articles on DEV Community by HusDev (@husdev).</description>
    <link>https://dev.to/husdev</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F118247%2F4d03006f-de6c-44a6-9313-a4cfa691a47c.jpeg</url>
      <title>DEV Community: HusDev</title>
      <link>https://dev.to/husdev</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/husdev"/>
    <language>en</language>
    <item>
      <title>Question-based web performance analysis using rsdoctor/mcp-server.</title>
      <dc:creator>HusDev</dc:creator>
      <pubDate>Sun, 17 Aug 2025 22:57:59 +0000</pubDate>
      <link>https://dev.to/husdev/question-based-web-performance-analysis-using-rsdoctormcp-server-325a</link>
      <guid>https://dev.to/husdev/question-based-web-performance-analysis-using-rsdoctormcp-server-325a</guid>
      <description>&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;During my research on this topic, I came across &lt;strong&gt;Rsdoctor&lt;/strong&gt;, 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.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fobcnzcwzfhu7ghsxc4nt.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fobcnzcwzfhu7ghsxc4nt.png" alt="rsdoctor visual" width="800" height="440"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;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: &lt;a href="https://www.npmjs.com/package/@rsdoctor/mcp-server" rel="noopener noreferrer"&gt;@rsdoctor/mcp-server&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;Let’s go over some quick theory first… You can skip this part if you already know the theory.&lt;/p&gt;

&lt;p&gt;A &lt;strong&gt;bundler&lt;/strong&gt; (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.&lt;/p&gt;

&lt;p&gt;A &lt;strong&gt;bundle&lt;/strong&gt; 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.&lt;/p&gt;

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

&lt;p&gt;Now, let’s get our hands dirty.&lt;/p&gt;

&lt;p&gt;In this tutorial, you will start with unoptimized code and try using the Rsdoctor MCP server to get suggestions and optimize it.&lt;/p&gt;

&lt;p&gt;Let’s look at an example:&lt;/p&gt;

&lt;p&gt;If you clone this project, which is created by rspack (use VSCode), otherwise, mcp won’t work&lt;/p&gt;

&lt;p&gt;&lt;a href="https://github.com/HusDev/rsdoctor-mcp-server-example" rel="noopener noreferrer"&gt;https://github.com/HusDev/rsdoctor-mcp-server-example&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;You can run&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt; git checkout unoptimized-code
&lt;span class="o"&gt;&amp;gt;&lt;/span&gt; npm intsall
&lt;span class="o"&gt;&amp;gt;&lt;/span&gt; npm run analyze
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;You will get three warnings, which means that you have issues in your code.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fojbq485cop57dfptnd5t.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fojbq485cop57dfptnd5t.png" alt="rsdoctor visual analysis" width="800" height="401"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Now, let’s analyze by the MCP and the agent. &lt;/p&gt;

&lt;p&gt;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)&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight json"&gt;&lt;code&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"servers"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"rsdoctor"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
      &lt;/span&gt;&lt;span class="nl"&gt;"command"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"npx"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
      &lt;/span&gt;&lt;span class="nl"&gt;"args"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="s2"&gt;"-y"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"@rsdoctor/mcp-server@latest"&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;You need to run the server&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fjf27mrzppxuohy3s1g7n.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fjf27mrzppxuohy3s1g7n.png" alt="defect in rsdoctor visuals" width="800" height="390"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Click on the settings and choose the agent mode&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F2i4ixw1vdv4qoounlujx.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F2i4ixw1vdv4qoounlujx.png" alt="Click on the setting and choose the agent" width="800" height="192"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;A menu will pop up with all mcp servers that are installed in your IDE.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fvv9vi7e23il4qynw4r87.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fvv9vi7e23il4qynw4r87.png" alt="run mcp server" width="800" height="232"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;I wrote this prompt:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Analyze my project and give me the performance bottlenecks&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fvk5kycrdsa7dysivfkzo.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fvk5kycrdsa7dysivfkzo.png" alt="mcp suggest the commands" width="800" height="102"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Here you are! The MCP is giving me the full analysis of what the issues are, what the impact is, and the recommendation.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fis25gbbpn4krqx7ccmro.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fis25gbbpn4krqx7ccmro.png" alt="full analysis" width="800" height="686"&gt;&lt;/a&gt;&lt;/p&gt;

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

&lt;p&gt;Summarize my takeaway: &lt;/p&gt;

&lt;p&gt;Analyzing a massive web app can be a real headache, especially when you have to do it manually. Tools like Rsdoctor are a good start, but MCP takes it to the next level. Instead of just seeing what's wrong, you get to ask a simple question and let the AI give you the full breakdown, along with clear steps on how to fix it.&lt;/p&gt;

&lt;p&gt;By using the Rsdoctor MCP server, you can quickly find and solve performance bottlenecks, making your app faster and your life as a developer a whole lot easier.&lt;/p&gt;

&lt;p&gt;Check out the todo list:&lt;br&gt;
&lt;a href="https://rsdoctor.rs/guide/start/mcp#tools-list" rel="noopener noreferrer"&gt;https://rsdoctor.rs/guide/start/mcp#tools-list&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Also check for more web perf content: &lt;a href="http://www.00ff00.dev" rel="noopener noreferrer"&gt;www.00ff00.dev&lt;/a&gt; and &lt;a href="http://www.instagram.com/green.dev/" rel="noopener noreferrer"&gt;www.instagram.com/green.dev/&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Enjoy!! :)&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>performance</category>
      <category>webperf</category>
      <category>javascript</category>
    </item>
  </channel>
</rss>
