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

相关推荐
于慨20 小时前
Lambda 表达式、方法引用(Method Reference)语法
java·前端·servlet
石小石Orz20 小时前
油猴脚本实现生产环境加载本地qiankun子应用
前端·架构
从前慢丶20 小时前
前端交互规范(Web 端)
前端
逛逛GitHub20 小时前
面壁智能开源了支持音色设计、克隆、30语言+9 种方言的语音大模型
github
@yanyu66620 小时前
07-引入element布局及spring boot完善后端
javascript·vue.js·spring boot
CHU72903521 小时前
便捷约玩,沉浸推理:线上剧本杀APP功能版块设计详解
前端·小程序
GISer_Jing21 小时前
Page-agent MCP结构
前端·人工智能
王霸天21 小时前
💥别再抄网上的Scale缩放代码了!50行源码教你写一个永不翻车的大屏适配
前端·vue.js·数据可视化
小领航21 小时前
用 Three.js + Vue 3 打造炫酷的 3D 行政地图可视化组件
前端·github
李同学Lino21 小时前
别再让Agent瞎写屎山代码了!带你用Superpowers重塑Vibe Coding体验(附保姆级教程)
github