# @fluidframework/bundle-size-tools 中文文档

规范地址：https://npmcn.com/package/%40fluidframework/bundle-size-tools/

版本：0\.65\.0
npm 元数据更新时间：2026-07-29T21:13:56.576Z
中文译文更新时间：2026-11-15T02:15:59.028Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40fluidframework/bundle-size-tools
原文对照：https://npmcn.com/package/%40fluidframework/bundle-size-tools/?lang=original
项目主页：https://fluidframework.com/
源码仓库：https://github.com/microsoft/FluidFramework

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：230 kB，136 个文件
- 模块格式：CommonJS
- TypeScript 类型：包内自带
- 运行依赖：6 个
- 首次发布：2020-09-25T20:56:11.865Z
- 最新版本发布：2026-04-20T19:39:11.595Z
- 近 30 天下载量：6143（2026-10-15 至 2026-11-13，npm 官方下载统计）
- 已发布版本数：174（近 12 个月 5 个）

## 中文简介

分析捆绑大小回归的工具

## 安装

```sh
npm install @fluidframework/bundle-size-tools
```

也可以使用：`pnpm add @fluidframework/bundle-size-tools`、`yarn add @fluidframework/bundle-size-tools`、`bun add @fluidframework/bundle-size-tools`

## README

# @fluidframework/ bundle- small-tools (英语)

此软件包包含用于分析捆绑大小的功能,以帮助在拉取请求时捕获代码大小回归. 这个图书馆本意是完全可以扩展,以满足任何寄存器的独特需要,但目前只在几个寄存器中使用,因此可能需要做更多的工作来使图书馆对其它寄存器更加有用.

## 捆绑大小工具的特性

-   精确的比较, 使您能够确切地看到一个 PR 在相关的捆绑中添加了多少字节
-   与 Azure 调试工作流程整合的 API
-   对调用捆绑大小回归的拉动请求撰写注释的能力
-   扩展点, 使团队可以编写自定义的捆绑报告
-   支持使用多个有趣的捆绑构建许多软件包的单重机
-   在捆绑的网络包配置中定义自定义捆绑度量标准的能力

## 限制

-   Bundle-size-tools目前只拥有用于与Azure DevOps合作的API. 还需要做更多的工作来支持GitHub等源控提供者. 其他工具可以与捆绑大小工具结合使用,以支持混合环境.
-   Bundle-small-tool被设计为与webpack一起工作;其他捆绑器不支持.

# Bundle 大小工具如何工作

本节重点介绍捆绑大小工具制作并定义了上新寄存器所需的部件的一些假设.

## Webpack 统计文件

