🚀🚀🚀 Webpack 项目也可以引入大模型问答了!感谢 Rsdoctor 1.2 !

前言

今天发现 Rsdoctor 发布了 1.2 版本预览版本,带来很多功能外还支持 Webapck,所以我们今天来看看更新哪些内容吧!

往期精彩推荐

正文

本次更新通过深入的拼接模块分析、Gzip 压缩大小支持和优化的 Treemap 可视化,帮助开发者更准确地了解构建产物,优化代码分割策略。此外,Rsdoctor MCP 引入了基于 LLM 的智能 Q&A 功能,

以下是 Rsdoctor 1.2 的核心更新和功能的详细介绍。

1. 深入的拼接模块分析

在 Rspack 构建过程中,部分模块会被提升或聚合为单一闭包,形成拼接模块(concatenated modules),以提高浏览器执行效率并减小产物体积。然而,此前 Rsdoctor 无法深入分析这些模块的内部结构,因为它们无法通过 AST 解析进一步拆分。

Rsdoctor 1.2 新增了对拼接模块大小的分析功能,开发者可以:

  • 精准分析子模块:了解 tree shaking 和压缩后子模块的真实构建大小。
  • 优化代码分割:通过分析拼接模块对最终 bundle 大小的影响,优化分包策略。

对于 Rspack (>=1.4.11) 项目,Rsdoctor 插件增强了 source map 能力,无需显式启用即可分析拼接模块。Webpack 项目则仍需启用 source map。

示例

javascript 复制代码
// rspack.config.js
const { RsdoctorRspackPlugin } = require('@rsdoctor/rspack-plugin');

module.exports = {
  plugins: [
    process.env.RSDOCTOR && new RsdoctorRspackPlugin({
      // 启用拼接模块分析
    }),
  ].filter(Boolean),
};

2. Gzip 压缩大小支持

为了更准确地反映生产环境的资源体积,Rsdoctor 1.2 新增了 Gzip 压缩大小分析功能。开发者可以在 Bundle Size 页面和 Treemap 页面查看:

  • 原始大小与 Gzip 压缩大小的对比。
  • 更精确的生产环境优化数据。

3. 优化的 Treemap 可视化

Treemap 是开发者分析 bundle 组成的核心工具,但此前 Rsdoctor 的 Treemap 视图基于 webpack-bundle-analyzer,分析效率较低,页面加载速度慢。

Rsdoctor 1.2 推出了全新的经典 Treemap 视图,带来以下改进:

  • 更快的加载速度:无需重复处理分析数据,提升整体效率。
  • 直观的可视化:更清晰地展示 bundle 组成、资源和模块比例。
  • 交互性增强:支持模块资源搜索和点击放大,方便定位特定模块。

开发者可以通过 Treemap 视图快速识别资源分布,优化项目结构。

4. Rsdoctor MCP:智能 Q&A 分析

Rsdoctor 1.2 延续了 1.1 版本引入的 MCP(Model Context Protocol)支持,通过 LLM 提供智能化的构建分析。开发者可以通过自然语言提问快速获取分析结果,例如:

  • "哪些包的体积最大?"
  • "为什么这个模块没有被 tree-shaken?"

Rsdoctor MCP 结合了 Rsdoctor 的分析能力和 LLM 的智能理解,支持以下核心功能:

  • 产物信息查询
  • 依赖关系分析
  • 优化建议生成
  • 编译性能分析
  • Tree shaking 分析

使用 Rsdoctor

bash 复制代码
npm install @rsdoctor/rspack-plugin@1.2 -D

rspack.config.jswebpack.config.js 中注册 Rsdoctor 插件:

javascript 复制代码
const { RsdoctorRspackPlugin } = require('@rsdoctor/rspack-plugin');

module.exports = {
  plugins: [
    process.env.RSDOCTOR && new RsdoctorRspackPlugin({
      // 插件配置
    }),
  ].filter(Boolean),
};

运行构建命令

bash 复制代码
RSDOCTOR=true npm run build

最后

今天的分享就这些了,感谢大家的阅读!如果文章中存在错误的地方欢迎指正!

往期精彩推荐

相关推荐
web打印社区10 小时前
使用React如何静默打印页面:完整的前端打印解决方案
前端·javascript·vue.js·react.js·pdf·1024程序员节
喜欢踢足球的老罗10 小时前
[特殊字符] PM2 入门实战:从 0 到线上托管 React SPA
前端·react.js·前端框架
小光学长11 小时前
基于Vue的课程达成度分析系统t84pzgwk(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
前端·数据库·vue.js
Baklib梅梅12 小时前
探码科技再获“专精特新”认定:Baklib引领AI内容管理新方向
前端·ruby on rails·前端框架·ruby
南方以南_12 小时前
Chrome开发者工具
前端·chrome
YiHanXii12 小时前
this 输出题
前端·javascript·1024程序员节
楊无好12 小时前
React中ref
前端·react.js
维他命Coco12 小时前
js常见开发学习
javascript
程琬清君12 小时前
vue3 confirm倒计时
前端·1024程序员节
歪歪10012 小时前
在C#中详细介绍一下Visual Studio中如何使用数据可视化工具
开发语言·前端·c#·visual studio code·visual studio·1024程序员节