chore(react): setup monosize for measuring bundle size which will replace size-auditor bot by Hotell · Pull Request #30382 · microsoft/fluentui

Hotell · 2024-01-24T13:47:45Z

Previous Behavior

New Behavior

this adds following to react project:

monosize setup
create monosize fixtures based on deprecated bundle-size dynamically generated fixuters

Related Issue(s)

Implements partially [Feature]: migrate bundling measurements from SizeAuditor to monosize #27933

packages/react/monosize.config.mjs

codesandbox-ci · 2024-01-24T14:04:41Z

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 0e384c0:

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

fabricteam · 2024-01-24T14:05:50Z

🕵 fluentuiv8 No visual regressions between this PR and main

fabricteam · 2024-01-24T14:08:46Z

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
`keyboard-key` keyboard-key package	`0 B` `0 B`	`3.746 kB` `1.928 kB`	🆕 New entry
`react` ActivityItem	`0 B` `0 B`	`68.833 kB` `22.613 kB`	🆕 New entry
`react` Announced	`0 B` `0 B`	`36.473 kB` `12.628 kB`	🆕 New entry
`react` Autofill	`0 B` `0 B`	`15.365 kB` `4.743 kB`	🆕 New entry
`react` Breadcrumb	`0 B` `0 B`	`196.061 kB` `58.75 kB`	🆕 New entry
`react` Button	`0 B` `0 B`	`190.138 kB` `55.024 kB`	🆕 New entry
`react` ButtonGrid	`0 B` `0 B`	`175.896 kB` `53.242 kB`	🆕 New entry
`react` Calendar	`0 B` `0 B`	`118.756 kB` `36.101 kB`	🆕 New entry
`react` Callout	`0 B` `0 B`	`80.844 kB` `26.56 kB`	🆕 New entry
`react` Check	`0 B` `0 B`	`51.062 kB` `17.152 kB`	🆕 New entry
`react` Checkbox	`0 B` `0 B`	`57.791 kB` `19.17 kB`	🆕 New entry
`react` ChoiceGroup	`0 B` `0 B`	`63.339 kB` `20.824 kB`	🆕 New entry
`react` ChoiceGroupOption	`0 B` `0 B`	`56.601 kB` `18.695 kB`	🆕 New entry
`react` Coachmark	`0 B` `0 B`	`89.633 kB` `28.377 kB`	🆕 New entry
`react` Color	`0 B` `0 B`	`7.737 kB` `3.106 kB`	🆕 New entry
`react` ColorPicker	`0 B` `0 B`	`129.962 kB` `40.577 kB`	🆕 New entry
`react` ComboBox	`0 B` `0 B`	`245.333 kB` `70.505 kB`	🆕 New entry
`react` CommandBar	`0 B` `0 B`	`197.373 kB` `58.465 kB`	🆕 New entry
`react` ContextualMenu	`0 B` `0 B`	`150.945 kB` `46.975 kB`	🆕 New entry
`react` DatePicker	`0 B` `0 B`	`180.181 kB` `54.902 kB`	🆕 New entry
`react` DateTimeUtilities	`0 B` `0 B`	`5.244 kB` `1.849 kB`	🆕 New entry
`react` DetailsList	`0 B` `0 B`	`225.889 kB` `64.65 kB`	🆕 New entry
`react` Dialog	`0 B` `0 B`	`205.272 kB` `61.429 kB`	🆕 New entry
`react` Divider	`0 B` `0 B`	`17.63 kB` `6.234 kB`	🆕 New entry
`react` DocumentCard	`0 B` `0 B`	`211.058 kB` `62.788 kB`	🆕 New entry
`react` DragDrop	`0 B` `0 B`	`8.343 kB` `2.724 kB`	🆕 New entry
`react` DraggableZone	`0 B` `0 B`	`33.345 kB` `11.166 kB`	🆕 New entry
`react` Dropdown	`0 B` `0 B`	`227.71 kB` `66.862 kB`	🆕 New entry
`react` ExtendedPicker	`0 B` `0 B`	`94.987 kB` `27.297 kB`	🆕 New entry
`react` Fabric	`0 B` `0 B`	`39.75 kB` `13.688 kB`	🆕 New entry
`react` Facepile	`0 B` `0 B`	`205.97 kB` `61.664 kB`	🆕 New entry
`react` FloatingPicker	`0 B` `0 B`	`236.211 kB` `67.362 kB`	🆕 New entry
`react` FocusTrapZone	`0 B` `0 B`	`15.831 kB` `5.54 kB`	🆕 New entry
`react` FocusZone	`0 B` `0 B`	`53.259 kB` `16.869 kB`	🆕 New entry
`react` Grid	`0 B` `0 B`	`175.896 kB` `53.242 kB`	🆕 New entry
`react` GroupedList	`0 B` `0 B`	`131.636 kB` `39.657 kB`	🆕 New entry
`react` GroupedListV2	`0 B` `0 B`	`119.324 kB` `36.822 kB`	🆕 New entry
`react` HoverCard	`0 B` `0 B`	`93.713 kB` `29.775 kB`	🆕 New entry
`react` Icon	`0 B` `0 B`	`49.74 kB` `16.603 kB`	🆕 New entry
`react` Icons	`0 B` `0 B`	`65.829 kB` `24.211 kB`	🆕 New entry
`react` Image	`0 B` `0 B`	`44.79 kB` `15.024 kB`	🆕 New entry
`react` Keytip	`0 B` `0 B`	`78.572 kB` `25.817 kB`	🆕 New entry
`react` KeytipData	`0 B` `0 B`	`13.585 kB` `4.418 kB`	🆕 New entry
`react` KeytipLayer	`0 B` `0 B`	`100.406 kB` `31.12 kB`	🆕 New entry
`react` Keytips	`0 B` `0 B`	`103.159 kB` `32.062 kB`	🆕 New entry
`react` Label	`0 B` `0 B`	`36.347 kB` `12.639 kB`	🆕 New entry
`react` Layer	`0 B` `0 B`	`45.683 kB` `15.585 kB`	🆕 New entry
`react` Link	`0 B` `0 B`	`37.673 kB` `12.993 kB`	🆕 New entry
`react` List	`0 B` `0 B`	`38.136 kB` `12.004 kB`	🆕 New entry
`react` MarqueeSelection	`0 B` `0 B`	`72.119 kB` `21.676 kB`	🆕 New entry
`react` MessageBar	`0 B` `0 B`	`184.685 kB` `55.518 kB`	🆕 New entry
`react` Modal	`0 B` `0 B`	`90.409 kB` `29.213 kB`	🆕 New entry
`react` Nav	`0 B` `0 B`	`183.42 kB` `55.087 kB`	🆕 New entry
`react` OverflowSet	`0 B` `0 B`	`31.044 kB` `10.593 kB`	🆕 New entry
`react` Overlay	`0 B` `0 B`	`38.784 kB` `13.401 kB`	🆕 New entry
`react` Panel	`0 B` `0 B`	`194.924 kB` `58.335 kB`	🆕 New entry
`react` Persona	`0 B` `0 B`	`111.683 kB` `35.57 kB`	🆕 New entry
`react` PersonaCoin	`0 B` `0 B`	`111.683 kB` `35.57 kB`	🆕 New entry
`react` PersonaPresence	`0 B` `0 B`	`55.928 kB` `18.715 kB`	🆕 New entry
`react` Pickers	`0 B` `0 B`	`287.581 kB` `80.6 kB`	🆕 New entry
`react` Pivot	`0 B` `0 B`	`184.23 kB` `55.818 kB`	🆕 New entry
`react` Popup	`0 B` `0 B`	`12.032 kB` `4.114 kB`	🆕 New entry
`react` Positioning	`0 B` `0 B`	`21.821 kB` `7.334 kB`	🆕 New entry
`react` PositioningContainer	`0 B` `0 B`	`70.754 kB` `22.84 kB`	🆕 New entry
`react` ProgressIndicator	`0 B` `0 B`	`37.498 kB` `12.906 kB`	🆕 New entry
`react` Rating	`0 B` `0 B`	`78.989 kB` `25.18 kB`	🆕 New entry
`react` ResizeGroup	`0 B` `0 B`	`13.286 kB` `4.365 kB`	🆕 New entry
`react` ResponsiveMode	`0 B` `0 B`	`8.078 kB` `2.95 kB`	🆕 New entry
`react` ScrollablePane	`0 B` `0 B`	`53.538 kB` `17.113 kB`	🆕 New entry
`react` SearchBox	`0 B` `0 B`	`182.96 kB` `55.094 kB`	🆕 New entry
`react` SelectableOption	`0 B` `0 B`	`724 B` `413 B`	🆕 New entry
`react` SelectedItemsList	`0 B` `0 B`	`226.637 kB` `66.316 kB`	🆕 New entry
`react` Selection	`0 B` `0 B`	`41.202 kB` `11.839 kB`	🆕 New entry
`react` Separator	`0 B` `0 B`	`33.397 kB` `11.529 kB`	🆕 New entry
`react` Shimmer	`0 B` `0 B`	`47.265 kB` `15.632 kB`	🆕 New entry
`react` ShimmeredDetailsList	`0 B` `0 B`	`236.657 kB` `67.423 kB`	🆕 New entry
`react` Slider	`0 B` `0 B`	`55.575 kB` `18.574 kB`	🆕 New entry
`react` SpinButton	`0 B` `0 B`	`186.639 kB` `56.2 kB`	🆕 New entry
`react` Spinner	`0 B` `0 B`	`39.691 kB` `13.815 kB`	🆕 New entry
`react` Stack	`0 B` `0 B`	`40.761 kB` `13.931 kB`	🆕 New entry
`react` Sticky	`0 B` `0 B`	`32.064 kB` `10.324 kB`	🆕 New entry
`react` Styling	`0 B` `0 B`	`44.812 kB` `14.688 kB`	🆕 New entry
`react` SwatchColorPicker	`0 B` `0 B`	`186.144 kB` `56.719 kB`	🆕 New entry
`react` TeachingBubble	`0 B` `0 B`	`199.982 kB` `59.339 kB`	🆕 New entry
`react` Text	`0 B` `0 B`	`35.931 kB` `12.486 kB`	🆕 New entry
`react` TextField	`0 B` `0 B`	`78.587 kB` `24.642 kB`	🆕 New entry
`react` Theme	`0 B` `0 B`	`42.456 kB` `13.773 kB`	🆕 New entry
`react` ThemeGenerator	`0 B` `0 B`	`12.34 kB` `4.106 kB`	🆕 New entry
`react` TimePicker	`0 B` `0 B`	`235.175 kB` `68.285 kB`	🆕 New entry
`react` Toggle	`0 B` `0 B`	`44.17 kB` `15.346 kB`	🆕 New entry
`react` Tooltip	`0 B` `0 B`	`84.203 kB` `27.268 kB`	🆕 New entry
`react` Utilities	`0 B` `0 B`	`71.851 kB` `21.843 kB`	🆕 New entry
`react` Viewport	`0 B` `0 B`	`22.945 kB` `7.292 kB`	🆕 New entry
`react` WeeklyDayPicker	`0 B` `0 B`	`98.762 kB` `30.828 kB`	🆕 New entry
`react` WindowProvider	`0 B` `0 B`	`1.059 kB` `541 B`	🆕 New entry

