ホームページ > 記事 > ウェブフロントエンド > tRPC ソースコードのanalyzeSizeChange スクリプト

tRPC ソースコードのanalyzeSizeChange スクリプト

Barbara Streisandオリジナル: 2024-10-25 06:37:29991ブラウズ

この記事では、trpc ソースコードのanalyzeSizeChange スクリプトの概要を説明します。

このファイルには次の機能があります:

1. funcanalyzeSizeChange

2. 分析機能

3.「GitHubLogType

」と入力します。 4.「GitHubLogOptions

」と入力します 5. func logNewModule

6. func logDifference

7. func logGithubMessage

8. 機能の違い

9.関数solveJsonPaths

10.関数ストリップAnsiEscapes

11. func formatGithubOptions

12. func formatGithubMessage

analyzeSizeChange script in tRPC source code

ここで最も重要な関数は、analyzeSizeChange です。これには onAnalysis という名前の関数があるためです。

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) => {
 …
 // calls logDifference
 if (prevModule) {
 logDifference(
 `Module '${module.id}'`,
 prevModule.size,
 module.size,
 );
 } else {
 logNewModule(module.id, module.size);
 }
 …
 })
}

logDifference と logNewModule はこの同じファイル内にあり、同じ場所にあります。これは読みやすさと再利用性を目的としています。

logNewModule:

function logNewModule(name: string, size: number) {
 if (size < ABSOLUTE_BYTE_CHANGE_THRESHOLD) {
   return;
 }
 const type = 'notice';
 const options = {
   title: `New Module (${size} bytes in ${name})`,
 };
 const message = `${name} size: ${size} bytes`;
 logGithubMessage(type, message, options);
}

logNewModule は、この同じファイルの最後にある logGithubMessage という名前の関数をこの後に呼び出します

関数。

logDifference:

function logDifference(name: string, before: number, after: number) {
 const change = difference(before, after);
 if (
   change.absolute < ABSOLUTE_BYTE_CHANGE_THRESHOLD &&
   change.percent < PERCENT_CHANGE_THRESHOLD
 ) {
   return;
 }
 const type = 'error';
 const options = {
   title: `Important Size Change (${change.absolute} bytes in ${name})`,
 };
 const message = `${name} size change: ${
   change.absolute
 } bytes (${change.percent.toFixed(2)}%)`;
 logGithubMessage(type, message, options);
}

logDifference は logGithubMessage と差分関数を呼び出します。この時点で、関数の階層構造が

であることがわかります。上から下に、コア機能が上位にランク付けされ、単一責任機能が下位にランク付けされます。

logGithubMessage

function logGithubMessage(
 type: GitHubLogType,
 message: string,
 options: GitHubLogOptions = {},
) {
 console.log(
   stripAnsiEscapes(
   `::${type} ${formatGithubOptions(options)}::${formatGithubMessage(
   message,
   )
}`,
),
 );
}

logGithubMessage は、stripAnsiEscapes、formatGithubOptions、formatGithubMessage の 3 つの関数を使用します。

私たちについて:

Thinkthroo では、大規模なオープンソースプロジェクトを研究し、アーキテクチャガイドを提供しています。私たちは、tailwind を使用して構築された、プロジェクトで使用できる resubale コンポーネントを開発しました。 Next.js、React、Node 開発サービスを提供します。

プロジェクトについて話し合うためのミーティングを予約してください。

analyzeSizeChange script in tRPC source code