Add separate react-components perf test package #21873

TristanWatanabe · 2022-02-25T19:34:55Z

Current Behavior

@fluentui/react and @fluentui/react-components perf tests are entangled together in one perf-test package which leads to unnecessary builds and perf test runs when only one of these libraries are modified by a PR.

New Behavior

Creates a new perf-test package strictly for @fluentui/react-components called @fluentui/perf-test-react-components.
- Moves any perf test scenarios that only apply to @fluentui/react-components to the new perf test package and removes them from the v8 perf test package.
- Removes any v9 dependencies from the v8 perf test package.
- Adds new pipeline job strictly for running the v9 perf test package.

Related Issue(s)

Part of #21697

codesandbox-ci · 2022-02-25T19:39:55Z

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

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

fabricteam · 2022-02-25T19:46:23Z

📊 Bundle size report

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
`react-accordion` Accordion (including children components)	`73.035 kB` `22.11 kB`
`react-avatar` Avatar	`44.982 kB` `13.059 kB`
`react-badge` Badge	`20.869 kB` `6.549 kB`
`react-badge` CounterBadge	`21.737 kB` `6.843 kB`
`react-badge` PresenceBadge	`21.866 kB` `6.536 kB`
`react-button` Button	`28.013 kB` `8.059 kB`
`react-button` CompoundButton	`33.336 kB` `9.037 kB`
`react-button` MenuButton	`29.763 kB` `8.656 kB`
`react-button` SplitButton	`36.235 kB` `9.857 kB`
`react-button` ToggleButton	`37.395 kB` `8.68 kB`
`react-card` Card - All	`53.205 kB` `15.27 kB`
`react-card` Card	`48.898 kB` `14.083 kB`
`react-card` CardFooter	`7.653 kB` `3.246 kB`
`react-card` CardHeader	`8.931 kB` `3.689 kB`
`react-card` CardPreview	`7.626 kB` `3.272 kB`
`react-combobox` Combobox	`6.813 kB` `2.895 kB`
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`172.513 kB` `48.34 kB`
`react-components` react-components: FluentProvider & webLightTheme	`32.526 kB` `10.645 kB`
`react-divider` Divider	`15.301 kB` `5.532 kB`
`react-image` Image	`10.105 kB` `3.952 kB`
`react-input` Input	`21.538 kB` `7.134 kB`
`react-label` Label	`8.341 kB` `3.487 kB`
`react-link` Link	`11.102 kB` `4.504 kB`
`react-menu` Menu (including children components)	`103.976 kB` `31.998 kB`
`react-menu` Menu (including selectable components)	`106.331 kB` `32.361 kB`
`react-popover` Popover	`96.776 kB` `29.553 kB`
`react-portal` Portal	`6.267 kB` `2.168 kB`
`react-positioning` usePopper	`23.21 kB` `8.084 kB`
`react-provider` FluentProvider	`14.009 kB` `5.25 kB`
`react-select` Select	`7.754 kB` `3.258 kB`
`react-slider` Slider	`23.351 kB` `7.894 kB`
`react-spinner` Spinner	`6.811 kB` `2.895 kB`
`react-switch` Switch	`22.598 kB` `7.642 kB`
`react-text` Text - Default	`10.793 kB` `4.23 kB`
`react-text` Text - Wrappers	`14.107 kB` `4.573 kB`
`react-theme` Single theme token import	`69 B` `89 B`
`react-theme` Teams: all themes	`29.426 kB` `6.551 kB`
`react-theme` Teams: Light theme	`18.42 kB` `5.27 kB`
`react-tooltip` Tooltip	`42.76 kB` `14.701 kB`
`react-utilities` SSRProvider	`189 B` `161 B`

_{🤖 This report was generated against 6efe3f6054a3b055ebe37d67a5a60934b6945cb8}

fabricteam · 2022-02-25T19:46:29Z

