close
  • 简体中文
  • MCP Server

    介绍

    @rsdoctor/mcp-server 是一个 MCP Server,旨在帮助用户更便捷地使用 Rsdoctor 的构建数据。它可以与 Rsdoctor 的本地构建分析数据配合使用,通过问答的形式,帮助你快速获取构建分析结果。

    主要功能

    @rsdoctor/mcp-server 提供四大类核心分析能力:

    • 产物信息分析: 分析构建产物的体积、组成等信息
    • 依赖问题分析: 分析项目依赖关系、重复依赖、Tree Shaking 等问题
    • 产物优化建议: 提供产物体积优化、代码分割等建议
    • 编译优化建议: 分析编译耗时,提供编译性能优化建议

    使用示例

    1. 产物优化分析

    通过提问 "Please help me to optimize the bundle or artifacts",工具会分析构建产物并给出优化建议。

    示例视频:

    2. 依赖分析

    通过提问 "Please investigate the referrer dependency of node_modules/dayjs/index.js",工具会分析指定模块的依赖关系。

    示例视频:

    3. 编译性能分析

    通过提问 "Please help me find files or loaders with high compilation time and provide optimization suggestions",工具会分析编译耗时并给出优化建议。

    示例视频:

    4. Tree shaking 问题

    通过提问 "Please help me to check why react-dom/client.js can not be tree-shaken?",工具会帮忙分析该模块没有被 Tree shaking 的原因。

    注意:请使用 1.1.5 及以上版本的 Rsdoctor 插件。

    tree-shaking

    快速开始

    💡 版本要求

    Warning

    需要使用以下 rsdoctor 插件(版本要求):

    • @rsdoctor/rspack-plugin >= 1.1.2
    • @rsdoctor/webpack-plugin >= 1.1.2

    注意:请确保使用最新版本以获得最佳体验。

    1. 插件配置

    如果还没有添加 Rsdoctor 插件,那么需要在项目中配置,👉🏻 快速开始

    2. 开启 Rsdoctor 并执行本地构建

    开启 Rsdoctor 的情况下,执行构建。不要使用 MCP Client 启动项目,因为 Rsdoctor 挂载的本地服务会卡住 MCP Client 的对话进程

    # 开启 Rsdoctor
    
    RSDOCTOR=true npm run build
    • 注:如果配置了 disableClientServer: true,需要修改为 disableClientServer: false,disableClientServer 默认是 false。

    3. 启动 MCP Server

    Cursor

    将 Rsdoctor MCP 服务器添加到 Cursor
    1. 在项目根目录创建 .cursor/mcp.json
    {
      "mcpServers": {
        "rsdoctor": {
          "command": "npx",
          "args": ["-y", "@rsdoctor/mcp-server@latest"]
        }
      }
    }
    1. 重启 Cursor 编辑器
    2. 在 MCP 面板中开始交互

    VS Code / GitHub Copilot

    在 VS Code 中安装
    1. 在项目根目录创建 .vscode/mcp.json,GitHub Copilot 默认会自动加载 MCP Server 配置
    {
      "mcpServers": {
        "rsdoctor": {
          "command": "npx",
          "args": ["-y", "@rsdoctor/mcp-server@latest"]
        }
      }
    }
    1. 在 Copilot Chat 面板中选择 Agent 模式,然后开始交互。

    Claude

    claude_desktop_config.json 中添加配置:

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

    Cline

    在配置文件中添加:

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

    Trae

    可在「创建智能体」- 「MCP」-「添加」-「手动添加」中配置添加:

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

    目前已在 Trae CN MCP 市场中发布,除了手动配置外,也可以通过市场搜索 「rsdoctor-mcp」进行添加并使用。

    trae-mcp

    配置说明

    命令行参数

    参数说明默认值示例
    compiler指定要分析的编译器名称自动检测--compiler web
    port指定 MCP Server 端口最新启动的端口号(写入到 ~/.cache/rsdoctor/mcp.json 中)--port 1000

    多编译器项目配置

    在多编译器项目中,每个编译器会有一份 Rsdoctor 构建分析数据。使用 --compiler 参数指定要分析的编译器:

    npx @rsdoctor/mcp-server@latest --compiler web

    端口配置

    1. 配置 MCP Server 端口:
    npx @rsdoctor/mcp-server@latest --port 1000
    1. 配置 Rsdoctor 本地服务端口:
    new RsdoctorRspackPlugin({
      port: 9988,
    });

    Tools 介绍

    产物分析工具

    工具说明参数
    get_chunks获取所有代码块信息-
    get_chunk_by_id获取特定代码块信息chunkId (Number)
    get_large_chunks获取体积过大的代码块-
    get_media_asset_prompt获取媒体资源优化建议-

    依赖分析工具

    工具说明参数
    get_modules获取所有模块信息-
    get_module_by_id获取模块信息moduleId (Number)
    get_module_by_path根据路径获取模块modulePath (String)
    get_module_issuer_path获取模块来源路径moduleId (String)
    get_package_info获取包信息-
    get_package_dependencies获取依赖列表-
    get_duplicate_packages获取重复包列表-
    get_similar_packages获取相似包列表-

    性能分析工具

    工具说明参数
    get_loader_time_all_files获取文件 loader 耗时-
    get_loader_times获取编译目录 loader 耗时-
    get_rule_info获取构建规则扫描结果-

    常见问题

    1. 连接问题

    问题: 无法连接到 Rsdoctor MCP Server 或没有成功返回数据

    解决方案:

    • 确保 Rsdoctor 本地 Server 已成功启动。
      • 手动启动本地 Server,请勿使用 MCP Client 启动项目,因为 Rsdoctor 的挂载的本地服务会卡住 MCP Client 的对话进程。
    • 如果 Rsdoctor MCP server 使用了 --port 参数,请确保 Rsdoctor 的启动端口配置正确。
    • 检查 Rsdoctor 插件版本是否符合要求。版本要求