fix(screener-build workflow): scope package to build for v9 VR tests to speed up perf by TristanWatanabe · Pull Request #25494 · microsoft/fluentui

TristanWatanabe · 2022-11-02T18:31:05Z

Issue:

Current workflow setup introduced in chore(vr-tests-v9): Convert Button VR tests to CSF #25108 tries to build @fluentui/vr-tests-react-components and all of its dependencies which slows down workflow considerably.

Changes:

only build what's needed (@fluentui/react-storybook-addon) to speed up workflow completion.

codesandbox-ci · 2022-11-02T18:43:57Z

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 2577d57:

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

size-auditor · 2022-11-02T18:46:48Z

Asset size changes

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

Baseline commit: 008d52daec5cac478512e27ecb7a51ec42862653 (build)

fabricteam · 2022-11-02T18:50:11Z

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

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
Avatar	mount	1318	1307	5000
Button	mount	935	941	5000
FluentProvider	mount	1577	1555	5000
FluentProviderWithTheme	mount	643	637	10
FluentProviderWithTheme	virtual-rerender	587	593	10
FluentProviderWithTheme	virtual-rerender-with-unmount	623	623	10
MakeStyles	mount	1921	1933	50000
SpinButton	mount	2525	2539	5000

fabricteam · 2022-11-02T18:54:34Z

📊 Bundle size report

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
`global-context` createContext	`533 B` `341 B`
`global-context` createContextSelector	`554 B` `348 B`
`priority-overflow` createOverflowManager	`3.153 kB` `1.299 kB`
`react-accordion` Accordion (including children components)	`79.243 kB` `24.436 kB`
`react-alert` Alert	`84.688 kB` `21.233 kB`
`react-avatar` Avatar	`48.874 kB` `13.864 kB`
`react-avatar` AvatarGroup	`14.996 kB` `6.013 kB`
`react-avatar` AvatarGroupItem	`63.452 kB` `17.959 kB`
`react-badge` Badge	`22.646 kB` `7.228 kB`
`react-badge` CounterBadge	`23.536 kB` `7.512 kB`
`react-badge` PresenceBadge	`24.096 kB` `7.09 kB`
`react-button` Button	`36.849 kB` `9.907 kB`
`react-button` CompoundButton	`43.874 kB` `11.123 kB`
`react-button` MenuButton	`39.543 kB` `10.807 kB`
`react-button` SplitButton	`46.989 kB` `12.192 kB`
`react-button` ToggleButton	`52.716 kB` `11.381 kB`
`react-card` Card - All	`67.664 kB` `19.635 kB`
`react-card` Card	`63.346 kB` `18.539 kB`
`react-card` CardFooter	`8.607 kB` `3.622 kB`
`react-card` CardHeader	`9.65 kB` `3.962 kB`
`react-card` CardPreview	`8.708 kB` `3.678 kB`
`react-combobox` Combobox (including child components)	`76.153 kB` `24.665 kB`
`react-combobox` Dropdown (including child components)	`75.885 kB` `24.635 kB`
`react-components` react-components: Button, FluentProvider & webLightTheme	`62.94 kB` `17.663 kB`
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`189.906 kB` `52.963 kB`
`react-components` react-components: FluentProvider & webLightTheme	`33.446 kB` `11.033 kB`
`react-dialog` Dialog (including children components)	`83.147 kB` `24.799 kB`
`react-divider` Divider	`16.505 kB` `5.925 kB`
`react-image` Image	`10.826 kB` `4.286 kB`
`react-infobutton` InfoButton	`7.742 kB` `3.265 kB`
`react-input` Input	`24.428 kB` `7.899 kB`
`react-label` Label	`9.384 kB` `3.883 kB`
`react-link` Link	`11.852 kB` `4.888 kB`
`react-menu` Menu (including children components)	`117.089 kB` `36.188 kB`
`react-menu` Menu (including selectable components)	`120.158 kB` `36.712 kB`
`react-overflow` hooks only	`11.004 kB` `4.188 kB`
`react-persona` Persona	`53.992 kB` `15.25 kB`
`react-popover` Popover	`103.672 kB` `31.871 kB`
`react-portal` Portal	`10.495 kB` `3.851 kB`
`react-portal-compat` PortalCompatProvider	`5.857 kB` `1.978 kB`
`react-positioning` usePositioning	`19.826 kB` `7.417 kB`
`react-progress` Progress	`13.131 kB` `5.039 kB`
`react-provider` FluentProvider	`15.807 kB` `5.909 kB`
`react-radio` Radio	`36.436 kB` `12.126 kB`
`react-radio` RadioGroup	`14.294 kB` `5.723 kB`
`react-select` Select	`23.255 kB` `7.954 kB`
`react-slider` Slider	`32.108 kB` `10.195 kB`
`react-spinbutton` SpinButton	`45.826 kB` `12.858 kB`
`react-spinner` Spinner	`20.023 kB` `6.461 kB`
`react-switch` Switch	`33.388 kB` `10.578 kB`
`react-text` Text - Default	`11.828 kB` `4.627 kB`
`react-text` Text - Wrappers	`15.138 kB` `5.064 kB`
`react-textarea` Textarea	`25.687 kB` `8.331 kB`
`react-theme` Single theme token import	`69 B` `89 B`
`react-theme` Teams: all themes	`29.65 kB` `6.444 kB`
`react-theme` Teams: Light theme	`17.486 kB` `5.057 kB`
`react-tooltip` Tooltip	`42.032 kB` `14.739 kB`
`react-utilities` SSRProvider	`180 B` `159 B`

