在上一篇文章中,我们提供了analyzeSizeChange.ts文件中函数的示意图,在本文中,我们来看看如何分析实际的大小变化。
1 2 3 4 5 6 7 8 9 10 |
|
analyze 是从 rollup-plugin-analyzer 导入的。它有一个对象作为带有选项的参数:
summaryOnly — 仅输出包摘要和模块使用情况条形图
skipFormatted — 不输出格式化字符串
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配置在构建脚本中使用。
1 2 |
|
所以答案是,当您在 tRPC 源代码中构建包时,包的大小将会发生变化。
在 Thinkthroo,我们研究大型开源项目并提供架构指南。我们开发了使用 tailwind 构建的 resubale 组件,您可以在您的项目中使用它们。我们提供 Next.js、React 和 Node 开发服务。
与我们预约会面讨论您的项目。
https://github.com/trpc/trpc/blob/next/scripts/analyzeSizeChange.ts
https://github.com/search?q=repo:trpc/trpc getRollupConfig&type=code
https://github.com/trpc/trpc/blob/3388c9691d122b9d4047b2de0caedcdf611354ab/packages/client/rollup.config.ts#L3
https://github.com/trpc/trpc/blob/3388c9691d122b9d4047b2de0caedcdf611354ab/scripts/getRollupConfig.ts#L9
https://www.npmjs.com/package/rollup-plugin-analyzer#options
以上是trpc 脚本中 rollup-plugin-analyzer 的使用的详细内容。更多信息请关注PHP中文网其他相关文章!