无需登录 数据私有 本地保存

Service Worker 缓存内容预览器 - 查看离线资源列表

PWA 开发工具 Service Worker 缓存 预览
29
0
0
0
教程概述

本教程将手把手教你使用组件体积分析器来分析前端项目的依赖关系和体积分布。通过七个步骤的操作指导，帮助你掌握组件体积分析和优化的完整流程。

第一步：选择分析模式和加载数据

打开工具后，首先在数据输入区域选择分析模式。对于初次使用的用户，建议从预设的示例数据开始体验。工具提供了 React 示例项目和 Vue 示例项目两种预设数据，涵盖了常见的依赖场景。选择一个示例数据并点击"加载数据"按钮，工具会自动解析依赖关系并生成分析结果。

如果你有自己的项目数据，可以选择"手动输入"模式。在输入框中按照指定格式输入组件的依赖关系，格式为：组件名 -> 依赖库名（体积，单位 KB）。例如："App -> React(42)" 表示 App 组件依赖 React 库，React 的体积为 42KB。也可以选择"JSON 导入"模式，直接粘贴从其他分析工具导出的 JSON 数据。

数据格式示例： 
App -> React(42) | Router(8) | HomePage(15)
HomePage -> ProductList(20) | ProductItem(5)
ProductList -> lodash(72) | axios(13)
ProductItem -> moment(300)
第二步：查看依赖树总览

数据加载完成后，切换到"依赖树"标签页查看组件的完整依赖关系。依赖树以层级结构展示，根节点是应用的入口组件，子节点是它直接依赖的组件和库，以此层层展开。每个节点上显示组件名称和体积信息。节点越大表示体积越大，帮助你快速识别体积贡献最大的组件。

点击任意节点可以展开或折叠其子依赖。在折叠状态下，节点上会显示子依赖的数量和总体积。点击节点右侧的详情按钮可以查看该组件的详细信息，包括自身体积、累计体积、体积占比、依赖列表等。通过浏览依赖树，你可以了解项目中各个组件之间的引用关系和体积分布情况。

第三步：分析体积占比

切换到"体积分析"标签页，查看各组件的体积占比分析。顶部的饼图展示了顶层组件的体积比例，体积最大的组件会突出显示。下方的堆叠条形图展示了每个组件的体积构成：蓝色部分是组件自身代码的体积，橙色部分是引入的第三方库的体积。通过堆叠条形图，你可以清楚地区分哪些组件是自身代码量大，哪些组件是因为引入了大型第三方库。

在体积分析页面的右侧，展示了按体积从大到小排列的 TOP 10 组件列表。这个列表是体积优化的首要目标。通常，排名前 5 的组件可能占据了总体积的 60% 以上。优先优化这些组件可以获得最大的体积收益。点击列表中的任意组件，左侧的图表会高亮显示该组件的体积信息，帮助你深入分析其体积构成。

第四步：查看详细数据表格

切换到"数据表格"标签页，查看所有组件的详细数据。表格包含以下列：组件名称、类型（第三方库/项目组件）、版本号、自身体积、累计体积、体积占比、子依赖数量和依赖深度。点击任意列标题可以按该列排序。例如，按"累计体积"降序排列可以看到对总体积影响最大的组件；按"子依赖数量"降序排列可以看到间接引入最多依赖的组件。

使用搜索框可以快速查找特定的组件。例如，搜索"moment"可以找到所有与 moment.js 相关的依赖。使用筛选下拉框可以按组件类型过滤，只查看第三方库或只查看项目内部组件。表格中的数据可以导出为 CSV 格式，在 Excel 中进一步分析和制作报告。

第五步：获取优化建议

切换到"优化建议"标签页，查看工具根据分析结果自动生成的优化方案。每条建议包含：问题描述（指出具体的优化点）、影响评估（预估优化后的体积节省量）和具体方案（给出可执行的优化步骤）。建议按优先级排序，体积影响最大的优化排在最前面。

常见的优化建议包括：（1）替换体积过大的库，如用 dayjs 替代 moment.js 节省约 290KB；（2）开启组件库的按需导入，如 Ant Design 的按需导入可以节省约 60% 的体积；（3）消除重复依赖，如多个库间接引入了不同版本的 lodash，可以统一版本避免重复；（4）使用动态导入实现代码分割，将非首屏的组件延迟加载。根据建议逐一实施优化，可以显著降低项目的打包体积。

第六步：模拟优化效果

在优化建议页面中，每条建议旁边都有一个"模拟优化"按钮。点击后，工具会在内存中模拟实施该优化后的效果，更新依赖树和体积分析数据。你可以看到优化前后的体积对比，包括节省的体积和百分比。可以连续模拟多条优化建议，查看累计的优化效果。

模拟优化功能帮助你在实际修改代码之前评估优化的收益和可行性。如果某条优化建议的体积节省量很小但实施成本很高，可以通过模拟结果来判断是否值得执行。如果某条优化的体积节省量很大，可以立即着手实施。模拟优化是制定优化策略的重要工具，帮助你把有限的精力投入到收益最大的优化点上。

第七步：导出分析报告

完成分析后，点击"导出报告"按钮可以将分析结果保存为多种格式。JSON 格式的报告包含完整的结构化数据，适合在 CI/CD 流程中自动化处理或存档。Markdown 格式的报告具有良好的可读性，适合粘贴到项目文档或技术博客中。HTML 格式的报告包含交互式图表，可以在浏览器中打开并交互操作。

导出的报告可以作为项目性能优化文档的组成部分，记录每次分析的时间、数据和优化建议。在团队协作中，分析报告可以帮助其他开发者快速了解项目的体积状况和优化方向。定期导出和保存分析报告，可以追踪项目体积的变化趋势，及时发现异常增长。通过持续的分析和优化，你可以将项目的打包体积控制在合理的范围内，为用户提供更好的访问体验。

🔧 相关工具