chore: fix issues in N* perf test by layershifter · Pull Request #25349 · microsoft/fluentui

layershifter · 2022-10-24T08:34:23Z

Current Behavior

New Behavior

layershifter · 2022-10-24T08:35:25Z

packages/fluentui/perf/src/index.tsx

-// https://github.com/bvaughn/rfcs/blob/profiler/text/0000-profiler.md
-const Profiler = (React as any).unstable_Profiler;


We moved to React 17, this API is stable there.

layershifter · 2022-10-24T08:35:48Z

scripts/webpack/webpack.config.perf.ts

  },
  plugins: [
-    new webpack.DefinePlugin(getDefaultEnvironmentVars()),
+    new webpack.DefinePlugin(getDefaultEnvironmentVars(!argv.debug)),


Solves:

[10:25:20] WARNING in DefinePlugin Conflicting values for 'process.env.NODE_ENV' '"development"' !== '"production"'

DustyTheBot · 2022-10-24T08:39:55Z

	Warnings
⚠️	There are no updates provided to CHANGELOG. Ensure there are no publicly visible changes introduced by this PR.

Generated by 🚫 dangerJS against 91cbd0f

size-auditor · 2022-10-24T08:46:09Z

Asset size changes

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

Baseline commit: 2d9a9f3147deea6d0c0a60747e1074faf47968c3 (build)

codesandbox-ci · 2022-10-24T08:46:11Z

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 91cbd0f:

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

fabricteam · 2022-10-24T08:49:19Z

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

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
Avatar	mount	1286	1269	5000
Button	mount	915	928	5000
FluentProvider	mount	1493	1486	5000
FluentProviderWithTheme	mount	571	580	10
FluentProviderWithTheme	virtual-rerender	545	540	10
FluentProviderWithTheme	virtual-rerender-with-unmount	564	559	10
MakeStyles	mount	1967	1964	50000
SpinButton	mount	2385	2360	5000

fabricteam · 2022-10-24T08:52:32Z

📊 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.294 kB` `24.443 kB`
`react-alert` Alert	`86.891 kB` `21.708 kB`
`react-avatar` Avatar	`51.076 kB` `14.285 kB`
`react-avatar` AvatarGroup	`15.006 kB` `6.009 kB`
`react-avatar` AvatarGroupItem	`65.654 kB` `18.382 kB`
`react-badge` Badge	`23.357 kB` `7.361 kB`
`react-badge` CounterBadge	`24.247 kB` `7.643 kB`
`react-badge` PresenceBadge	`24.001 kB` `7.049 kB`
`react-button` Button	`36.86 kB` `9.913 kB`
`react-button` CompoundButton	`43.885 kB` `11.131 kB`
`react-button` MenuButton	`41.537 kB` `11.187 kB`
`react-button` SplitButton	`48.983 kB` `12.588 kB`
`react-button` ToggleButton	`52.685 kB` `11.415 kB`
`react-card` Card - All	`71.873 kB` `20.936 kB`
`react-card` Card	`67.651 kB` `19.892 kB`
`react-card` CardFooter	`8.617 kB` `3.62 kB`
`react-card` CardHeader	`9.792 kB` `3.995 kB`
`react-card` CardPreview	`8.718 kB` `3.674 kB`
`react-combobox` Combobox (including child components)	`78.244 kB` `25.015 kB`
`react-combobox` Dropdown (including child components)	`77.531 kB` `24.927 kB`
`react-components` react-components: Button, FluentProvider & webLightTheme	`62.975 kB` `17.687 kB`
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`190.427 kB` `53.087 kB`
`react-components` react-components: FluentProvider & webLightTheme	`33.48 kB` `11.037 kB`
`react-dialog` Dialog (including children components)	`83.036 kB` `24.754 kB`
`react-divider` Divider	`16.515 kB` `5.921 kB`
`react-image` Image	`10.836 kB` `4.283 kB`
`react-infobutton` InfoButton	`117.938 kB` `35.399 kB`
`react-input` Input	`24.194 kB` `7.89 kB`
`react-label` Label	`9.394 kB` `3.88 kB`
`react-link` Link	`11.862 kB` `4.885 kB`
`react-menu` Menu (including children components)	`117.61 kB` `36.287 kB`
`react-menu` Menu (including selectable components)	`120.679 kB` `36.82 kB`
`react-overflow` hooks only	`11.004 kB` `4.188 kB`
`react-persona` Persona	`57.131 kB` `15.951 kB`
`react-popover` Popover	`103.682 kB` `31.867 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.536 kB` `5.107 kB`
`react-provider` FluentProvider	`15.817 kB` `5.905 kB`
`react-radio` Radio	`36.446 kB` `12.123 kB`
`react-radio` RadioGroup	`14.304 kB` `5.72 kB`
`react-select` Select	`23.474 kB` `8.017 kB`
`react-slider` Slider	`32.118 kB` `10.192 kB`
`react-spinbutton` SpinButton	`44.502 kB` `12.812 kB`
`react-spinner` Spinner	`20.013 kB` `6.446 kB`
`react-switch` Switch	`33.453 kB` `10.581 kB`
`react-text` Text - Default	`11.838 kB` `4.625 kB`
`react-text` Text - Wrappers	`15.148 kB` `5.06 kB`
`react-textarea` Textarea	`25.733 kB` `8.328 kB`
`react-theme` Single theme token import	`69 B` `89 B`
`react-theme` Teams: all themes	`29.722 kB` `6.462 kB`
`react-theme` Teams: Light theme	`17.51 kB` `5.075 kB`
`react-tooltip` Tooltip	`42.032 kB` `14.739 kB`
`react-utilities` SSRProvider	`180 B` `159 B`

_{🤖 This report was generated against 2d9a9f3147deea6d0c0a60747e1074faf47968c3}

fabricteam · 2022-10-24T08:55:11Z

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

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
ChatDuplicateMessagesPerf.default	224	202	1.11:1
AvatarMinimalPerf.default	172	163	1.06:1
FlexMinimalPerf.default	260	245	1.06:1
ProviderMinimalPerf.default	332	312	1.06:1
DropdownManyItemsPerf.default	559	535	1.04:1
GridMinimalPerf.default	301	290	1.04:1
SegmentMinimalPerf.default	315	304	1.04:1
SkeletonMinimalPerf.default	307	296	1.04:1
TableMinimalPerf.default	366	351	1.04:1
BoxMinimalPerf.default	302	294	1.03:1
LayoutMinimalPerf.default	324	315	1.03:1
ListCommonPerf.default	520	507	1.03:1
ListMinimalPerf.default	464	451	1.03:1
TooltipMinimalPerf.default	1911	1862	1.03:1
TreeWith60ListItems.default	132	128	1.03:1
AccordionMinimalPerf.default	124	122	1.02:1
AnimationMinimalPerf.default	475	467	1.02:1
ButtonMinimalPerf.default	139	136	1.02:1
CardMinimalPerf.default	472	464	1.02:1
ListWith60ListItems.default	498	489	1.02:1
CustomToolbarPrototype.default	2182	2149	1.02:1
ToolbarMinimalPerf.default	796	779	1.02:1
AttachmentSlotsPerf.default	885	874	1.01:1
ButtonOverridesMissPerf.default	1031	1016	1.01:1
DividerMinimalPerf.default	313	309	1.01:1
DropdownMinimalPerf.default	2201	2172	1.01:1
EmbedMinimalPerf.default	2647	2621	1.01:1
ItemLayoutMinimalPerf.default	979	965	1.01:1
ListNestedPerf.default	465	461	1.01:1
MenuButtonMinimalPerf.default	1352	1345	1.01:1
SliderMinimalPerf.default	1249	1238	1.01:1
TextMinimalPerf.default	304	302	1.01:1
TextAreaMinimalPerf.default	410	407	1.01:1
TreeMinimalPerf.default	701	692	1.01:1
VideoMinimalPerf.default	641	637	1.01:1
CarouselMinimalPerf.default	351	352	1:1
ChatMinimalPerf.default	634	632	1:1
DialogMinimalPerf.default	686	683	1:1
HeaderMinimalPerf.default	317	316	1:1
InputMinimalPerf.default	849	850	1:1
RosterPerf.default	1696	1691	1:1
PopupMinimalPerf.default	559	557	1:1
ProviderMergeThemesPerf.default	988	992	1:1
ReactionMinimalPerf.default	328	327	1:1
SplitButtonMinimalPerf.default	3275	3269	1:1
StatusMinimalPerf.default	609	611	1:1
IconMinimalPerf.default	559	558	1:1
AttachmentMinimalPerf.default	123	124	0.99:1
ButtonSlotsPerf.default	418	422	0.99:1
CheckboxMinimalPerf.default	1528	1538	0.99:1
DatepickerMinimalPerf.default	4674	4722	0.99:1
FormMinimalPerf.default	321	325	0.99:1
HeaderSlotsPerf.default	685	693	0.99:1
ImageMinimalPerf.default	339	341	0.99:1
LabelMinimalPerf.default	339	341	0.99:1
LoaderMinimalPerf.default	267	269	0.99:1
MenuMinimalPerf.default	724	731	0.99:1
RadioGroupMinimalPerf.default	386	389	0.99:1
RefMinimalPerf.default	180	181	0.99:1
TableManyItemsPerf.default	1568	1586	0.99:1
PortalMinimalPerf.default	137	146	0.94:1
AlertMinimalPerf.default	214	229	0.93:1
ChatWithPopoverPerf.default	276	300	0.92:1

fabricteam · 2022-10-24T09:14:37Z

Perf Analysis (`@fluentui/react`)

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
FocusZone	mount	1898	1912	5000	Possible regression

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
BaseButton	mount	1190	1199	5000
Breadcrumb	mount	2764	2813	1000
Checkbox	mount	2660	2651	5000
CheckboxBase	mount	2401	2364	5000
ChoiceGroup	mount	4305	4278	5000
ComboBox	mount	1173	1198	1000
CommandBar	mount	9199	9254	1000
ContextualMenu	mount	10641	9987	1000
DefaultButton	mount	1365	1354	5000
DetailsRow	mount	3397	3349	5000
DetailsRowFast	mount	3441	3374	5000
DetailsRowNoStyles	mount	3258	3243	5000
Dialog	mount	2984	2965	1000
DocumentCardTitle	mount	579	578	1000
Dropdown	mount	3170	3143	5000
FocusTrapZone	mount	1968	1951	5000
FocusZone	mount	1898	1912	5000	Possible regression
GroupedList	mount	1822	2042	2
GroupedList	virtual-rerender	1090	1098	2
GroupedList	virtual-rerender-with-unmount	1588	1605	2
GroupedListV2	mount	567	582	2
GroupedListV2	virtual-rerender	544	534	2
GroupedListV2	virtual-rerender-with-unmount	577	579	2
IconButton	mount	1783	1795	5000
Label	mount	753	737	5000
Layer	mount	4168	4200	5000
Link	mount	849	860	5000
MenuButton	mount	1626	1602	5000
MessageBar	mount	2310	2304	5000
Nav	mount	3068	3048	1000
OverflowSet	mount	1395	1389	5000
Panel	mount	2465	2527	1000
Persona	mount	1246	1289	1000
Pivot	mount	1511	1513	1000
PrimaryButton	mount	1474	1483	5000
Rating	mount	6971	7020	5000
SearchBox	mount	1506	1499	5000
Shimmer	mount	2882	2898	5000
Slider	mount	2083	2137	5000
SpinButton	mount	4220	4252	5000
Spinner	mount	826	826	5000
SplitButton	mount	2833	2839	5000
Stack	mount	858	858	5000
StackWithIntrinsicChildren	mount	2335	2309	5000
StackWithTextChildren	mount	5057	5034	5000
SwatchColorPicker	mount	9478	9393	5000
TagPicker	mount	2355	2341	5000
TeachingBubble	mount	73632	73204	5000
Text	mount	828	819	5000
TextField	mount	1560	1544	5000
ThemeProvider	mount	1441	1451	5000
ThemeProvider	virtual-rerender	1145	1136	5000
ThemeProvider	virtual-rerender-with-unmount	1989	1996	5000
Toggle	mount	1124	1123	5000
buttonNative	mount	532	524	5000

layershifter · 2022-10-24T10:37:06Z

/azp run

azure-pipelines · 2022-10-24T10:37:27Z

Azure Pipelines successfully started running 3 pipeline(s).

scripts/webpack/webpack.config.perf.ts

fabricteam · 2022-11-23T10:31:25Z

🕵 fluentuiv8 No visual regressions between this PR and main

fabricteam · 2022-11-23T10:34:32Z

🕵 fluentuiv9 Open the Visual Regressions report to inspect the 2 screenshots

✅ There was 0 screenshots added, 0 screenshots removed, 1749 screenshots unchanged, 0 screenshots with different dimensions and 2 screenshots with visible difference.

unknown 2 screenshots

Image Name	Diff(in Pixels)	Image Type
Avatar Converged.size+active+badge.normal.chromium.png	5	Changed
Avatar Converged.size+active+ring-shadow.normal.chromium.png	11	Changed

Co-authored-by: Martin Hochel <hochelmartin@gmail.com>

* chore: fix issues in N* perf test * Update scripts/webpack/webpack.config.perf.ts Co-authored-by: Martin Hochel <hochelmartin@gmail.com> Co-authored-by: Martin Hochel <hochelmartin@gmail.com>

msft-fluent-ui-bot added the Fluent UI react-northstar label Oct 24, 2022

msft-fluent-ui-bot assigned GeoffCoxMSFT Oct 24, 2022

github-actions bot added this to the October Project Cycle Q4 2022 milestone Oct 24, 2022

layershifter commented Oct 24, 2022

View reviewed changes

layershifter marked this pull request as ready for review October 24, 2022 08:35

layershifter requested review from a team as code owners October 24, 2022 08:35

ling1726 approved these changes Oct 25, 2022

View reviewed changes

Hotell reviewed Oct 25, 2022

View reviewed changes

scripts/webpack/webpack.config.perf.ts Outdated Show resolved Hide resolved

Hotell approved these changes Oct 25, 2022

View reviewed changes

layershifter enabled auto-merge (squash) October 25, 2022 13:24

layershifter force-pushed the fix/n-perf-test branch from fa81e20 to 766a099 Compare November 23, 2022 10:11

layershifter and others added 2 commits November 23, 2022 13:27

chore: fix issues in N* perf test

7f5a2d2

Update scripts/webpack/webpack.config.perf.ts

91cbd0f

Co-authored-by: Martin Hochel <hochelmartin@gmail.com>

layershifter force-pushed the fix/n-perf-test branch from 766a099 to 91cbd0f Compare November 23, 2022 12:28

layershifter mentioned this pull request Nov 23, 2022

[Bug]: intermittent issues with "yarn build" #25766

Closed

2 tasks

layershifter merged commit b008fab into microsoft:master Nov 23, 2022

layershifter deleted the fix/n-perf-test branch November 24, 2022 13:50

khmakoto added Fluent UI react-northstar (v0) Work related to Fluent UI V0 and removed Fluent UI react-northstar labels Nov 30, 2022

		// https://github.com/bvaughn/rfcs/blob/profiler/text/0000-profiler.md
		const Profiler = (React as any).unstable_Profiler;

Conversation

layershifter commented Oct 24, 2022

Current Behavior

New Behavior

Uh oh!

layershifter Oct 24, 2022

Choose a reason for hiding this comment

Uh oh!

layershifter Oct 24, 2022

Choose a reason for hiding this comment

Uh oh!

DustyTheBot commented Oct 24, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

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

Uh oh!

Asset size changes

Uh oh!

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

Uh oh!

Uh oh!

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

Uh oh!

📊 Bundle size report

Uh oh!

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

Uh oh!

Perf Analysis (@fluentui/react)

Uh oh!

layershifter commented Oct 24, 2022

Uh oh!

azure-pipelines bot commented Oct 24, 2022

Uh oh!

Uh oh!

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

Uh oh!

🕵 fluentuiv9 Open the Visual Regressions report to inspect the 2 screenshots

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

8 participants

DustyTheBot commented Oct 24, 2022 •

edited

Loading

size-auditor bot commented Oct 24, 2022 •

edited

Loading

codesandbox-ci bot commented Oct 24, 2022 •

edited

Loading

fabricteam commented Oct 24, 2022 •

edited

Loading

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

fabricteam commented Oct 24, 2022 •

edited

Loading

fabricteam commented Oct 24, 2022 •

edited

Loading

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

fabricteam commented Oct 24, 2022 •

edited

Loading

Perf Analysis (`@fluentui/react`)

fabricteam commented Nov 23, 2022 •

edited

Loading

fabricteam commented Nov 23, 2022 •

edited

Loading