_{🤖 This report was generated against 008d52daec5cac478512e27ecb7a51ec42862653}

fabricteam · 2022-11-02T18:55:01Z

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

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
ChatWithPopoverPerf.default	302	271	1.11:1
TableMinimalPerf.default	361	341	1.06:1
TreeWith60ListItems.default	133	126	1.06:1
ButtonMinimalPerf.default	139	133	1.05:1
AttachmentSlotsPerf.default	902	871	1.04:1
ButtonSlotsPerf.default	446	429	1.04:1
ChatDuplicateMessagesPerf.default	219	210	1.04:1
DividerMinimalPerf.default	317	305	1.04:1
FlexMinimalPerf.default	248	239	1.04:1
RefMinimalPerf.default	195	188	1.04:1
CardMinimalPerf.default	473	458	1.03:1
ChatMinimalPerf.default	648	631	1.03:1
HeaderMinimalPerf.default	322	313	1.03:1
TooltipMinimalPerf.default	1913	1850	1.03:1
AccordionMinimalPerf.default	123	121	1.02:1
ItemLayoutMinimalPerf.default	984	967	1.02:1
LabelMinimalPerf.default	343	337	1.02:1
LayoutMinimalPerf.default	316	311	1.02:1
ListMinimalPerf.default	458	450	1.02:1
MenuButtonMinimalPerf.default	1355	1328	1.02:1
SegmentMinimalPerf.default	311	304	1.02:1
StatusMinimalPerf.default	610	598	1.02:1
AnimationMinimalPerf.default	470	466	1.01:1
ButtonOverridesMissPerf.default	1017	1003	1.01:1
CarouselMinimalPerf.default	366	362	1.01:1
DialogMinimalPerf.default	687	683	1.01:1
DropdownMinimalPerf.default	2170	2159	1.01:1
FormMinimalPerf.default	317	314	1.01:1
ListWith60ListItems.default	490	484	1.01:1
MenuMinimalPerf.default	734	726	1.01:1
PopupMinimalPerf.default	558	555	1.01:1
ProviderMergeThemesPerf.default	1002	997	1.01:1
ProviderMinimalPerf.default	323	321	1.01:1
CustomToolbarPrototype.default	2179	2152	1.01:1
BoxMinimalPerf.default	297	297	1:1
CheckboxMinimalPerf.default	1534	1533	1:1
DatepickerMinimalPerf.default	4716	4716	1:1
DropdownManyItemsPerf.default	537	537	1:1
EmbedMinimalPerf.default	2643	2631	1:1
GridMinimalPerf.default	295	296	1:1
HeaderSlotsPerf.default	679	678	1:1
InputMinimalPerf.default	853	853	1:1
ListCommonPerf.default	509	509	1:1
LoaderMinimalPerf.default	264	265	1:1
RosterPerf.default	1703	1704	1:1
SliderMinimalPerf.default	1225	1230	1:1
TableManyItemsPerf.default	1571	1575	1:1
ToolbarMinimalPerf.default	788	791	1:1
VideoMinimalPerf.default	614	616	1:1
AttachmentMinimalPerf.default	123	124	0.99:1
ListNestedPerf.default	456	461	0.99:1
PortalMinimalPerf.default	141	142	0.99:1
ReactionMinimalPerf.default	326	328	0.99:1
TextMinimalPerf.default	294	297	0.99:1
TextAreaMinimalPerf.default	403	407	0.99:1
TreeMinimalPerf.default	696	705	0.99:1
AvatarMinimalPerf.default	158	163	0.97:1
ImageMinimalPerf.default	337	348	0.97:1
SkeletonMinimalPerf.default	293	301	0.97:1
SplitButtonMinimalPerf.default	3283	3375	0.97:1
IconMinimalPerf.default	556	572	0.97:1
AlertMinimalPerf.default	222	231	0.96:1
RadioGroupMinimalPerf.default	376	392	0.96:1

