chore: migrate to monosize by layershifter · Pull Request #26826 · microsoft/fluentui

layershifter · 2023-02-13T12:47:24Z

New Behavior

This PR replaces @fluentui/bundle-size with monosize. At current moment, it's the same code except the adapters feature: monosize supports different storage adapters that makes it really reusable.

This PR:

updates package.json files to update bundlesize script (& includes a lot of changefiles because of that)
updates pipelines to use monosize
creates /monosize.config.mjs that contains a config for a storage adapter (credentials are the same as we use currently)
creates /packages/react-components/global-context/monosize.config.mjs to replace packages/react-components/global-context/bundle-size.config.js
bumps workspace-tools, cli-table3 & ci-info as a side-effect to avoid duplicates

Note: @fluentui/bundle-size will be removed in a separate PR.

Fixes partially #27934

fabricteam · 2023-02-13T12:57:21Z

📊 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	`4.248 kB` `1.671 kB`
`react-accordion` Accordion (including children components)	`88.26 kB` `26.718 kB`
`react-alert` Alert	`84.966 kB` `22.022 kB`
`react-avatar` Avatar	`47.713 kB` `14.513 kB`
`react-avatar` AvatarGroup	`15.695 kB` `6.314 kB`
`react-avatar` AvatarGroupItem	`63.889 kB` `18.993 kB`
`react-badge` Badge	`23.604 kB` `7.272 kB`
`react-badge` CounterBadge	`24.506 kB` `7.574 kB`
`react-badge` PresenceBadge	`22.227 kB` `7.881 kB`
`react-button` Button	`39.193 kB` `9.743 kB`
`react-button` CompoundButton	`46.661 kB` `11.257 kB`
`react-button` MenuButton	`43.527 kB` `10.967 kB`
`react-button` SplitButton	`51.732 kB` `12.563 kB`
`react-button` ToggleButton	`57.629 kB` `11.645 kB`
`react-card` Card - All	`89.36 kB` `25.284 kB`
`react-card` Card	`83.778 kB` `23.685 kB`
`react-card` CardFooter	`9.24 kB` `3.907 kB`
`react-card` CardHeader	`11.652 kB` `4.741 kB`
`react-card` CardPreview	`10.048 kB` `4.254 kB`
`react-checkbox` Checkbox	`33.198 kB` `10.718 kB`
`react-combobox` Combobox (including child components)	`87.173 kB` `28.125 kB`
`react-combobox` Dropdown (including child components)	`85.576 kB` `27.723 kB`
`react-components` react-components: Button, FluentProvider & webLightTheme	`67.576 kB` `18.225 kB`
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`213.085 kB` `59.114 kB`
`react-components` react-components: FluentProvider & webLightTheme	`36.409 kB` `12.003 kB`
`react-datepicker-compat` DatePicker Compat	`223.368 kB` `59.265 kB`
`react-dialog` Dialog (including children components)	`92.736 kB` `27.579 kB`
`react-divider` Divider	`17.49 kB` `6.364 kB`
`react-field` Field	`18.148 kB` `6.97 kB`
`react-image` Image	`11.561 kB` `4.637 kB`
`react-infobutton` InfoButton	`131.335 kB` `40.311 kB`
`react-infobutton` InfoLabel	`134.94 kB` `41.443 kB`
`react-input` Input	`24.232 kB` `7.781 kB`
`react-label` Label	`10.186 kB` `4.253 kB`
`react-link` Link	`12.782 kB` `5.247 kB`
`react-menu` Menu (including children components)	`132.677 kB` `40.613 kB`
`react-menu` Menu (including selectable components)	`135.441 kB` `41.106 kB`
`react-overflow` hooks only	`12.505 kB` `4.626 kB`
`react-persona` Persona	`55.267 kB` `16.525 kB`
`react-popover` Popover	`119.925 kB` `36.895 kB`
`react-portal` Portal	`11.935 kB` `4.421 kB`
`react-portal-compat` PortalCompatProvider	`6.48 kB` `2.203 kB`
`react-positioning` usePositioning	`24.272 kB` `8.866 kB`
`react-progress` ProgressBar	`13.941 kB` `5.498 kB`
`react-provider` FluentProvider	`18.129 kB` `6.73 kB`
`react-radio` Radio	`26.991 kB` `8.626 kB`
`react-radio` RadioGroup	`11.376 kB` `4.763 kB`
`react-select` Select	`24.929 kB` `8.713 kB`
`react-slider` Slider	`34.87 kB` `11.178 kB`
`react-spinbutton` SpinButton	`33.73 kB` `10.337 kB`
`react-spinner` Spinner	`21.77 kB` `7.134 kB`
`react-switch` Switch	`29.485 kB` `9.228 kB`
`react-table` DataGrid	`158.282 kB` `43.276 kB`
`react-table` Table (Primitives only)	`44.666 kB` `12.442 kB`
`react-table` Table as DataGrid	`132.365 kB` `33.849 kB`
`react-table` Table (Selection only)	`77.993 kB` `19.245 kB`
`react-table` Table (Sort only)	`76.978 kB` `18.973 kB`
`react-tags-preview` InteractionTag	`34.145 kB` `9.188 kB`
`react-tags-preview` Tag	`25.936 kB` `8.483 kB`
`react-tags-preview` TagGroup	`69.142 kB` `20.294 kB`
`react-text` Text - Default	`12.574 kB` `4.982 kB`
`react-text` Text - Wrappers	`15.726 kB` `5.302 kB`
`react-textarea` Textarea	`27.703 kB` `9.126 kB`
`react-theme` Single theme token import	`69 B` `89 B`
`react-theme` Teams: all themes	`31.987 kB` `6.85 kB`
`react-theme` Teams: Light theme	`18.121 kB` `5.194 kB`
`react-toast` Toast (including Toaster)	`78.365 kB` `23.67 kB`
`react-tooltip` Tooltip	`47.463 kB` `16.655 kB`
`react-utilities` SSRProvider	`180 B` `159 B`

