ci: add bundle size report #1975

snitin315 · 2024-01-17T04:38:41Z

Workflow

PR

Read package exports & run size-limit on each component export.
Create json output file named PRBundleSizeStats.json
Compare PRBundleSizeStats.json with baseBundleSizeStats.json from the master and report the difference on PR via danger-js.

master

Read package exports & run size-limit on each component export.
Create json output file named baseBundleSizeStats.json.
Commit & push the baseBundleSizeStats.json file.

Addition info

Report - ci: add bundle size report #1975 (comment)
- currently base stats is 0 for all components since we don't have data on master.
Base size 0 means the component is newly added.
Current Size 0 means the component has been removed.
JIRA Story

changeset-bot · 2024-01-17T04:38:45Z

⚠️ No Changeset found

Latest commit: 84bac07

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

github-actions · 2024-01-17T04:42:08Z

✅ PR title follows Conventional Commits specification.

codesandbox-ci · 2024-01-17T04:52:14Z

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 84bac07:

Sandbox	Source
razorpay/blade: basic	Configuration

rzpcibot · 2024-02-03T08:25:35Z

Bundle Size Report

Updated Components

Status	Component	Current Size (kb)	Diff
⬆	Accordion, AccordionItem	4.711	+4.711 KB
⬆	ActionList, ActionListItem, ActionListItemBadge, ActionListItemBadgeGroup, ActionListItemIcon, ActionListItemText, ActionListSection	12.480	+12.480 KB
⬆	Alert	11.119	+11.119 KB
⬆	Amount	1.114	+1.114 KB
⬆	Badge	0.850	+0.850 KB
⬆	BladeProvider	1.562	+1.562 KB
⬆	BottomSheet	9.516	+9.516 KB
⬆	Box	0.769	+0.769 KB
⬆	Card, CardBody, CardHeader, CardHeaderIcon, CardHeaderIconButton, CardHeaderLeading, CardHeaderTrailing, CardFooter, CardFooterLeading, CardFooterTrailing	8.836	+8.836 KB
⬆	Carousel, CarouselItem	6.876	+6.876 KB
⬆	Checkbox	5.910	+5.910 KB
⬆	Chip, ChipGroup	5.403	+5.403 KB
⬆	Collapsible, CollapsibleLink, CollapsibleButton, CollapsibleBody	9.285	+9.285 KB
⬆	Counter	0.808	+0.808 KB
⬆	Divider	0.562	+0.562 KB
⬆	Dropdown, DropdownOverlay, DropdownButton, DropdownLink, DropdownFooter, DropdownHeader	22.305	+22.305 KB
⬆	Indicator	0.953	+0.953 KB
⬆	List, ListItem, ListItemLink, ListItemCode, ListItemText	5.086	+5.086 KB
⬆	Modal	12.637	+12.637 KB
⬆	Popover, PopoverInteractiveWrapper	20.418	+20.418 KB
⬆	ProgressBar	1.719	+1.719 KB
⬆	Radio	4.720	+4.720 KB
⬆	Skeleton	0.780	+0.780 KB
⬆	SpotlightPopoverTour, SpotlightPopoverTourFooter, SpotlightPopoverTourStep	28.177	+28.177 KB
⬆	Switch	4.572	+4.572 KB
⬆	Table, TableHeader, TableHeaderCell, TableHeaderRow, TableBody, TableCell, TableRow, TableFooter, TableFooterCell, TableFooterRow, TablePagination, TableToolbar, TableToolbarActions	50.202	+50.202 KB
⬆	Tabs, TabItem, TabList, TabPanel	6.625	+6.625 KB
⬆	Tag	3.451	+3.451 KB
⬆	ToastContainer, useToast	12.496	+12.496 KB
⬆	Tooltip, TooltipInteractiveWrapper	15.259	+15.259 KB
⬆	Button	5.638	+5.638 KB
⬆	IconButton	0.824	+0.824 KB
⬆	CheckboxGroup	4.022	+4.022 KB
⬆	SelectInput, AutoComplete	17.262	+17.262 KB
⬆	OTPInput	11.462	+11.462 KB
⬆	PasswordInput	13.456	+13.456 KB
⬆	TextArea	11.848	+11.848 KB
⬆	TextInput	13.394	+13.394 KB
⬆	Link	2.098	+2.098 KB
⬆	RadioGroup	3.983	+3.983 KB
⬆	Spinner	1.929	+1.929 KB
⬆	Code	0.629	+0.629 KB
⬆	Display	0.524	+0.524 KB
⬆	Heading	0.488	+0.488 KB
⬆	Text	0.002	+0.002 KB

