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

相关推荐
threelab12 小时前
Three.js 数学函数着色器 | 三维可视化 / AI 提示词
javascript·人工智能·着色器
卷帘依旧12 小时前
React Hook采用环形链表的原因
前端
lichenyang45312 小时前
从 HarmonyOS AI 聊天模块理解工程化架构:MVVM、Controller、Provider、请求封装与 SSE
前端
卷帘依旧12 小时前
为什么React Hooks不能用在if/for等条件/循环语句中
前端
ZC跨境爬虫13 小时前
跟着 MDN 学CSS day_3:(为一个传记页面添加样式)
前端·javascript·css·ui·音视频·html5
夜雪闻竹13 小时前
sql.js WASM 实战:浏览器里跑 SQLite
javascript·sql·wasm
从文处安13 小时前
「前端何去何从」混乱到有序的状态管理: Reducer 与 Context
前端·react.js
爱喝铁观音的谷力景辉13 小时前
在Cesium中实现带箭头方向路线样式的技术详解
javascript·cesium
Qhappy13 小时前
AI逆向实战:从零还原某航空App的AES加密
javascript·后端
名字都不重要何况昵称13 小时前
Color Pick 2D(多 Canvas 像素拾取)
前端·canvas