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 の以下の説明をコピーしました:)

関数は次のコマンドで呼び出されます:

- AnalysisObject (オブジェクト)

- BundleSize (数値) — レンダリングされたバンドル サイズ (バイト単位)

- BundleOrigSize (数値) — 元のバンドル サイズ (バイト単位)

- BundleReduction (数値) — レンダリングされたバンドル サイズ削減の割合

- moduleCount (数値) — 含まれるすべてのモジュールの数

- modules (Array) — モジュール分析オブジェクトの配列

- モジュール (オブジェクト)

- id (文字列) — モジュールのパス/ロールアップ モジュール ID

- サイズ (数値) — レンダリングされたモジュール コードのサイズ (バイト単位)

- origSize (数値) — モジュールの元のコードのサイズ (バイト単位)

- 依存関係 (配列) — 依存モジュール ID/パスのリスト

- パーセント (数値) — バンドル全体に対するモジュール サイズのパーセンテージ

- 縮小 (数値) — レンダリングされたサイズの縮小率

- renderedExports (配列) — 使用される名前付きエクスポートのリスト

- RemoveExports (配列) — 未使用の名前付きエクスポートのリスト

analyzeSizeChange ファイルで実際にこれらのオプションがいくつ使用されているかを見てみましょう。

- バンドルサイズ

- モジュール

これらは、analyzeSizeChange.ts で使用されていることがわかります

しかし、このスクリプトはどのような状況で実行されるのでしょうか?コードをチェックインした後ですか?プルリクエストについてレポートしますか?それを見つけるには、コードが導く場所に行く必要があります。

まず、analyzeSizeChange を検索して、どこで使用されているかを確認する必要があります。 script/getRollupConfig.ts

で使用されていることがわかります。

次に、getRollupConfig がどこで使用されているかを調べる必要があります。多くのパッケージで使用されています。

ただし、packages/client/rollup.config.ts を選択しました。このロールアップ構成はビルド スクリプトで使用されます。

"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 中国語 Web サイトの他の関連記事を参照してください。