_{🤖 This report was generated against d803aee2490d42f147906333f70f9867eafd452d}

size-auditor · 2023-02-13T13:14:29Z

Asset size changes

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

Baseline commit: d803aee2490d42f147906333f70f9867eafd452d (build)

fabricteam · 2023-02-13T13:18:33Z

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

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
FluentProviderWithTheme	mount	76	79	10	Possible regression

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
Avatar	mount	589	608	5000
Button	mount	299	291	5000
Field	mount	1053	1045	5000
FluentProvider	mount	643	649	5000
FluentProviderWithTheme	mount	76	79	10	Possible regression
FluentProviderWithTheme	virtual-rerender	57	62	10
FluentProviderWithTheme	virtual-rerender-with-unmount	72	71	10
InfoButton	mount	11	10	5000
MakeStyles	mount	857	874	50000
Persona	mount	1606	1572	5000
SpinButton	mount	1260	1326	5000

fabricteam · 2023-02-13T13:20:27Z

Perf Analysis (`@fluentui/react`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
BaseButton	mount	625	636	5000
Breadcrumb	mount	1638	1671	1000
Checkbox	mount	1693	1683	5000
CheckboxBase	mount	1487	1472	5000
ChoiceGroup	mount	2926	2931	5000
ComboBox	mount	670	631	1000
CommandBar	mount	6184	6199	1000
ContextualMenu	mount	13034	13619	1000
DefaultButton	mount	771	736	5000
DetailsRow	mount	2156	2174	5000
DetailsRowFast	mount	2145	2174	5000
DetailsRowNoStyles	mount	1966	2021	5000
Dialog	mount	2585	2732	1000
DocumentCardTitle	mount	228	222	1000
Dropdown	mount	1969	1961	5000
FocusTrapZone	mount	1123	1138	5000
FocusZone	mount	1073	1049	5000
GroupedList	mount	41373	41591	2
GroupedList	virtual-rerender	17781	19741	2
GroupedList	virtual-rerender-with-unmount	50724	50308	2
GroupedListV2	mount	233	223	2
GroupedListV2	virtual-rerender	203	205	2
GroupedListV2	virtual-rerender-with-unmount	215	226	2
IconButton	mount	1099	1075	5000
Label	mount	343	329	5000
Layer	mount	2688	2704	5000
Link	mount	387	392	5000
MenuButton	mount	954	954	5000
MessageBar	mount	21294	21313	5000
Nav	mount	1922	1954	1000
OverflowSet	mount	781	762	5000
Panel	mount	2036	1792	1000
Persona	mount	762	746	1000
Pivot	mount	854	878	1000
PrimaryButton	mount	836	829	5000
Rating	mount	4554	4673	5000
SearchBox	mount	875	888	5000
Shimmer	mount	1820	1871	5000
Slider	mount	1325	1339	5000
SpinButton	mount	2862	2872	5000
Spinner	mount	386	375	5000
SplitButton	mount	1809	1816	5000
Stack	mount	402	407	5000
StackWithIntrinsicChildren	mount	847	854	5000
StackWithTextChildren	mount	2618	2634	5000
SwatchColorPicker	mount	6102	6041	5000
TagPicker	mount	1427	1447	5000
Text	mount	379	375	5000
TextField	mount	926	929	5000
ThemeProvider	mount	827	822	5000
ThemeProvider	virtual-rerender	584	588	5000
ThemeProvider	virtual-rerender-with-unmount	1257	1281	5000
Toggle	mount	614	604	5000
buttonNative	mount	188	192	5000

fabricteam · 2023-02-13T13:23:32Z

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

⚠️ 1 potential perf regressions detected

Potential regressions comparing to master

Scenario	Current PR Ticks	Baseline Ticks	Ratio	Regression Analysis
AccordionMinimalPerf.default	84	84	1:1	analysis

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
ChatWithPopoverPerf.default	200	174	1.15:1
TreeWith60ListItems.default	89	82	1.09:1
DropdownManyItemsPerf.default	406	377	1.08:1
TextAreaMinimalPerf.default	296	274	1.08:1
FormMinimalPerf.default	222	210	1.06:1
ImageMinimalPerf.default	237	224	1.06:1
AvatarMinimalPerf.default	112	107	1.05:1
BoxMinimalPerf.default	203	194	1.05:1
ChatMinimalPerf.default	448	428	1.05:1
TextMinimalPerf.default	192	183	1.05:1
ButtonMinimalPerf.default	86	83	1.04:1
HeaderSlotsPerf.default	470	454	1.04:1
ListMinimalPerf.default	313	302	1.04:1
ListNestedPerf.default	328	314	1.04:1
RadioGroupMinimalPerf.default	262	253	1.04:1
CardMinimalPerf.default	314	306	1.03:1
FlexMinimalPerf.default	153	148	1.03:1
LayoutMinimalPerf.default	204	198	1.03:1
RosterPerf.default	1518	1480	1.03:1
ReactionMinimalPerf.default	213	207	1.03:1
SliderMinimalPerf.default	749	726	1.03:1
StatusMinimalPerf.default	401	388	1.03:1
TableManyItemsPerf.default	1111	1082	1.03:1
AnimationMinimalPerf.default	300	295	1.02:1
ButtonOverridesMissPerf.default	676	662	1.02:1
CheckboxMinimalPerf.default	1162	1138	1.02:1
HeaderMinimalPerf.default	206	201	1.02:1
ListWith60ListItems.default	374	367	1.02:1
AttachmentMinimalPerf.default	84	83	1.01:1
AttachmentSlotsPerf.default	639	635	1.01:1
CarouselMinimalPerf.default	267	265	1.01:1
EmbedMinimalPerf.default	1897	1869	1.01:1
ItemLayoutMinimalPerf.default	699	692	1.01:1
PopupMinimalPerf.default	346	341	1.01:1
ProviderMergeThemesPerf.default	666	658	1.01:1
ProviderMinimalPerf.default	200	199	1.01:1
VideoMinimalPerf.default	430	426	1.01:1
DropdownMinimalPerf.default	1403	1404	1:1
MenuMinimalPerf.default	502	501	1:1
SplitButtonMinimalPerf.default	2228	2217	1:1
CustomToolbarPrototype.default	1505	1510	1:1
InputMinimalPerf.default	531	536	0.99:1
ListCommonPerf.default	392	395	0.99:1
MenuButtonMinimalPerf.default	947	961	0.99:1
PortalMinimalPerf.default	85	86	0.99:1
SegmentMinimalPerf.default	193	194	0.99:1
TableMinimalPerf.default	238	241	0.99:1
ButtonSlotsPerf.default	328	333	0.98:1
ChatDuplicateMessagesPerf.default	140	143	0.98:1
DividerMinimalPerf.default	200	205	0.98:1
GridMinimalPerf.default	193	197	0.98:1
RefMinimalPerf.default	108	110	0.98:1
ToolbarMinimalPerf.default	533	546	0.98:1
DialogMinimalPerf.default	436	451	0.97:1
LabelMinimalPerf.default	212	219	0.97:1
LoaderMinimalPerf.default	184	189	0.97:1
TooltipMinimalPerf.default	1224	1257	0.97:1
IconMinimalPerf.default	374	390	0.96:1
TreeMinimalPerf.default	463	482	0.96:1
DatepickerMinimalPerf.default	3673	3851	0.95:1
AlertMinimalPerf.default	156	166	0.94:1
SkeletonMinimalPerf.default	185	196	0.94:1

fabricteam · 2023-02-13T13:33:30Z

🕵 fluentuiv8 No visual regressions between this PR and main

codesandbox-ci · 2023-02-13T13:45:02Z

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 4735f18:

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

fabricteam · 2023-02-13T13:54:41Z

🕵 fluentuiv9 No visual regressions between this PR and main

monosize.config.mjs

azure-pipelines.bundlesize.yml

fabricteam · 2023-07-17T16:43:20Z

🕵 fluentuiv8 No visual regressions between this PR and main

fabricteam · 2023-07-17T16:48:20Z

🕵 FluentUIV0 No visual regressions between this PR and main

fabricteam · 2023-07-17T16:50:19Z

🕵 fluentuiv9 No visual regressions between this PR and main

package.json

Hotell

lets admin merge once conversations are resolved.

I added reference to existing issue planned for FY24 on v-build roadmap. ty

* master: (32 commits) chore: remove @fluentui/bundle-size (microsoft#28601) Breadcrumb UI adjustments (microsoft#28578) feat(tools): re-generate react-components.api.md when preparing 1st stable release (microsoft#28561) perf(tools): make dependency-mismatch execution 90% faster and ignore */>=9.0.0-alpha versions (microsoft#28597) Table/DataGrid: keyboard resizing improvements (microsoft#28493) docs(react-tooltip): Add info icon + tooltip story to Tooltip stories (microsoft#28611) chore: Updating @fluentui/react-icons to version 2.0.207 (microsoft#28590) feat: allSelectedRows and someSelectedRows should be more reliable (microsoft#28577) add vr test to react-tags (microsoft#28484) applying package updates chore: migrate to monosize (microsoft#26826) fix(react-conformance): add @swc/helpers to deps instead of tslib as we use swc for transpilation (microsoft#28599) fix: MenuItem content should be spaced 12px from the boundary (microsoft#28162) feat: implements selection (microsoft#28497) bugfix: moves handleBackdropClick from defaultProps to an override (microsoft#28579) Fix empty CSS creation (microsoft#28566) chore: replace plop with nx within create-* aliases in root package.json (microsoft#28575) applying package updates fix: High contrast mode hover style icon fixes in react-button components (microsoft#28156) SplitButton: updated border right token for primary variant (microsoft#28555) ...

msft-fluent-ui-bot assigned micahgodbolt Feb 13, 2023

layershifter force-pushed the chore/replace-bundlesize branch from 6187ca8 to 47cbe74 Compare February 13, 2023 12:56

layershifter unassigned micahgodbolt Feb 13, 2023

layershifter force-pushed the chore/replace-bundlesize branch from 47cbe74 to b171227 Compare February 13, 2023 13:01

layershifter force-pushed the chore/replace-bundlesize branch from b171227 to 31f2857 Compare February 13, 2023 13:14

layershifter force-pushed the chore/replace-bundlesize branch from 31f2857 to d751cf0 Compare February 13, 2023 13:28

layershifter force-pushed the chore/replace-bundlesize branch from d751cf0 to 27320a9 Compare February 13, 2023 14:23

Hotell reviewed Feb 13, 2023

View reviewed changes

monosize.config.mjs Show resolved Hide resolved

fabricteam reviewed Feb 13, 2023

View reviewed changes

azure-pipelines.bundlesize.yml Show resolved Hide resolved

layershifter force-pushed the chore/replace-bundlesize branch from 27320a9 to a5d4c8d Compare July 17, 2023 16:29

github-actions bot added this to the July Project Cycle Q3 2023 milestone Jul 17, 2023

layershifter marked this pull request as ready for review July 17, 2023 17:35

layershifter requested review from a team, behowell, khmakoto, sopranopillow and tomi-msft as code owners July 17, 2023 17:35

layershifter requested review from a team, micahgodbolt, smhigley and spmonahan as code owners July 17, 2023 17:35

behowell approved these changes Jul 17, 2023

View reviewed changes

Hotell reviewed Jul 18, 2023

View reviewed changes

package.json Show resolved Hide resolved

Hotell approved these changes Jul 18, 2023

View reviewed changes

ling1726 approved these changes Jul 18, 2023

View reviewed changes

chore: migrate to monosize

4735f18

layershifter force-pushed the chore/replace-bundlesize branch from a5d4c8d to 4735f18 Compare July 20, 2023 14:20

layershifter enabled auto-merge (squash) July 20, 2023 14:20

layershifter merged commit 5a4b167 into microsoft:master Jul 20, 2023

layershifter deleted the chore/replace-bundlesize branch July 20, 2023 15:09

layershifter mentioned this pull request Jul 20, 2023

chore: remove @fluentui/bundle-size #28601

Merged

Conversation

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

Uh oh!

New Behavior

Uh oh!

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

Uh oh!

Asset size changes

Uh oh!

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

Uh oh!

Perf Analysis (@fluentui/react-northstar)

Potential regressions comparing to master

Uh oh!

fabricteam commented Feb 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!

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

Uh oh!

Uh oh!

fabricteam commented Feb 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!

Uh oh!

Uh oh!

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

Uh oh!

🕵 FluentUIV0 No visual regressions between this PR and main

Uh oh!

fabricteam commented Jul 17, 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!

Uh oh!

Hotell left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

layershifter commented Feb 13, 2023 •

edited by Hotell

Loading

fabricteam commented Feb 13, 2023 •

edited

Loading

size-auditor bot commented Feb 13, 2023 •

edited

Loading

fabricteam commented Feb 13, 2023 •

edited

Loading

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

fabricteam commented Feb 13, 2023 •

edited

Loading

Perf Analysis (`@fluentui/react`)

fabricteam commented Feb 13, 2023 •

edited

Loading

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

fabricteam commented Feb 13, 2023 •

edited

Loading

codesandbox-ci bot commented Feb 13, 2023 •

edited

Loading

fabricteam commented Feb 13, 2023 •

edited

Loading

fabricteam commented Jul 17, 2023 •

edited

Loading

fabricteam commented Jul 17, 2023 •

edited

Loading

fabricteam commented Jul 17, 2023 •

edited

Loading