@fluidframework/ bundle- small-tools (英语)
此软件包包含用于分析捆绑大小的功能,以帮助在拉取请求时捕获代码大小回归. 这个图书馆本意是完全可以扩展,以满足任何寄存器的独特需要,但目前只在几个寄存器中使用,因此可能需要做更多的工作来使图书馆对其它寄存器更加有用.
捆绑大小工具的特性
- 精确的比较, 使您能够确切地看到一个 PR 在相关的捆绑中添加了多少字节
- 与 Azure 调试工作流程整合的 API
- 对调用捆绑大小回归的拉动请求撰写注释的能力
- 扩展点, 使团队可以编写自定义的捆绑报告
- 支持使用多个有趣的捆绑构建许多软件包的单重机
- 在捆绑的网络包配置中定义自定义捆绑度量标准的能力
限制
- Bundle-size-tools目前只拥有用于与Azure DevOps合作的API. 还需要做更多的工作来支持GitHub等源控提供者. 其他工具可以与捆绑大小工具结合使用,以支持混合环境.
- Bundle-small-tool被设计为与webpack一起工作;其他捆绑器不支持.
Bundle 大小工具如何工作
本节重点介绍捆绑大小工具制作并定义了上新寄存器所需的部件的一些假设.
Webpack 统计文件
套装大小工具的使用 webpack 统计文件 作为捆绑比较的基础。 要使用捆绑大小的工具,您的构建管道预计将生成webpack stats文件. 由于Webpack统计文件往往很大,我们建议使用 @mixer/webpack-bundle-compare (中文(简体) ) webpack插件以 gzipped mspack 格式生成插件,以减少磁盘上的数据文件大小.
我们建议的方法是将此添加到您的 Webpack 配置中产生应用程序捆绑的插件部分:
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,这些功能的签名如下:
export type WebpackStatsProcessor = (
stats: Webpack.StatsCompilation,
config: BundleBuddyConfig | undefined,
) => BundleMetricSet | undefined;
A 类 WebpackStatsProcessor 作为输入和输出a BundleMetricSet从本质上讲, WebpackStatsProcessors 在复杂的统计对象中,输入一个简单的指标列表。 也有人支持以捆绑方式通过 BundleBuddyConfig 用于分析捆绑中的特定块。 这个 BundleBuddyConfig 在捆绑的网页包配置中使用 BundleBuddyConfigWebpackPlugin。 。 。 .
export type BundleMetricSet = Map<string, BundleMetric>;
export interface BundleMetric {
parsedSize: number;
}
捆绑大小工具的消费者必须配置一个或多个工具 WebpackStatsProcessors 他们的项目。 也可以写和使用自定义 WebpackStatsProcessors。 。 。 .
套装大小工具运行相同的一组 WebpackStatsProcessors 基线承诺和拉动请求承诺。 然后,它将基准承诺和拉动请求生成的衡量标准进行比较,并在拉动请求的注释中报告这些差异.
默认 Stats 处理器
Bundle-大小工具提供以下一套基本工具: WebpackStatsProcessors数字 :
entryStatsProcessor- 报告每个网包产生的块大小 切入点 在网络包配置中指定totalSizeProcessor- 报告网包中所有块的总大小.bundleBuddyConfigProcessor- 能够分析特定捆绑的一组块。 预计BundleBuddyConfig将通过BundleBuddyConfigWebpackPlugin在捆绑的网络包配置中
工作流程样本
这是工作流程 fluidframework bundle buddy 的仓库用途 .
假设
- 生产一个或多个软件包的 Monorepo.
- 寄存器中的软件包只产生一个捆绑,由捆绑大小的工具来分析.
- CI在Azure DevOps建造跑道并储存文物.
组件全部生成压缩数据文件
存储器中的每个捆绑都配置有 @mixer/webpack-bundle-compare (中文(简体) ) 生成一个命名为 stats 文件的 webpack 插件 bundleStats.msp.gz 在一个 bundleAnalysis 文件夹位于每个软件包的根。 比如说我们的仓库有软件包 package1, (中文(简体) ), package2,以及 package3 全部在a之下 packages 文件夹,我们的构建进程将生成
下列文件:
packages/package1/bundleAnalysis/bundle1/bundleStats.msp.gzpackages/package1/bundleAnalysis/bundle2/bundleStats.msp.gzpackages/package2/bundleAnalysis/bundleStats.msp.gzpackages/package3/bundleAnalysis/bundleStats.msp.gz
主 CI 生成基线数据文件
有一个连续的集成构件,它运行在对主的每个承诺上,生成捆绑的数据文件. 重要的是,这种共同责任定义没有: 批次 选项设定,它应该为每项主要承诺运行,以确保我们对每项主要承诺有准确的基线。 同样重要的是,要确保作为基线使用的统计数据文件是使用网络软件包运行生成的 模式 设置为 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 艺术品.