In this article, we provide an overview of analyzeSizeChange script in trpc source code.

This file has the following functions:

1. func analyzeSizeChange
2. func onAnalysis
3. type GitHubLogType
4. type GitHubLogOptions
5. func logNewModule
6. func logDifference
7. func logGithubMessage
8. func difference
9. func resolveJsonPaths
10. func stripAnsiEscapes
11. func formatGithubOptions
12. func formatGithubMessage

The most important function here is analyzeSizeChange because it has a function named 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 and logNewModule are in this same file and are colocated. This is for readability and reusability purposes.

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 calls a function named logGithubMessage that is located somewhere at the bottom of this same file after this
function.

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 calls logGithubMessage and difference functions, at this point, we can see that function heierarchy is
from top to bottom, core functions are ranked higher while single responsibility functions are positioned lower.

logGithubMessage

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

logGithubMessage uses three functions — stripAnsiEscapes, formatGithubOptions and formatGithubMessage.

About us:

At Thinkthroo, we study large open source projects and provide architectural guides. We have developed resubale Components, built with tailwind, that you can use in your project. We offer Next.js, React and Node development services.

Book a meeting with us to disucss your project.

References:

1. https://github.com/trpc/trpc/blob/next/scripts/analyzeSizeChange.ts