Perf Analysis (`@fluentui/react`)

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
BaseButton	mount	1006	818	5000	Possible regression
Checkbox	mount	1522	1301	5000	Possible regression
CheckboxBase	mount	1295	1135	5000	Possible regression
ComboBox	mount	1070	928	1000	Possible regression
DefaultButton	mount	1213	996	5000	Possible regression
DocumentCardTitle	mount	365	142	1000	Possible regression
FocusTrapZone	mount	1824	1585	5000	Possible regression
FocusZone	mount	1810	1623	5000	Possible regression
IconButton	mount	1765	1554	5000	Possible regression
Label	mount	499	328	5000	Possible regression
Link	mount	628	417	5000	Possible regression
MenuButton	mount	1520	1270	5000	Possible regression
OverflowSet	mount	1157	960	5000	Possible regression
Persona	mount	960	736	1000	Possible regression
Pivot	mount	1462	1271	1000	Possible regression
PrimaryButton	mount	1359	1147	5000	Possible regression
SearchBox	mount	1336	1168	5000	Possible regression
Slider	mount	1925	1736	5000	Possible regression
Spinner	mount	571	371	5000	Possible regression
Stack	mount	659	460	5000	Possible regression
Text	mount	586	380	5000	Possible regression
TextField	mount	1462	1246	5000	Possible regression
ThemeProvider	mount	1243	1088	5000	Possible regression
ThemeProvider	virtual-rerender	752	566	5000	Possible regression
Toggle	mount	900	701	5000	Possible regression
buttonNative	mount	305	104	5000	Possible regression

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
BaseButton	mount	1006	818	5000	Possible regression
Breadcrumb	mount	2568	2318	1000
Checkbox	mount	1522	1301	5000	Possible regression
CheckboxBase	mount	1295	1135	5000	Possible regression
ChoiceGroup	mount	4355	4123	5000
ComboBox	mount	1070	928	1000	Possible regression
CommandBar	mount	9485	9206	1000
ContextualMenu	mount	11274	11069	1000
DefaultButton	mount	1213	996	5000	Possible regression
DetailsRow	mount	3555	3381	5000
DetailsRowFast	mount	3496	3349	5000
DetailsRowNoStyles	mount	3434	3248	5000
Dialog	mount	2195	1985	1000
DocumentCardTitle	mount	365	142	1000	Possible regression
Dropdown	mount	3094	2901	5000
FocusTrapZone	mount	1824	1585	5000	Possible regression
FocusZone	mount	1810	1623	5000	Possible regression
IconButton	mount	1765	1554	5000	Possible regression
Label	mount	499	328	5000	Possible regression
Layer	mount	2829	2571	5000
Link	mount	628	417	5000	Possible regression
MenuButton	mount	1520	1270	5000	Possible regression
MessageBar	mount	2062	1849	5000
Nav	mount	3161	2930	1000
OverflowSet	mount	1157	960	5000	Possible regression
Panel	mount	2112	1903	1000
Persona	mount	960	736	1000	Possible regression
Pivot	mount	1462	1271	1000	Possible regression
PrimaryButton	mount	1359	1147	5000	Possible regression
Rating	mount	6966	6713	5000
SearchBox	mount	1336	1168	5000	Possible regression
Shimmer	mount	2399	2159	5000
Slider	mount	1925	1736	5000	Possible regression
SpinButton	mount	4729	4458	5000
Spinner	mount	571	371	5000	Possible regression
SplitButton	mount	3038	2825	5000
Stack	mount	659	460	5000	Possible regression
StackWithIntrinsicChildren	mount	2235	1988	5000
StackWithTextChildren	mount	4756	4579	5000
SwatchColorPicker	mount	10541	10294	5000
TagPicker	mount	2583	2351	5000
TeachingBubble	mount	55092	51448	5000
Text	mount	586	380	5000	Possible regression
TextField	mount	1462	1246	5000	Possible regression
ThemeProvider	mount	1243	1088	5000	Possible regression
ThemeProvider	virtual-rerender	752	566	5000	Possible regression
ThemeProvider	virtual-rerender-with-unmount	1810	1612	5000
Toggle	mount	900	701	5000	Possible regression
buttonNative	mount	305	104	5000	Possible regression

