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 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

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