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 页面

相关推荐
程序员爱钓鱼1 小时前
Go操作Excel实战详解:github.com/xuri/excelize/v2
前端·后端·go
子兮曰10 小时前
async/await高级模式:async迭代器、错误边界与并发控制
前端·javascript·github
恋猫de小郭10 小时前
2026 Flutter VS React Native ,同时在 AI 时代 VS Native 开发,你没见过的版本
android·前端·flutter
GIS之路12 小时前
ArcGIS Pro 中的 Notebooks 入门
前端
IT_陈寒13 小时前
React状态管理终极对决:Redux vs Context API谁更胜一筹?
前端·人工智能·后端
Kagol14 小时前
TinyVue 支持 Skills 啦!现在你可以让 AI 使用 TinyVue 组件搭建项目
前端·agent·ai编程
柳杉14 小时前
从零打造 AI 全球趋势监测大屏
前端·javascript·aigc
simple_lau14 小时前
Cursor配置MasterGo MCP:一键读取设计稿生成高还原度前端代码
前端·javascript·vue.js
睡不着先生14 小时前
如何设计一个真正可扩展的表单生成器?
前端·javascript·vue.js
天蓝色的鱼鱼14 小时前
模块化与组件化:90%的前端开发者都没搞懂的本质区别
前端·架构·代码规范