fabricteam · 2022-02-25T19:53:40Z

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

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
AccordionMinimalPerf.default	193	169	1.14:1
FlexMinimalPerf.default	342	310	1.1:1
ChatWithPopoverPerf.default	468	438	1.07:1
DividerMinimalPerf.default	429	402	1.07:1
CardMinimalPerf.default	671	636	1.06:1
HeaderMinimalPerf.default	425	400	1.06:1
ListMinimalPerf.default	594	560	1.06:1
RefMinimalPerf.default	266	250	1.06:1
BoxMinimalPerf.default	401	381	1.05:1
ButtonMinimalPerf.default	220	209	1.05:1
FormMinimalPerf.default	505	480	1.05:1
LabelMinimalPerf.default	455	434	1.05:1
TextMinimalPerf.default	405	387	1.05:1
AnimationMinimalPerf.default	609	586	1.04:1
AvatarMinimalPerf.default	227	218	1.04:1
ButtonSlotsPerf.default	629	607	1.04:1
GridMinimalPerf.default	393	379	1.04:1
SliderMinimalPerf.default	1837	1765	1.04:1
TreeWith60ListItems.default	205	198	1.04:1
CarouselMinimalPerf.default	540	524	1.03:1
ChatMinimalPerf.default	841	817	1.03:1
DatepickerMinimalPerf.default	6157	5997	1.03:1
DialogMinimalPerf.default	856	828	1.03:1
DropdownManyItemsPerf.default	795	772	1.03:1
ListNestedPerf.default	638	620	1.03:1
MenuMinimalPerf.default	979	952	1.03:1
MenuButtonMinimalPerf.default	1898	1846	1.03:1
PopupMinimalPerf.default	687	667	1.03:1
SegmentMinimalPerf.default	404	392	1.03:1
TooltipMinimalPerf.default	1176	1141	1.03:1
ButtonOverridesMissPerf.default	1872	1839	1.02:1
HeaderSlotsPerf.default	866	853	1.02:1
ReactionMinimalPerf.default	427	420	1.02:1
TextAreaMinimalPerf.default	599	586	1.02:1
ChatDuplicateMessagesPerf.default	352	347	1.01:1
EmbedMinimalPerf.default	4535	4499	1.01:1
ImageMinimalPerf.default	451	445	1.01:1
LayoutMinimalPerf.default	417	412	1.01:1
LoaderMinimalPerf.default	758	753	1.01:1
SplitButtonMinimalPerf.default	4853	4806	1.01:1
StatusMinimalPerf.default	765	754	1.01:1
IconMinimalPerf.default	690	681	1.01:1
TableManyItemsPerf.default	2209	2178	1.01:1
TableMinimalPerf.default	464	459	1.01:1
CustomToolbarPrototype.default	4426	4372	1.01:1
TreeMinimalPerf.default	908	902	1.01:1
VideoMinimalPerf.default	738	729	1.01:1
CheckboxMinimalPerf.default	2875	2875	1:1
DropdownMinimalPerf.default	3227	3214	1:1
ListWith60ListItems.default	723	721	1:1
ProviderMergeThemesPerf.default	1801	1794	1:1
ToolbarMinimalPerf.default	1089	1092	1:1
ItemLayoutMinimalPerf.default	1324	1340	0.99:1
ListCommonPerf.default	732	741	0.99:1
ProviderMinimalPerf.default	1234	1247	0.99:1
RadioGroupMinimalPerf.default	514	517	0.99:1
AttachmentMinimalPerf.default	185	188	0.98:1
AttachmentSlotsPerf.default	1165	1190	0.98:1
InputMinimalPerf.default	1368	1394	0.98:1
RosterPerf.default	1244	1269	0.98:1
PortalMinimalPerf.default	194	197	0.98:1
SkeletonMinimalPerf.default	389	401	0.97:1
AlertMinimalPerf.default	302	329	0.92:1