_{🤖 This report was generated against 2ca494a0955af92ab3259c6fb08aa02125aee867}

size-auditor · 2024-01-24T14:15:06Z

Asset size changes

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

Baseline commit: 2ca494a0955af92ab3259c6fb08aa02125aee867 (build)

fabricteam · 2024-01-24T14:17:53Z

Perf Analysis (`@fluentui/react`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
BaseButton	mount	615	633	5000
Breadcrumb	mount	1693	1674	1000
Checkbox	mount	1667	1708	5000
CheckboxBase	mount	1477	1464	5000
ChoiceGroup	mount	2959	2875	5000
ComboBox	mount	651	658	1000
CommandBar	mount	6188	6126	1000
ContextualMenu	mount	11779	12144	1000
DefaultButton	mount	743	745	5000
DetailsRow	mount	2164	2153	5000
DetailsRowFast	mount	2154	2178	5000
DetailsRowNoStyles	mount	2012	1972	5000
Dialog	mount	2630	2778	1000
DocumentCardTitle	mount	226	220	1000
Dropdown	mount	1987	1960	5000
FocusTrapZone	mount	1130	1126	5000
FocusZone	mount	1073	1049	5000
GroupedList	mount	42033	42282	2
GroupedList	virtual-rerender	17957	20003	2
GroupedList	virtual-rerender-with-unmount	50504	50645	2
GroupedListV2	mount	228	223	2
GroupedListV2	virtual-rerender	212	202	2
GroupedListV2	virtual-rerender-with-unmount	227	238	2
IconButton	mount	1087	1086	5000
Label	mount	329	339	5000
Layer	mount	2726	2701	5000
Link	mount	397	392	5000
MenuButton	mount	927	950	5000
MessageBar	mount	21337	21222	5000
Nav	mount	1942	1959	1000
OverflowSet	mount	769	775	5000
Panel	mount	2010	1782	1000
Persona	mount	722	727	1000
Pivot	mount	856	877	1000
PrimaryButton	mount	871	833	5000
Rating	mount	4560	4680	5000
SearchBox	mount	902	895	5000
Shimmer	mount	1814	1880	5000
Slider	mount	1288	1278	5000
SpinButton	mount	2846	2956	5000
Spinner	mount	377	388	5000
SplitButton	mount	1784	1813	5000
Stack	mount	407	409	5000
StackWithIntrinsicChildren	mount	846	867	5000
StackWithTextChildren	mount	2594	2612	5000
SwatchColorPicker	mount	6138	6212	5000
TagPicker	mount	1423	1449	5000
Text	mount	359	370	5000
TextField	mount	912	922	5000
ThemeProvider	mount	811	826	5000
ThemeProvider	virtual-rerender	587	576	5000
ThemeProvider	virtual-rerender-with-unmount	1246	1275	5000
Toggle	mount	630	602	5000
buttonNative	mount	187	182	5000

…lace-size auditor bot

packages/react/bundle-size/ActivityItem.fixture.js

github-actions bot added this to the January Project Cycle Q1 2024 milestone Jan 24, 2024

Hotell commented Jan 24, 2024

View reviewed changes

packages/react/monosize.config.mjs Show resolved Hide resolved

Hotell added Area: Build System Fluent UI react (v8) Issues about @fluentui/react (v8) labels Jan 24, 2024

Hotell mentioned this pull request Jan 24, 2024

[Feature]: migrate bundling measurements from SizeAuditor to monosize #27933

Closed

10 tasks

Hotell added 2 commits January 25, 2024 15:16

chore(react): setup monosize for measuring bundle size which will rep…

cbd074d

…lace-size auditor bot

change files

1cef58d

Hotell force-pushed the bundle-size/migrate-to-monosize-2 branch from 6abb5ae to 1cef58d Compare January 25, 2024 14:17

chore: update npmignore to not publish bundle-size/ folder

0e384c0

Hotell marked this pull request as ready for review January 26, 2024 10:52

Hotell requested review from a team as code owners January 26, 2024 10:52

Hotell changed the title ~~chore(react): setup monosize for measuring bundle size which will replace-size auditor bot~~ chore(react): setup monosize for measuring bundle size which will replace size-auditor bot Jan 26, 2024

Hotell mentioned this pull request Jan 26, 2024

feat: remove bundle-size-auditor package including its usage and replace it with monosize on ci #30405

Merged

2 tasks

TristanWatanabe approved these changes Jan 29, 2024

View reviewed changes

packages/react/bundle-size/ActivityItem.fixture.js Show resolved Hide resolved

micahgodbolt approved these changes Jan 29, 2024

View reviewed changes

Hotell enabled auto-merge (squash) January 29, 2024 16:27

Hotell merged commit 41c129b into microsoft:master Jan 29, 2024

Hotell deleted the bundle-size/migrate-to-monosize-2 branch January 29, 2024 16:38

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

chore(react): setup monosize for measuring bundle size which will replace size-auditor bot#30382

chore(react): setup monosize for measuring bundle size which will replace size-auditor bot#30382
Hotell merged 3 commits intomicrosoft:masterfrom
Hotell:bundle-size/migrate-to-monosize-2

Hotell commented Jan 24, 2024

Uh oh!

Uh oh!

codesandbox-ci bot commented Jan 24, 2024 •

edited

Loading

Uh oh!

fabricteam commented Jan 24, 2024 •

edited

Loading

Uh oh!

fabricteam commented Jan 24, 2024 •

edited

Loading

Uh oh!

size-auditor bot commented Jan 24, 2024 •

edited

Loading

Uh oh!

fabricteam commented Jan 24, 2024 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Conversation

Hotell commented Jan 24, 2024

Previous Behavior

New Behavior

Related Issue(s)

Uh oh!

Uh oh!

codesandbox-ci bot commented Jan 24, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

fabricteam commented Jan 24, 2024 • 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 Jan 24, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📊 Bundle size report

Uh oh!

size-auditor bot commented Jan 24, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Asset size changes

Uh oh!

fabricteam commented Jan 24, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Perf Analysis (@fluentui/react)

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

codesandbox-ci bot commented Jan 24, 2024 •

edited

Loading

fabricteam commented Jan 24, 2024 •

edited

Loading

fabricteam commented Jan 24, 2024 •

edited

Loading

size-auditor bot commented Jan 24, 2024 •

edited

Loading

fabricteam commented Jan 24, 2024 •

edited

Loading

Perf Analysis (`@fluentui/react`)