首页 > web前端 > js教程 > trpc 脚本中 rollup-plugin-analyzer 的使用

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

Barbara Streisand
发布: 2024-10-26 15:34:30
原创
362 人浏览过

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

1

2

3

4

5

6

7

8

9

10

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

中使用

rollup-plugin-analyzer usage in trpc scripts

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

rollup-plugin-analyzer usage in trpc scripts

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

1

2

"scripts": {

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

登录后复制

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

关于我们:

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

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

rollup-plugin-analyzer usage in trpc scripts

rollup-plugin-analyzer usage in trpc scripts

参考资料:

  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中文网其他相关文章!

来源:dev.to
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板