size-auditor · 2022-02-25T19:57:48Z

Asset size changes

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

Baseline commit: 6efe3f6054a3b055ebe37d67a5a60934b6945cb8 (build)

fabricteam · 2022-02-25T21:06:23Z

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

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
Avatar	mount	1131	1106	5000	Possible regression
Button	mount	288	655	5000	Possible regression
FluentProvider	mount	307	2142	5000	Possible regression
FluentProviderWithTheme	mount	370	327	10	Possible regression
FluentProviderWithTheme	virtual-rerender	318	267	10	Possible regression
FluentProviderWithTheme	virtual-rerender-with-unmount	401	337	10	Possible regression
MakeStyles	mount	1993	1844	50000	Possible regression

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
Avatar	mount	1131	1106	5000	Possible regression
Button	mount	288	655	5000	Possible regression
FluentProvider	mount	307	2142	5000	Possible regression
FluentProviderWithTheme	mount	370	327	10	Possible regression
FluentProviderWithTheme	virtual-rerender	318	267	10	Possible regression
FluentProviderWithTheme	virtual-rerender-with-unmount	401	337	10	Possible regression
MakeStyles	mount	1993	1844	50000	Possible regression

TristanWatanabe · 2022-02-25T21:11:06Z

apps/perf-test-react-components/package.json

