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中文網其他相關文章！