Generated by 🚫 dangerJS against 84bac07

saurabhdaware · 2024-02-06T09:38:28Z

packages/blade/scripts/generateBundleSizeInfo.js

+    'ActionListItemAsset', // This is just an <img> tag
+    // These are same as Badge, Amount, Counter, Link, Text components
+    'CardHeaderAmount',
+    'CardHeaderBadge',
+    'CardHeaderCounter',
+    'CardHeaderLink',
+    'CardHeaderText',


Any harm in keeping these? They are wrappers but their size might increase decrease depending on the code we add later no.

It just increases the script run time, these components can add approx ~2mins. I believe these wrappers would hardly get updates. They have dev-only checks to verify amount is being used inside card only.

blade/packages/blade/src/components/Card/CardHeader.tsx

Lines 57 to 61 in 8d89eb5

const _CardHeaderAmount = (props: AmountProps): React.ReactElement => {

useVerifyInsideCard('CardHeaderAmount');

return <Amount {...props} />;

};

Add this in a comment for future reference. I was going to propose the same, to keep these components. But if it increases our CI time by 2 mins then we shouldn't

kamleshchandnani · 2024-02-07T06:18:37Z

instead of ✅ and 🚫 can we use 🟢 and 🔴 to be more clear?

saurabhdaware · 2024-02-07T07:51:40Z

The check seems to take 15 - 17minutes 😢 Is there any alternate way to implement or any way to optimize this?

snitin315 · 2024-02-07T09:01:17Z

The check seems to take 15 - 17 minutes 😢 Is there any alternate way to implement or any way to optimize this?

Yeah, this is the time taken by the size limit package. But this is expected because we have to initialize and bundle a webpack project for each component. Let me try to use m1 MacOS on CI. Otherwise, we can move to our custom implementation in the future but that would be a significant effort.

packages/blade/scripts/generateBundleSizeInfo.js

packages/blade/scripts/generateBundleDiff.js

chaitanyadeorukhkar · 2024-02-20T09:20:53Z

packages/blade/package.json

@@ -127,6 +127,7 @@
    "watch:test:react-native": "yarn test:react-native --watch --onlyChanged",
    "chromatic": "npx chromatic",
    "publish-npm": "node ./scripts/publishToNpm.js",
+    "bundle-size": "node ./scripts/generateBundleSizeInfo.js",


Call it generate-bundle-size-info

Run the build command before generating a bundle size info. This way we can ensure that the generated info is always on the latest changes and not some old build on local

Suggested change

"bundle-size": "node ./scripts/generateBundleSizeInfo.js",

"bundle-size": "yarn build && node ./scripts/generateBundleSizeInfo.js",

Done. We don't need to run the entire build, just the react:prod build. Added generate-bundle-size-info & pregenerate-bundle-size-info (this will automatically run before generate-bundle-size-info)

packages/blade/package.json

chaitanyadeorukhkar · 2024-02-20T09:25:53Z

packages/blade/scripts/generateBundleSizeInfo.js

+    'ActionListItemAsset', // This is just an <img> tag
+    // These are same as Badge, Amount, Counter, Link, Text components
+    'CardHeaderAmount',
+    'CardHeaderBadge',
+    'CardHeaderCounter',
+    'CardHeaderLink',
+    'CardHeaderText',


Add this in a comment for future reference. I was going to propose the same, to keep these components. But if it increases our CI time by 2 mins then we shouldn't

packages/blade/scripts/generateBundleSizeInfo.js

packages/blade/scripts/generateBundleDiff.js

chaitanyadeorukhkar · 2024-02-20T10:03:15Z

packages/blade/scripts/generateBundleSizeInfo.js

+  });
+
+  // Write the gathered size information to the specified file
+  const filename = process.env.BUNDLE_SIZE_STATS_FILENAME || 'PRBundleSizeStats.json';


Lets run prettier on this file once generated?

I feel prettier is not required, we need to store json just for diff. Someone will hardly read it.

It looks terribly ugly otherwise. Even if its just for diff, lets format it properly and store. It will hardly take any time

packages/blade/scripts/generateBundleSizeInfo.js

ci: fix size-limit check ci: add bundle size check

…tierignore

chaitanyadeorukhkar · 2024-02-26T10:37:14Z

.github/actions/install-dependencies/action.yml

@@ -25,6 +25,6 @@ runs:
      if: steps.cache.outputs.cache-hit != 'true'

    - name: Run postinstall script
-      run: yarn postinstall && yarn workspace @razorpay/blade postinstall
+      run: yarn postinstall


Why this change?

postinstall script is no longer required, it was just running patch-package for bundlemon & we no longer depend on bundlemon.

packages/blade/.gitignore

packages/blade/scripts/generateBundleDiff.js

packages/blade/scripts/generateBundleSizeInfo.js

snitin315 · 2024-02-28T10:37:28Z

Let's see how it goes 🙏🏻

snitin315 changed the title ~~Ci/bundle-size-report~~ ci: add bundle size report Jan 17, 2024

snitin315 force-pushed the ci/bundle-size-report branch from 4405a91 to 9c287f4 Compare February 3, 2024 07:53

snitin315 marked this pull request as ready for review February 4, 2024 08:59

snitin315 requested review from chaitanyadeorukhkar and kamleshchandnani as code owners February 4, 2024 08:59

snitin315 marked this pull request as draft February 4, 2024 08:59

snitin315 force-pushed the ci/bundle-size-report branch from c74fb27 to 0635f48 Compare February 4, 2024 15:23

snitin315 marked this pull request as ready for review February 5, 2024 04:38

snitin315 added the Review - L1 First level of review label Feb 6, 2024

snitin315 assigned saurabhdaware Feb 6, 2024

saurabhdaware reviewed Feb 6, 2024

View reviewed changes

anuraghazra reviewed Feb 7, 2024

View reviewed changes

packages/blade/scripts/generateBundleSizeInfo.js Outdated Show resolved Hide resolved

saurabhdaware previously approved these changes Feb 20, 2024

View reviewed changes

snitin315 force-pushed the ci/bundle-size-report branch from 2e5f5b2 to 9fd449b Compare February 20, 2024 07:06

anuraghazra reviewed Feb 20, 2024

View reviewed changes

packages/blade/scripts/generateBundleDiff.js Show resolved Hide resolved

anuraghazra previously approved these changes Feb 20, 2024

View reviewed changes

chaitanyadeorukhkar requested changes Feb 20, 2024

View reviewed changes

snitin315 added Review - L2 Second level of review and removed Review - L1 First level of review labels Feb 25, 2024

snitin315 assigned chaitanyadeorukhkar and unassigned saurabhdaware Feb 25, 2024

snitin315 added 2 commits February 26, 2024 00:19

ci: fix bundlemon check

1b624cb

ci: fix size-limit check ci: add bundle size check

chore: remove unwanted changes

e2d8deb

snitin315 added 10 commits February 26, 2024 00:19

chore: add comments

72e5d64

ci: use M1 MacOS runners for bundle size action

0ae51dd

fix: updates

144850e

fix: updates

139f138

fix: updates

eca70c2

fix: updates

48ee678

fix: updates

c39b36c

fix: updates

3b2f7de

fix: updates

ad1be92

fix: remove empty project size

a20ce9a

snitin315 dismissed stale reviews from anuraghazra and saurabhdaware via a20ce9a February 25, 2024 18:49

snitin315 force-pushed the ci/bundle-size-report branch from 9fd449b to a20ce9a Compare February 25, 2024 18:49

snitin315 added 6 commits February 26, 2024 00:39

fix: report actualu size

315dccd

fix: report actual size

af3f2f1

ci: fix

23eecf3

ci: fix

b0cd3d9

fix: exclude PopupArrow

256d1de

chore: add baseBundleSizeStats.json & PRBundleSizeStats.json to .pret…

5fa5e42

…tierignore

chaitanyadeorukhkar reviewed Feb 26, 2024

View reviewed changes

snitin315 added 2 commits February 27, 2024 01:17

chore: prettify files & fix action edge acse

6fe7be5

chore: fix lint

84bac07

chaitanyadeorukhkar approved these changes Feb 28, 2024

View reviewed changes

snitin315 merged commit 24f1cbe into master Feb 28, 2024
17 checks passed

snitin315 deleted the ci/bundle-size-report branch February 28, 2024 10:37

anuraghazra pushed a commit that referenced this pull request Apr 9, 2024

ci: add bundle size report check (#1975)

868c24a

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

ci: add bundle size report #1975

ci: add bundle size report #1975

snitin315 commented Jan 17, 2024 •

edited

Loading

changeset-bot bot commented Jan 17, 2024 •

edited

Loading

github-actions bot commented Jan 17, 2024 •

edited

Loading

codesandbox-ci bot commented Jan 17, 2024 •

edited

Loading

rzpcibot commented Feb 3, 2024 •

edited

Loading

saurabhdaware Feb 6, 2024

snitin315 Feb 6, 2024

chaitanyadeorukhkar Feb 20, 2024

kamleshchandnani commented Feb 7, 2024

saurabhdaware commented Feb 7, 2024

snitin315 commented Feb 7, 2024

chaitanyadeorukhkar Feb 20, 2024

chaitanyadeorukhkar Feb 20, 2024

snitin315 Feb 26, 2024

chaitanyadeorukhkar Feb 20, 2024

chaitanyadeorukhkar Feb 20, 2024

snitin315 Feb 26, 2024

chaitanyadeorukhkar Feb 26, 2024

chaitanyadeorukhkar Feb 26, 2024

snitin315 Feb 26, 2024

snitin315 commented Feb 28, 2024

	const _CardHeaderAmount = (props: AmountProps): React.ReactElement => {
	useVerifyInsideCard('CardHeaderAmount');

	return <Amount {...props} />;
	};

	"bundle-size": "node ./scripts/generateBundleSizeInfo.js",
	"bundle-size": "yarn build && node ./scripts/generateBundleSizeInfo.js",

ci: add bundle size report #1975

ci: add bundle size report #1975

Conversation

snitin315 commented Jan 17, 2024 • edited Loading

Workflow

PR

master

Addition info

changeset-bot bot commented Jan 17, 2024 • edited Loading

⚠️ No Changeset found

github-actions bot commented Jan 17, 2024 • edited Loading

codesandbox-ci bot commented Jan 17, 2024 • edited Loading

rzpcibot commented Feb 3, 2024 • edited Loading

Bundle Size Report

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kamleshchandnani commented Feb 7, 2024

saurabhdaware commented Feb 7, 2024

snitin315 commented Feb 7, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

snitin315 commented Feb 28, 2024

snitin315 commented Jan 17, 2024 •

edited

Loading

changeset-bot bot commented Jan 17, 2024 •

edited

Loading

github-actions bot commented Jan 17, 2024 •

edited

Loading

codesandbox-ci bot commented Jan 17, 2024 •

edited

Loading

rzpcibot commented Feb 3, 2024 •

edited

Loading