fabricteam · 2022-11-02T19:15:51Z

Perf Analysis (`@fluentui/react`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
BaseButton	mount	1188	1087	5000
Breadcrumb	mount	2585	2944	1000
Checkbox	mount	2570	2530	5000
CheckboxBase	mount	2241	2233	5000
ChoiceGroup	mount	4333	4387	5000
ComboBox	mount	1281	1218	1000
CommandBar	mount	9044	9202	1000
ContextualMenu	mount	10575	10234	1000
DefaultButton	mount	1266	1320	5000
DetailsRow	mount	3332	3489	5000
DetailsRowFast	mount	3504	3584	5000
DetailsRowNoStyles	mount	3391	3364	5000
Dialog	mount	3008	3045	1000
DocumentCardTitle	mount	543	587	1000
Dropdown	mount	2908	3106	5000
FocusTrapZone	mount	1886	1924	5000
FocusZone	mount	1927	1844	5000
GroupedList	mount	1711	2119	2
GroupedList	virtual-rerender	1051	1039	2
GroupedList	virtual-rerender-with-unmount	1552	1503	2
GroupedListV2	mount	500	526	2
GroupedListV2	virtual-rerender	504	522	2
GroupedListV2	virtual-rerender-with-unmount	529	546	2
IconButton	mount	1883	1755	5000
Label	mount	725	659	5000
Layer	mount	4149	4126	5000
Link	mount	830	726	5000
MenuButton	mount	1621	1628	5000
MessageBar	mount	2384	2258	5000
Nav	mount	3238	3007	1000
OverflowSet	mount	1331	1228	5000
Panel	mount	2484	2557	1000
Persona	mount	1166	1198	1000
Pivot	mount	1546	1577	1000
PrimaryButton	mount	1446	1491	5000
Rating	mount	6632	6756	5000
SearchBox	mount	1493	1416	5000
Shimmer	mount	2576	2765	5000
Slider	mount	2103	1886	5000
SpinButton	mount	4502	4565	5000
Spinner	mount	739	801	5000
SplitButton	mount	3071	3044	5000
Stack	mount	827	752	5000
StackWithIntrinsicChildren	mount	2351	2359	5000
StackWithTextChildren	mount	4767	4595	5000
SwatchColorPicker	mount	9722	10078	5000
TagPicker	mount	2640	2562	5000
TeachingBubble	mount	85008	87173	5000
Text	mount	744	745	5000
TextField	mount	1558	1437	5000
ThemeProvider	mount	1421	1454	5000
ThemeProvider	virtual-rerender	1083	997	5000
ThemeProvider	virtual-rerender-with-unmount	1992	2106	5000
Toggle	mount	1024	1054	5000
buttonNative	mount	541	526	5000

TristanWatanabe · 2022-11-02T19:38:28Z

/azp run

azure-pipelines · 2022-11-02T19:38:44Z

Azure Pipelines successfully started running 3 pipeline(s).

* master: feat(scripts): improve API violation reporting (microsoft#25356) applying package updates fix: Preventing blanket selectors from Fabric component from being applied via new preventBlanketFontInheritance prop (microsoft#25453) feat(react-infobutton): Add initial implementation (microsoft#25247) chore(react-avatar, avatar-context): migrate to new package structure (microsoft#25473) chore(react-portal, portal-compat, portal-compat-context): migrate to new package structure (microsoft#25481) docs(react-infobutton): Adding component's spec (microsoft#25251) fix(screener-build workflow): scope package to build for v9 VR tests to speed up perf (microsoft#25494) chore(vr-tests-v9): Convert Button VR tests to CSF (microsoft#25108)

…to speed up perf (microsoft#25494)

TristanWatanabe added 2 commits November 1, 2022 22:47

fix: optimize what gets built to make screener-build workflow faster

1045215

nit space

2577d57

TristanWatanabe self-assigned this Nov 2, 2022

TristanWatanabe requested a review from a team as a code owner November 2, 2022 18:31

github-actions bot added this to the October Project Cycle Q4 2022 milestone Nov 2, 2022

TristanWatanabe changed the title ~~fix(screener-build workflow): scope package to build to run v9 VR tests~~ fix(screener-build workflow): scope package to build for v9 VR tests to speed up perf Nov 2, 2022

ling1726 approved these changes Nov 2, 2022

View reviewed changes

TristanWatanabe closed this Nov 2, 2022

TristanWatanabe reopened this Nov 2, 2022

TristanWatanabe closed this Nov 2, 2022

TristanWatanabe reopened this Nov 2, 2022

TristanWatanabe merged commit ea1842b into microsoft:master Nov 2, 2022

TristanWatanabe deleted the optimize-screener-build-workflow branch November 2, 2022 20:36

NotWoods pushed a commit to NotWoods/fluentui that referenced this pull request Nov 18, 2022

fix(screener-build workflow): scope package to build for v9 VR tests …

761d0a8

…to speed up perf (microsoft#25494)

Hotell pushed a commit to Hotell/fluentui that referenced this pull request Feb 9, 2023

fix(screener-build workflow): scope package to build for v9 VR tests …

a3200bd

…to speed up perf (microsoft#25494)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(screener-build workflow): scope package to build for v9 VR tests to speed up perf#25494

fix(screener-build workflow): scope package to build for v9 VR tests to speed up perf#25494
TristanWatanabe merged 2 commits intomicrosoft:masterfrom
TristanWatanabe:optimize-screener-build-workflow

TristanWatanabe commented Nov 2, 2022 •

edited

Loading

Uh oh!

codesandbox-ci bot commented Nov 2, 2022 •

edited

Loading

Uh oh!

size-auditor bot commented Nov 2, 2022 •

edited

Loading

Uh oh!

fabricteam commented Nov 2, 2022 •

edited

Loading

Uh oh!

fabricteam commented Nov 2, 2022 •

edited

Loading

Uh oh!

fabricteam commented Nov 2, 2022 •

edited

Loading

Uh oh!

fabricteam commented Nov 2, 2022 •

edited

Loading

Uh oh!

TristanWatanabe commented Nov 2, 2022

Uh oh!

azure-pipelines bot commented Nov 2, 2022

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

TristanWatanabe commented Nov 2, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Issue:

Changes:

Uh oh!

codesandbox-ci bot commented Nov 2, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

size-auditor bot commented Nov 2, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Asset size changes

Uh oh!

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

Uh oh!

📊 Bundle size report

Uh oh!

fabricteam commented Nov 2, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Perf Analysis (@fluentui/react-northstar)

Uh oh!

fabricteam commented Nov 2, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Perf Analysis (@fluentui/react)

Uh oh!

TristanWatanabe commented Nov 2, 2022

Uh oh!

azure-pipelines bot commented Nov 2, 2022

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

TristanWatanabe commented Nov 2, 2022 •

edited

Loading

codesandbox-ci bot commented Nov 2, 2022 •

edited

Loading

size-auditor bot commented Nov 2, 2022 •

edited

Loading

fabricteam commented Nov 2, 2022 •

edited

Loading

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

fabricteam commented Nov 2, 2022 •

edited

Loading

fabricteam commented Nov 2, 2022 •

edited

Loading

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

fabricteam commented Nov 2, 2022 •

edited

Loading

Perf Analysis (`@fluentui/react`)