+{
+  "name": "@fluentui/perf-test-react-components",
+  "description": "Perf tests for @fluentui/react-components.",
+  "version": "9.0.0-rc.0",


Set the version to 9.0.0-rc.0 so that v9 dependencies get bumped whenever we have a new v9 release. Similar to this #21805

Hotell · 2022-03-02T11:36:11Z

I guess we don't need to use Next suffix anymore ?

apps/perf-test-react-components/.gitignore

Hotell · 2022-03-02T11:41:39Z

azure-pipelines.perf-test.yml

@@ -22,15 +22,19 @@ jobs:

      - script: |
          NorthstarAffected=$(yarn --silent check-if-v0-v8-v9-affected --@fluentui/react-northstar)
-          V8Affected=$(yarn --silent check-if-v0-v8-v9-affected --@fluentui/react --@fluentui/react-components)
+          V8Affected=$(yarn --silent check-if-v0-v8-v9-affected --@fluentui/react)


this is obsolete right (yarn --silent check-if-v0-v8-v9-affected) ? we use node directly to run the script

I initially used node to run the script in the pipeline since using yarn created a lot of extra churn. Ling gave me the secret sauce of using --silent to get rid of that churn so I went back to using a script alias here 😄. Although I'm fine just getting rid of the alias and just using node here to run the script too if you think that's better

azure-pipelines.perf-test.yml

apps/perf-test-react-components/tsconfig.json

apps/perf-test-react-components/webpack.config.js

apps/perf-test-react-components/tasks/perf-test.ts

Hotell

me gusta

TristanWatanabe added 2 commits February 25, 2022 10:45

Create v9 perf test pkg and remove v9 deps from v8

82749ee

Add seperate v9 pipeline job

f4e55c4

msft-fluent-ui-bot assigned tomi-msft Feb 25, 2022

TristanWatanabe mentioned this pull request Feb 25, 2022

Improve Perf-Test Pipeline Speed #21697

Closed

3 tasks

update workspace json

342eb54

fix perf test results url

0a7a14f

TristanWatanabe force-pushed the create-vNext-perf-test branch from 7cacd43 to 0a7a14f Compare February 25, 2022 20:35

TristanWatanabe added 2 commits February 25, 2022 12:53

Change urlForMaster to /perf-test for now

c8cf96e

Add readme file (copied from perf-test)

7e4925a

TristanWatanabe commented Feb 25, 2022

View reviewed changes

TristanWatanabe force-pushed the create-vNext-perf-test branch from 37e9670 to 7e4925a Compare February 25, 2022 21:34

TristanWatanabe marked this pull request as ready for review February 25, 2022 22:16

TristanWatanabe requested a review from a team as a code owner February 25, 2022 22:16

andrefcdias requested a review from Hotell March 1, 2022 13:10

Hotell reviewed Mar 2, 2022

View reviewed changes

TristanWatanabe added 5 commits March 2, 2022 10:02

update TS config and remove pipeline comments

184be29

remove working directory from pipeline

6234e1f

remove gitignore files

60d1c01

remove Next suffix

d8d48da

Merge branch 'master' into create-vNext-perf-test

e102d32

TristanWatanabe commented Mar 2, 2022

View reviewed changes

apps/perf-test-react-components/tasks/perf-test.ts Show resolved Hide resolved

TristanWatanabe requested a review from Hotell March 4, 2022 14:22

Hotell approved these changes Mar 9, 2022

View reviewed changes

TristanWatanabe added 4 commits March 9, 2022 07:23

bump package json

fcb6996

Merge branch 'master' into create-vNext-perf-test

ecd5b51

update package.json

80648f7

update tsconfig to use es2016

0b2f5ac

TristanWatanabe merged commit b7219af into microsoft:master Mar 9, 2022

TristanWatanabe deleted the create-vNext-perf-test branch March 9, 2022 18:58

TristanWatanabe mentioned this pull request Mar 9, 2022

perf-test v9: update URL to point to newly dedicated deploy site page specifically for package #22036

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add separate react-components perf test package #21873

Add separate react-components perf test package #21873

TristanWatanabe commented Feb 25, 2022 •

edited

codesandbox-ci bot commented Feb 25, 2022 •

edited

fabricteam commented Feb 25, 2022 •

edited

fabricteam commented Feb 25, 2022 •

edited

fabricteam commented Feb 25, 2022 •

edited

size-auditor bot commented Feb 25, 2022 •

edited

fabricteam commented Feb 25, 2022 •

edited

TristanWatanabe Feb 25, 2022

Hotell commented Mar 2, 2022

Hotell Mar 2, 2022

TristanWatanabe Mar 2, 2022

Hotell left a comment

Add separate react-components perf test package #21873

Add separate react-components perf test package #21873

Conversation

TristanWatanabe commented Feb 25, 2022 • edited

Current Behavior

New Behavior

Related Issue(s)

codesandbox-ci bot commented Feb 25, 2022 • edited

fabricteam commented Feb 25, 2022 • edited

📊 Bundle size report

fabricteam commented Feb 25, 2022 • edited

Perf Analysis (@fluentui/react)

fabricteam commented Feb 25, 2022 • edited

Perf Analysis (@fluentui/react-northstar)

size-auditor bot commented Feb 25, 2022 • edited

Asset size changes

fabricteam commented Feb 25, 2022 • edited

Perf Analysis (@fluentui/react-components)

TristanWatanabe Feb 25, 2022

Choose a reason for hiding this comment

Hotell commented Mar 2, 2022

Hotell Mar 2, 2022

Choose a reason for hiding this comment

TristanWatanabe Mar 2, 2022

Choose a reason for hiding this comment

Hotell left a comment

Choose a reason for hiding this comment

TristanWatanabe commented Feb 25, 2022 •

edited

codesandbox-ci bot commented Feb 25, 2022 •

edited

fabricteam commented Feb 25, 2022 •

edited

fabricteam commented Feb 25, 2022 •

edited

Perf Analysis (`@fluentui/react`)

fabricteam commented Feb 25, 2022 •

edited

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

size-auditor bot commented Feb 25, 2022 •

edited

fabricteam commented Feb 25, 2022 •

edited

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