In the previous article, we provided a mental picture of functions in analyzeSizeChange.ts file, In this article, let’s find out how the actual size change is analyzed.

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 is imported from rollup-plugin-analyzer. It’s got an object as param with options:

1. summaryOnly — Only output bundle summary and module usage bar graphs

2. skipFormatted — Don’t output formatted string

3. onAnalysis — Callback to be invoked with analysis object (I copied the below description for onAnalysis from npm:)

function will be invoked with:
- analysisObject (Object)
- bundleSize (Number) — rendered bundle size in bytes
- bundleOrigSize (Number) — original bundle size in bytes
- bundleReduction (Number) — percentage of rendered bundle size reduction
- moduleCount (Number) — Count of all included modules
- modules (Array) — array of module analysis objects
- module (Object)
- id (String) — path of module / rollup module id
- size (Number) — size of rendered module code in bytes
- origSize (Number) — size of module’s original code in bytes
- dependents (Array) — list of dependent module ids / paths
- percent (Number) — percentage of module size relative to entire bundle
- reduction (Number) — percentage of rendered size reduction
- renderedExports (Array) — list of used named exports
- removedExports (Array) — list of unused named exports

Let’s see how many of these options are actually used in analyzeSizeChange file.
- bundleSize
- modules

Just these are found to be used in analyzeSizeChange.ts

But in what circumstances is this script executed? is it after you check in some code? does it report on a pull request? To find that out, we need to go where the code takes us.

You would have to first search for analyzeSizeChange to see where it is used. It is found to be used in script/getRollupConfig.ts

Next, you would have to find out where getRollupConfig is used. It is used in a lot of packages.

but I picked packages/client/rollup.config.ts, this rollup config is used in the build script.

"scripts": {
 "build": "rollup - config rollup.config.ts - configPlugin rollup-plugin-swc3",

So the answer, you will have the bundle size changes when you build a package in tRPC source code.

About me:

Hey, my name is Ramu Narasinga. I study large open-source projects and create content about their codebase architecture and best practices, sharing it through articles, videos.

I am open to work on interesting projects. Send me an email at ramu.narasinga@gmail.com

My Github — https://github.com/ramu-narasinga

My website — https://ramunarasinga.com

My Youtube channel — https://www.youtube.com/@thinkthroo

Learning platform — https://thinkthroo.com

Codebase Architecture — https://app.thinkthroo.com/architecture

Best practices — https://app.thinkthroo.com/best-practices

Production-grade projects — https://app.thinkthroo.com/production-grade-projects

References:

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

2. https://github.com/search?q=repo%3Atrpc%2Ftrpc%20getRollupConfig&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