Rsdoctor 1.2 发布:打包产物体积一目了然

本文作者为 Rstack 团队 - easy1090

Rsdoctor 1.2 版本已经发布啦 🎉

新版本主要包含以下特性:

  • 深入 concatenate module 分析:新增对 concatenate module(聚合模块)体积的分析能力,帮助开发者更精确地识别 Tree Shaking 后的实际打包体积。
  • Bundle 体积分析支持 Gzip:Bundle 体积分析新增对 gzip 压缩体积的展示,让开发者能方便了解产物上线后的真实体积表现。
  • Treemap 可视化增强:新增并优化了 Treemap(矩形树图)功能,帮助开发者以更直观方式洞察 bundle 组成和资源分布。
  • Rsdoctor MCP Rsdoctor MCP 是一个借助 LLM 的构建分析工具,通过问答形式帮助开发者快速获取构建分析结果。

深入 concatenate module 分析

在 Rspack 构建过程中,某些 Modules 会被提升或聚合到一个闭包中,从而合成一个 concatenated module,用来提升浏览器中的执行效率以及减少产物体积。此前,Rsdoctor 无法进一步分解和分析这些 Concatenated Module 的内部结构,因为它们无法通过 AST 继续拆解。

Rsdoctor v1.2 新增了对 concatenated module 的分析能力,帮助开发者准确获知 Tree Shaking 及压缩后的子 Modules(被聚合的 Modules)的实际构建体积,便于分析 Concatenated Module 对最终 bundle 大小的影响以及优化分包策略。

此外,Rspack(>=1.4.11) 内部的 Rsdoctor 插件也增强了 source map 相关能力,可以在不开启 source map 的情况下,可无痛分析 concatenate module。然而,Webpack 项目中则要开启 source map。

Treemap 可视化增强

此前,Rsdoctor 的 Treemap 视图基于 webpack-bundle-analyzer 实现,这导致 Rsdoctor 完成分析后还需要再次经过 webpack-bundle-analyzer 的处理流程,降低了整体分析效率。同时,Treemap 页面加载速度较慢,而 Treemap 恰恰是开发者进行包分析时最常用的可视化视图。

Rsdoctor v1.2 新增了 Treemap 视图,是一种经典的构建产物分析视图,能帮助开发者更直观地可视化并分析 bundle 的构成,以及资源(Assets)和模块(Modules)的占比。同时也可以搜索模块资源,点击模块资源,可以放大到该模块区域。

使用指南

支持 Gzip Size

为了更真实地反映生产环境的体积表现,Rsdoctor 新增了对 gzip 压缩体积的分析支持,可在 Bundle Size 页面和 TreeMap 页面查看到,如下图:

可以看到原始体积和 gzip 压缩后的体积对比,同时为生产环境优化提供更准确的参考数据。

Rsdoctor MCP

Rsdoctor 分析数据非常丰富,但开发者需要花费时间进行页面交互和学习成本进行构建分析及优化,所以希望能够借助 LLM 来做更智能的构建分析。帮助用户更快速地获取分析结果。

Rsdoctor v1.1 引入了 MCP 支持,它基于 Model Context Protocol (MCP) 协议,将 Rsdoctor 的分析能力与 LLM 的智能理解能力相结合。通过自然语言问答的形式,开发者可以快速获取构建分析结果,无需深入理解复杂的分析界面和数据结构。

Rsdoctor MCP 支持自然语言问答,你可以直接问"哪些包体积最大?"、"为什么这个模块没有被 Tree Shaking?"等问题,系统会智能分析并给出优化建议,帮助你快速定位和解决构建问题。主要功能包括获取产物信息、依赖分析、优化建议、编译性能及 tree shaking 分析等核心分析能力。


除此之外,1.1-1.2 期间还包括其他能力变动。完整更新内容请参考:Release 页面

相关推荐
ℋᙚᵐⁱᒻᵉ鲸落5 小时前
移动端滑动手势冲突:overflow: auto导致外层横向滑动失效
前端·javascript·css·vue.js·html
默_笙6 小时前
🎃 前端学了 Next.js,后端该学啥?NestJS 就是 Node 版的蜜雪冰城
前端·javascript
前端snow7 小时前
ai agent --- 实现 openclaw 定时间效果
前端
码云之上7 小时前
换模型之后,Chatbot 为什么要自己做 compact?
前端·agent·前端工程化
এ慕ོ冬℘゜7 小时前
navigator 导航对象 BOM制作方法
javascript
星栈7 小时前
自定义 UI-UX-Pro-Max 的 CSV 知识库,把 AI 生成的后台拉回行业该有的样子
前端·agent·weui
研☆香8 小时前
简单的图片上传 删除 预览
前端
ITresearchGuest8 小时前
我用 AI 一小时写了一个世界杯数据可视化平台|前端 VibeCoding 初体验
前端·人工智能·信息可视化
慧一居士9 小时前
Vite项目中使用Less步骤,详细使用示例
前端·css
花间相见9 小时前
【LangChain组件03】—— LangChain Agents 执行与状态:工作流程与状态管理实战
java·前端·langchain