套装大小工具的使用 [webpack 统计文件](https://webpack.js.org/configuration/stats/) 作为捆绑比较的基础。 要使用捆绑大小的工具,您的构建管道预计将生成webpack stats文件. 由于Webpack统计文件往往很大,我们建议使用 [@mixer/webpack-bundle-compare (中文(简体) )](https://github.com/mixer/webpack-bundle-compare) webpack插件以 gzipped mspack 格式生成插件,以减少磁盘上的数据文件大小.

我们建议的方法是将此添加到您的 Webpack 配置中产生应用程序捆绑的插件部分:

```javascript
new BundleComparisonPlugin({
    // File to create, relative to the webpack build output path:
    file: resolve(process.cwd(), "bundleAnalysis/bundleStats.msp.gz"),
});
```

## 基线建设

为了为捆绑大小回归提供准确的度量标准,Bundle-size-tool必须有一个基准来比较. 例如,在提交拉力请求时,捆绑大小工具只应报告与当前拉力请求直接相关的捆绑大小变化. 如果拉动请求是针对寄存器主分支的,我们会认为基线是PR分支的主要承诺基础. 要使用捆绑大小工具,您需要一种机制来获取基线构建的webpack stats文件,例如使用自动构建为主的每个承诺生成webpack stats文件,或者提供从不同的承诺中找到匹配的stats文件的方法.

## 套装比较

套装大小工具的比较使用 `WebpackStatsProcessors`,这些功能的签名如下:

```typescript
export type WebpackStatsProcessor = (
    stats: Webpack.StatsCompilation,
    config: BundleBuddyConfig | undefined,
) => BundleMetricSet | undefined;
```

A 类 `WebpackStatsProcessor` 作为输入和输出a `BundleMetricSet`从本质上讲, `WebpackStatsProcessors` 在复杂的统计对象中,输入一个简单的指标列表。 也有人支持以捆绑方式通过 `BundleBuddyConfig` 用于分析捆绑中的特定块。 这个 `BundleBuddyConfig` 在捆绑的网页包配置中使用 `BundleBuddyConfigWebpackPlugin`。 。 。 .

```typescript
export type BundleMetricSet = Map<string, BundleMetric>;

export interface BundleMetric {
    parsedSize: number;
}
```

捆绑大小工具的消费者必须配置一个或多个工具 `WebpackStatsProcessors` 他们的项目。 也可以写和使用自定义 `WebpackStatsProcessors`。 。 。 .

套装大小工具运行相同的一组 `WebpackStatsProcessors` 基线承诺和拉动请求承诺。 然后,它将基准承诺和拉动请求生成的衡量标准进行比较,并在拉动请求的注释中报告这些差异.

### 默认 Stats 处理器

Bundle-大小工具提供以下一套基本工具: `WebpackStatsProcessors`数字 :

-   `entryStatsProcessor` - 报告每个网包产生的块大小 [切入点](https://webpack.js.org/concepts/entry-points/) 在网络包配置中指定
-   `totalSizeProcessor` - 报告网包中所有块的总大小.
-   `bundleBuddyConfigProcessor` - 能够分析特定捆绑的一组块。 预计 `BundleBuddyConfig` 将通过 `BundleBuddyConfigWebpackPlugin` 在捆绑的网络包配置中

# 工作流程样本

这是工作流程 `fluidframework` bundle buddy 的仓库用途 .

假设

-   生产一个或多个软件包的 Monorepo.
-   寄存器中的软件包只产生一个捆绑,由捆绑大小的工具来分析.
-   CI在Azure DevOps建造跑道并储存文物.

## 组件全部生成压缩数据文件

存储器中的每个捆绑都配置有 [@mixer/webpack-bundle-compare (中文(简体) )](https://github.com/mixer/webpack-bundle-compare) 生成一个命名为 stats 文件的 webpack 插件 `bundleStats.msp.gz` 在一个 `bundleAnalysis` 文件夹位于每个软件包的根。 比如说我们的仓库有软件包 `package1`, (中文(简体) ), `package2`,以及 `package3` 全部在a之下 `packages` 文件夹,我们的构建进程将生成 下列文件:

-   `packages/package1/bundleAnalysis/bundle1/bundleStats.msp.gz`
-   `packages/package1/bundleAnalysis/bundle2/bundleStats.msp.gz`
-   `packages/package2/bundleAnalysis/bundleStats.msp.gz`
-   `packages/package3/bundleAnalysis/bundleStats.msp.gz`

## 主 CI 生成基线数据文件

有一个连续的集成构件,它运行在对主的每个承诺上,生成捆绑的数据文件. 重要的是,这种共同责任定义没有: [批次](https://docs.microsoft.com/en-us/azure/devops/pipelines/yaml-schema?view=azure-devops&tabs=schema%2Cparameter-schema) 选项设定,它应该为每项主要承诺运行,以确保我们对每项主要承诺有准确的基线。 同样重要的是,要确保作为基线使用的统计数据文件是使用网络软件包运行生成的 [模式](https://webpack.js.org/configuration/mode/) 设置为 `production` 没有 `development` 以获得我们用户下载内容的最好表述.

构建进程然后运行一个脚本,将寄存器中所有捆绑的 stats 文件复制成单张 `bundleAnalysis` 临时目录中的文件夹.

-   `/bundleAnalysis/package1/bundle1/bundleStats.msp.gz`
-   `/bundleAnalysis/package1/bundle2/bundleStats.msp.gz`
-   `/bundleAnalysis/package2/bundleStats.msp.gz`
-   `/bundleAnalysis/package3/bundleStats.msp.gz`

构建过程然后上传此文件夹为 Azure DevOps 构建文物名称 `bundle-analysis-reports`。 。 。 .

## Pull Request Buddy Builds 生成比较数据文件

每个拉拉请求运行的好友构建,运行的过程与主构建相同,以生成 `bundleAnalysis` 文件夹和 `bundle-analysis-reports` 建造文物.

哥们的建筑将决定 主要的承諾是 公關被分離出道出道出道出道出道出道出道出道出道出道出道出道出道出道出道出道出道出道出道出道出道出道出道出道出道出道出道出道出道出道出道出道出道出道出道出道出道出道出道出道出道出道出道出道出道出道出道出道出道出道出道出道出道出道出道出道出道出道出道出道出道出道出道出道出道出道出道出道出道出道来. 如果主 CI 构建已创建 `bundle-analysis-reports` 艺术品,拉拉请求的好友会运行捆绑好哥们,并在拉拉请求中报告结果作为评论.

如果没有用于基线承诺的文物,兄弟会建筑会增加一个带有格式的Azure Devops建筑标记 `bundle-size-tools-pending-<commitHash>` 这样,当基线文物准备好时,一个后期过程可以将捆绑分析注释添加到这个PR中.

## 构建运行主 CI 完成以更新在基线统计之前的拉动请求

在每次成功建造主干线之后,有一个单独的建设管道,用于寻找所有搭建的好友 `bundle-size-tools-pending-<commitHash>` 对应 `<commitHash>` 在主楼。 这个构建过程将会在所有这些公关上运行捆绑大小的工具并发布评论.

## 考虑的组合度量衡

仓库配置用于运行 `entryStatsProcessor` 财务报告和审定财务报表 `totalSizeProcessor` 对所有捆绑, 表示捆绑伙伴将报告总捆绑大小( 所有块的和) 和每个条目块的大小 .

该寄存器还有几包,我们希望分析动态导入背后的一些关键情景的大小,即它们不是入门块. 这能带动 `bundleBuddyConfigProcessor`,它使用配置文件指定要分析的块名称。 这些配置文件使用 `BundleBuddyConfigWebpackPlugin` 而这些配置文件则与 `bundleStats.msp.gz` 文档中 `bundle-analysis-reports` 艺术品.

## 常见问题

### @fluidframework/bundle-size-tools 是什么？

分析捆绑大小回归的工具

### 如何安装 @fluidframework/bundle-size-tools？

在项目目录运行 npm install @fluidframework/bundle-size-tools，或使用 pnpm add / yarn add / bun add。

### @fluidframework/bundle-size-tools 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @fluidframework/bundle-size-tools 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @fluidframework/bundle-size-tools 可以商用吗？

@fluidframework/bundle-size-tools 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @fluidframework/bundle-size-tools 的下载量有多少？

根据 npm 官方下载统计，@fluidframework/bundle-size-tools 在 2026/10/15 – 2026/11/13 这 30 天内被下载 6,143 次，日均约 205 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @fluidframework/bundle-size-tools 还在维护吗？

最新版本 0\.65\.0 发布于 2026/04/21（6 个月前）；至今共发布 174 个版本，其中过去 12 个月发布了 5 个；首次发布于 2020/09/26。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。