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

相关推荐
一叶飘零晋11 小时前
【(一)Electron 使用之如何用vite+vue3搭建初始框架】
前端·javascript·electron
光影少年11 小时前
前端SSR和ssg区别
前端·vue.js·人工智能·学习·react.js
广州华水科技11 小时前
北斗形变监测传感器在水库安全监测中的应用与发展
前端
你知道“铁甲小宝”吗丶11 小时前
git推送到多平台(gitee/github)
git·gitee·github
凯瑟琳.奥古斯特11 小时前
Bootstrap快速上手指南
开发语言·前端·css·bootstrap·html
茫忙然12 小时前
【简】Obsidian + GitHub + Quartz 个人博客 简单搭建 教程
github
精益数智工坊12 小时前
拆解制造业仓库物料管理流程:如何通过标准化仓库物料管理流程解决账实不符难题
大数据·前端·数据库·人工智能·精益工程
恶猫12 小时前
网页自动化模拟操作时,模拟真实按键触发事件【终级方案】
前端·javascript·自动化·vue·网页模拟
小羊Yveesss12 小时前
2026年前端开发新趋势:智能协同、工具革新与场景深耕
前端·ai
Dxy123931021612 小时前
HTML中的Canvas可以干哪些事情
前端·html