trpc スクリプトでの rollup-plugin-analyzer の使用法

Barbara Streisand
リリース: 2024-10-26 15:34:30
オリジナル
335 人が閲覧しました

前の記事では、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

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

rollup-plugin-analyzer usage in trpc scripts

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

rollup-plugin-analyzer usage in trpc scripts

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

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

ソース:dev.to
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート