feat(test-bundles): make the bundle-size flow generic to simplify local DX but most importantly CI #28210

Hotell · 2023-06-13T14:15:20Z

Previous Behavior

size-auditor ci is non trivial/not generic/takes unnecessary long time on CI to process

New Behavior

simplified and more performant builds on CI for size-auditor processing for v8,v0 libraries
as a follow-up this should be collocated per package to be able to easily enable affected approach on CI ( run only if PR changes are affecting particular package )

Related Issue(s)

Follows ci: use ubuntu pool for size-auditor merge job #28208

fabricteam · 2023-06-13T14:27:00Z

Perf Analysis (`@fluentui/react-components`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
Avatar	mount	583	570	5000
Button	mount	315	304	5000
Field	mount	1037	1004	5000
FluentProvider	mount	644	645	5000
FluentProviderWithTheme	mount	70	82	10
FluentProviderWithTheme	virtual-rerender	71	69	10
FluentProviderWithTheme	virtual-rerender-with-unmount	73	76	10
InfoButton	mount	12	16	5000
MakeStyles	mount	863	853	50000
Persona	mount	1586	1542	5000
SpinButton	mount	1282	1254	5000

fabricteam · 2023-06-13T14:27:46Z

Perf Analysis (`@fluentui/react-northstar`)

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
PortalMinimalPerf.default	99	83	1.19:1
RefMinimalPerf.default	119	108	1.1:1
AccordionMinimalPerf.default	87	80	1.09:1
ListWith60ListItems.default	380	353	1.08:1
DropdownManyItemsPerf.default	403	378	1.07:1
TreeWith60ListItems.default	89	83	1.07:1
ListNestedPerf.default	336	318	1.06:1
DialogMinimalPerf.default	463	442	1.05:1
HeaderSlotsPerf.default	482	460	1.05:1
LayoutMinimalPerf.default	208	199	1.05:1
IconMinimalPerf.default	376	358	1.05:1
TextMinimalPerf.default	202	193	1.05:1
BoxMinimalPerf.default	195	188	1.04:1
LoaderMinimalPerf.default	192	185	1.04:1
TableMinimalPerf.default	241	231	1.04:1
TextAreaMinimalPerf.default	291	280	1.04:1
AvatarMinimalPerf.default	117	114	1.03:1
InputMinimalPerf.default	547	531	1.03:1
ListCommonPerf.default	399	387	1.03:1
SkeletonMinimalPerf.default	201	195	1.03:1
CustomToolbarPrototype.default	1521	1474	1.03:1
TreeMinimalPerf.default	491	475	1.03:1
ChatDuplicateMessagesPerf.default	152	149	1.02:1
CheckboxMinimalPerf.default	1149	1132	1.02:1
PopupMinimalPerf.default	354	347	1.02:1
ToolbarMinimalPerf.default	547	534	1.02:1
DatepickerMinimalPerf.default	3621	3586	1.01:1
HeaderMinimalPerf.default	208	206	1.01:1
RadioGroupMinimalPerf.default	266	264	1.01:1
AnimationMinimalPerf.default	293	294	1:1
ButtonOverridesMissPerf.default	636	635	1:1
CardMinimalPerf.default	314	314	1:1
CarouselMinimalPerf.default	258	259	1:1
DividerMinimalPerf.default	207	207	1:1
ItemLayoutMinimalPerf.default	730	728	1:1
LabelMinimalPerf.default	217	218	1:1
ListMinimalPerf.default	311	311	1:1
StatusMinimalPerf.default	401	402	1:1
DropdownMinimalPerf.default	1422	1440	0.99:1
EmbedMinimalPerf.default	1865	1884	0.99:1
MenuButtonMinimalPerf.default	949	961	0.99:1
RosterPerf.default	1525	1539	0.99:1
SliderMinimalPerf.default	747	756	0.99:1
SplitButtonMinimalPerf.default	2235	2268	0.99:1
TableManyItemsPerf.default	1105	1112	0.99:1
TooltipMinimalPerf.default	1247	1265	0.99:1
ButtonSlotsPerf.default	308	313	0.98:1
MenuMinimalPerf.default	491	499	0.98:1
ProviderMergeThemesPerf.default	649	659	0.98:1
ProviderMinimalPerf.default	197	201	0.98:1
ReactionMinimalPerf.default	214	218	0.98:1
SegmentMinimalPerf.default	197	202	0.98:1
AttachmentSlotsPerf.default	622	638	0.97:1
ChatWithPopoverPerf.default	181	186	0.97:1
GridMinimalPerf.default	185	190	0.97:1
ImageMinimalPerf.default	220	227	0.97:1
VideoMinimalPerf.default	428	440	0.97:1
AlertMinimalPerf.default	155	162	0.96:1
ChatMinimalPerf.default	421	439	0.96:1
FlexMinimalPerf.default	151	157	0.96:1
ButtonMinimalPerf.default	85	90	0.94:1
FormMinimalPerf.default	221	237	0.93:1
AttachmentMinimalPerf.default	80	87	0.92:1

codesandbox-ci · 2023-06-13T14:27:59Z

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

Sandbox	Source
@fluentui/react 8 starter	Configuration
@fluentui/react-components 9 starter	Configuration

fabricteam · 2023-06-13T14:30:03Z

🕵 fluentuiv8 No visual regressions between this PR and main

fabricteam · 2023-06-13T14:36:32Z

🕵 FluentUI-v0 No visual regressions between this PR and main

fabricteam · 2023-06-13T14:37:51Z

Perf Analysis (`@fluentui/react`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
BaseButton	mount	607	621	5000
Breadcrumb	mount	1667	1627	1000
Checkbox	mount	1642	1675	5000
CheckboxBase	mount	1497	1470	5000
ChoiceGroup	mount	2870	2883	5000
ComboBox	mount	642	644	1000
CommandBar	mount	6116	6107	1000
ContextualMenu	mount	11374	11616	1000
DefaultButton	mount	719	744	5000
DetailsRow	mount	2188	2138	5000
DetailsRowFast	mount	2136	2147	5000
DetailsRowNoStyles	mount	1989	1967	5000
Dialog	mount	2734	2640	1000
DocumentCardTitle	mount	221	212	1000
Dropdown	mount	1936	1957	5000
FocusTrapZone	mount	1109	1118	5000
FocusZone	mount	1077	1046	5000
GroupedList	mount	40819	40917	2
GroupedList	virtual-rerender	19807	19412	2
GroupedList	virtual-rerender-with-unmount	52436	49933	2
GroupedListV2	mount	217	222	2
GroupedListV2	virtual-rerender	196	206	2
GroupedListV2	virtual-rerender-with-unmount	225	225	2
IconButton	mount	1076	1095	5000
Label	mount	329	329	5000
Layer	mount	2691	2733	5000
Link	mount	392	389	5000
MenuButton	mount	922	914	5000
MessageBar	mount	21296	21164	5000
Nav	mount	1945	1902	1000
OverflowSet	mount	774	751	5000
Panel	mount	2034	1759	1000
Persona	mount	732	735	1000
Pivot	mount	864	841	1000
PrimaryButton	mount	818	834	5000
Rating	mount	4563	4636	5000
SearchBox	mount	900	935	5000
Shimmer	mount	1857	1924	5000
Slider	mount	1286	1307	5000
SpinButton	mount	2827	2882	5000
Spinner	mount	370	394	5000
SplitButton	mount	1774	1808	5000
Stack	mount	396	398	5000
StackWithIntrinsicChildren	mount	854	873	5000
StackWithTextChildren	mount	2588	2575	5000
SwatchColorPicker	mount	5974	5956	5000
TagPicker	mount	1447	1411	5000
Text	mount	374	379	5000
TextField	mount	909	936	5000
ThemeProvider	mount	808	826	5000
ThemeProvider	virtual-rerender	570	583	5000
ThemeProvider	virtual-rerender-with-unmount	1275	1279	5000
Toggle	mount	591	614	5000
buttonNative	mount	187	183	5000

fabricteam · 2023-06-13T14:44:03Z

📊 Bundle size report

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
`global-context` createContext	`510 B` `330 B`
`global-context` createContextSelector	`537 B` `342 B`
`priority-overflow` createOverflowManager	`3.194 kB` `1.315 kB`
`react-accordion` Accordion (including children components)	`88.552 kB` `26.801 kB`
`react-alert` Alert	`93.624 kB` `22.563 kB`
`react-avatar` Avatar	`57.872 kB` `15.115 kB`
`react-avatar` AvatarGroup	`15.682 kB` `6.306 kB`
`react-avatar` AvatarGroupItem	`74.048 kB` `19.605 kB`
`react-badge` Badge	`23.591 kB` `7.264 kB`
`react-badge` CounterBadge	`24.493 kB` `7.565 kB`
`react-badge` PresenceBadge	`32.171 kB` `8.431 kB`
`react-button` Button	`36.778 kB` `9.51 kB`
`react-button` CompoundButton	`43.932 kB` `10.99 kB`
`react-button` MenuButton	`41.463 kB` `10.846 kB`
`react-button` SplitButton	`49.685 kB` `12.426 kB`
`react-button` ToggleButton	`55.06 kB` `11.446 kB`
`react-card` Card - All	`88.752 kB` `25.122 kB`
`react-card` Card	`83.687 kB` `23.666 kB`
`react-card` CardFooter	`9.229 kB` `3.9 kB`
`react-card` CardHeader	`11.125 kB` `4.596 kB`
`react-card` CardPreview	`10.034 kB` `4.248 kB`
`react-checkbox` Checkbox	`34.536 kB` `10.884 kB`
`react-combobox` Combobox (including child components)	`87.915 kB` `28.321 kB`
`react-combobox` Dropdown (including child components)	`86.254 kB` `27.93 kB`
`react-components` react-components: Button, FluentProvider & webLightTheme	`64.935 kB` `17.918 kB`
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`211.295 kB` `58.801 kB`
`react-components` react-components: FluentProvider & webLightTheme	`36.168 kB` `11.964 kB`
`react-datepicker-compat` DatePicker Compat	`222.768 kB` `59.29 kB`
`react-dialog` Dialog (including children components)	`92.16 kB` `27.502 kB`
`react-divider` Divider	`17.477 kB` `6.357 kB`
`react-field` Field	`18.936 kB` `7.092 kB`
`react-image` Image	`11.55 kB` `4.627 kB`
`react-infobutton` InfoButton	`132.646 kB` `40.467 kB`
`react-infobutton` InfoLabel	`136.111 kB` `41.528 kB`
`react-input` Input	`24.219 kB` `7.781 kB`
`react-label` Label	`10.175 kB` `4.243 kB`
`react-link` Link	`12.375 kB` `5.113 kB`
`react-menu` Menu (including children components)	`133.373 kB` `40.617 kB`
`react-menu` Menu (including selectable components)	`136.357 kB` `41.146 kB`
`react-overflow` hooks only	`11.206 kB` `4.266 kB`
`react-persona` Persona	`64.793 kB` `17.036 kB`
`react-popover` Popover	`119.608 kB` `36.799 kB`
`react-portal` Portal	`11.82 kB` `4.391 kB`
`react-portal-compat` PortalCompatProvider	`6.473 kB` `2.196 kB`
`react-positioning` usePositioning	`24.249 kB` `8.856 kB`
`react-progress` ProgressBar	`13.927 kB` `5.488 kB`
`react-provider` FluentProvider	`18.115 kB` `6.719 kB`
`react-radio` Radio	`27.44 kB` `8.73 kB`
`react-radio` RadioGroup	`11.362 kB` `4.753 kB`
`react-select` Select	`25.409 kB` `8.834 kB`
`react-slider` Slider	`34.358 kB` `11.107 kB`
`react-spinbutton` SpinButton	`34.157 kB` `10.429 kB`
`react-spinner` Spinner	`21.363 kB` `7.021 kB`
`react-switch` Switch	`29.96 kB` `9.353 kB`
`react-table` DataGrid	`157.723 kB` `43.023 kB`
`react-table` Table (Primitives only)	`45.147 kB` `12.577 kB`
`react-table` Table as DataGrid	`133.392 kB` `34.008 kB`
`react-table` Table (Selection only)	`79.161 kB` `19.386 kB`
`react-table` Table (Sort only)	`78.491 kB` `19.195 kB`
`react-tags` Tag	`22.04 kB` `7.94 kB`
`react-text` Text - Default	`12.563 kB` `4.972 kB`
`react-text` Text - Wrappers	`15.713 kB` `5.293 kB`
`react-textarea` Textarea	`27.69 kB` `9.125 kB`
`react-theme` Single theme token import	`69 B` `89 B`
`react-theme` Teams: all themes	`31.33 kB` `6.764 kB`
`react-theme` Teams: Light theme	`17.895 kB` `5.162 kB`
`react-tooltip` Tooltip	`47.263 kB` `16.585 kB`
`react-utilities` SSRProvider	`180 B` `159 B`

_{🤖 This report was generated against d33397e28ac542798cfdc4a7b917f1d27db9ed63}

fabricteam · 2023-06-13T15:00:28Z

🕵 fluentuiv9 No visual regressions between this PR and main

size-auditor · 2023-06-13T15:15:24Z

Asset size changes

Size Auditor did not detect a change in bundle size for any component!

Baseline commit: d33397e28ac542798cfdc4a7b917f1d27db9ed63 (build)

package.json

azure-pipelines.bundlesize.yml

apps/test-bundles/webpackUtils.js

apps/test-bundles/scripts/merge-bundlesizes.ts

apps/test-bundles/scripts/bundle-size-collect.ts

…I setup

msft-fluent-ui-bot assigned marcosmoura Jun 13, 2023

Hotell unassigned marcosmoura Jun 13, 2023

github-actions bot added this to the June Project Cycle Q2 2023 milestone Jun 13, 2023

Hotell force-pushed the hotell/ci/fix-size-auditor-pipelines-v2 branch from 29b1731 to c527826 Compare June 13, 2023 14:28

Hotell changed the title ~~Hotell/ci/fix size auditor pipelines v2~~ feat(test-bundles): make the bundle-size flow generic to simplify local DX but most importantly CI Jun 13, 2023

Hotell marked this pull request as ready for review June 13, 2023 17:28

Hotell requested review from a team as code owners June 13, 2023 17:28

sopranopillow approved these changes Jun 13, 2023

View reviewed changes

Hotell commented Jun 14, 2023

View reviewed changes

Hotell requested review from a team and khmakoto as code owners June 14, 2023 09:23

Hotell force-pushed the hotell/ci/fix-size-auditor-pipelines-v2 branch from c13b1ec to a17b841 Compare June 14, 2023 11:46

msft-fluent-ui-bot added the PR: API Modified label Jun 14, 2023

tudorpopams self-requested a review June 14, 2023 12:15

Hotell added 5 commits June 14, 2023 14:23

feat(test-bundles): make old bundle-size generic enough to simplify C…

888f9b9

…I setup

feat(test-bundles): replace jq cryptic script with custom merge script

182b89c

ci: make size-auditor jobs valid

4e02694

fix(test-bundles): rename npm script to not confclit with v9 bundle-size

b84a445

ci: add back dependsOn for lightrail job

d033f08

Hotell force-pushed the hotell/ci/fix-size-auditor-pipelines-v2 branch from a17b841 to d033f08 Compare June 14, 2023 12:23

Hotell removed request for a team and khmakoto June 14, 2023 12:23

Hotell removed the PR: API Modified label Jun 14, 2023

ci: remove commented scripts from pipeline

f9167c2

TristanWatanabe approved these changes Jun 15, 2023

View reviewed changes

Hotell merged commit eb359d9 into microsoft:master Jun 15, 2023

Hotell deleted the hotell/ci/fix-size-auditor-pipelines-v2 branch June 15, 2023 07:40

Hotell mentioned this pull request Jun 15, 2023

feat(scripts-bundle-size-auditor): refactor test-bundles app into a generic CLI tool that enables faster CI #28231

Merged

TristanWatanabe added a commit to TristanWatanabe/fluentui that referenced this pull request Jun 16, 2023

cherry pick changes in microsoft#28210

012d0c1

TristanWatanabe mentioned this pull request Jun 16, 2023

chore(web-components-v3): cherry-pick some changes to fix CI check #28240

Merged

feat(test-bundles): make the bundle-size flow generic to simplify local DX but most importantly CI #28210

feat(test-bundles): make the bundle-size flow generic to simplify local DX but most importantly CI #28210

Uh oh!

Conversation

Hotell commented Jun 13, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Previous Behavior

New Behavior

Related Issue(s)

Uh oh!

fabricteam commented Jun 13, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Perf Analysis (@fluentui/react-components)

Uh oh!

fabricteam commented Jun 13, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Perf Analysis (@fluentui/react-northstar)

Uh oh!

codesandbox-ci bot commented Jun 13, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

fabricteam commented Jun 13, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🕵 fluentuiv8 No visual regressions between this PR and main

Uh oh!

fabricteam commented Jun 13, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🕵 FluentUI-v0 No visual regressions between this PR and main

Uh oh!

fabricteam commented Jun 13, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Perf Analysis (@fluentui/react)

Uh oh!

fabricteam commented Jun 13, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📊 Bundle size report

Uh oh!

fabricteam commented Jun 13, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🕵 fluentuiv9 No visual regressions between this PR and main

Uh oh!

size-auditor bot commented Jun 13, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Asset size changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

Hotell commented Jun 13, 2023 •

edited

Loading

fabricteam commented Jun 13, 2023 •

edited

Loading

Perf Analysis (`@fluentui/react-components`)

fabricteam commented Jun 13, 2023 •

edited

Loading

Perf Analysis (`@fluentui/react-northstar`)

codesandbox-ci bot commented Jun 13, 2023 •

edited

Loading

fabricteam commented Jun 13, 2023 •

edited

Loading

fabricteam commented Jun 13, 2023 •

edited

Loading

fabricteam commented Jun 13, 2023 •

edited

Loading

Perf Analysis (`@fluentui/react`)

fabricteam commented Jun 13, 2023 •

edited

Loading

fabricteam commented Jun 13, 2023 •

edited

Loading

size-auditor bot commented Jun 13, 2023 •

edited

Loading