trpc 脚本中 rollup-plugin-analyzer 的使用

在上一篇文章中，我们提供了analyzeSizeChange.ts文件中函数的示意图，在本文中，我们来看看如何分析实际的大小变化。

import analyze from 'rollup-plugin-analyzer';
export default function analyzeSizeChange(packageDir: string) {
 let analyzePluginIterations = 0;
 return analyze({
   summaryOnly: process.env.CI ? undefined : true,
   skipFormatted: process.env.CI ? true : undefined,
   onAnalysis: (analysis) => {
   },
 });
}

analyze 是从 rollup-plugin-analyzer 导入的。它有一个对象作为带有选项的参数：

1. summaryOnly — 仅输出包摘要和模块使用情况条形图

2. skipFormatted — 不输出格式化字符串

3. onAnalysis — 使用分析对象调用的回调（我从 npm 复制了 onAnalysis 的以下描述:)

函数将被调用：

- 分析对象（对象）

- bundleSize (Number) — 渲染的包大小（以字节为单位）

- bundleOrigSize (Number) — 原始包大小（以字节为单位）

- bundleReduction (Number) — 渲染包大小减少的百分比

- moduleCount (Number) — 所有包含的模块的计数

- module (Array) — 模块分析对象数组

- 模块（对象）

- id (String) — 模块路径/汇总模块 id

- size (Number) — 渲染模块代码的大小（以字节为单位）

- origSize (Number) — 模块原始代码的大小（以字节为单位）

- dependents (Array) — 依赖模块 ID/路径列表

- 百分比（数字）— 模块大小相对于整个包的百分比

- 减少（数字）- 渲染大小减少的百分比

- renderExports (Array) — 使用的命名导出列表

-removedExports (Array) — 未使用的命名导出列表

让我们看看有多少个选项在analyzeSizeChange 文件中实际使用。

- 捆绑包大小

- 模块

就是在analyzeSizeChange.ts中发现使用了这些

但是这个脚本是在什么情况下执行的呢？是在你签入一些代码之后吗？它报告拉取请求吗？为了找到答案，我们需要去代码带我们去的地方。

您必须首先搜索analyzeSizeChange以查看它的用途。发现在script/getRollupConfig.ts

中使用

接下来，您必须找出 getRollupConfig 的用途。它被用在很多包中。

但是我选择了packages/client/rollup.config.ts，这个rollup配置在构建脚本中使用。

"scripts": {
 "build": "rollup - config rollup.config.ts - configPlugin rollup-plugin-swc3",

所以答案是，当您在 tRPC 源代码中构建包时，包的大小将会发生变化。

关于我们：

在 Thinkthroo，我们研究大型开源项目并提供架构指南。我们开发了使用 tailwind 构建的 resubale 组件，您可以在您的项目中使用它们。我们提供 Next.js、React 和 Node 开发服务。

与我们预约会面讨论您的项目。

参考资料：

1. https://github.com/trpc/trpc/blob/next/scripts/analyzeSizeChange.ts

2. https://github.com/search?q=repo:trpc/trpc getRollupConfig&type=code

3. https://github.com/trpc/trpc/blob/3388c9691d122b9d4047b2de0caedcdf611354ab/packages/client/rollup.config.ts#L3

4. https://github.com/trpc/trpc/blob/3388c9691d122b9d4047b2de0caedcdf611354ab/scripts/getRollupConfig.ts#L9

5. https://www.npmjs.com/package/rollup-plugin-analyzer#options

以上是trpc 脚本中 rollup-plugin-analyzer 的使用的详细内容。更多信息请关注PHP中文网其他相关文章！