Skip to content

Conversation

@Hotell
Copy link
Contributor

@Hotell Hotell commented Feb 20, 2023

Previous Behavior

Duplicate perf-test setup/logic/init that lives in apps/perf-test and apps/perf-test-react-components and packages/fluentui/perf-test-northstar

New Behavior

  • perf test setup now lives within config/perf-test instead being part of application source code ( anti-pattern )
  • flamegrill related logic has been moved to @fluentui/scripts-tasks
  • app renderer/routing has been moved to new package @fluentui/scripts-perf-test-flamegrill
  • pipeline variables have been renamed to match project names

Related Issue(s)

  • Fixes #

@Hotell Hotell changed the title Hotell/build/scripts/refactor perf setup feat(scripts-tasks): migrate and make perf setup generic Feb 20, 2023
@fabricteam
Copy link
Collaborator

fabricteam commented Feb 20, 2023

📊 Bundle size report

Unchanged fixtures
Package & Exports Size (minified/GZIP)
global-context
createContext
533 B
341 B
global-context
createContextSelector
560 B
352 B
priority-overflow
createOverflowManager
3.194 kB
1.314 kB
react-accordion
Accordion (including children components)
88.882 kB
26.551 kB
react-alert
Alert
96.647 kB
23.133 kB
react-avatar
Avatar
60.312 kB
15.579 kB
react-avatar
AvatarGroup
18.178 kB
6.683 kB
react-avatar
AvatarGroupItem
76.573 kB
20.086 kB
react-badge
Badge
25.85 kB
7.585 kB
react-badge
CounterBadge
26.833 kB
7.889 kB
react-badge
PresenceBadge
34.458 kB
8.693 kB
react-button
Button
39.749 kB
9.959 kB
react-button
CompoundButton
46.921 kB
11.428 kB
react-button
MenuButton
44.437 kB
11.306 kB
react-button
SplitButton
52.931 kB
12.872 kB
react-button
ToggleButton
58.121 kB
11.878 kB
react-card
Card - All
83.489 kB
23.894 kB
react-card
Card
78.308 kB
22.431 kB
react-card
CardFooter
9.035 kB
3.799 kB
react-card
CardHeader
10.959 kB
4.503 kB
react-card
CardPreview
9.84 kB
4.153 kB
react-checkbox
Checkbox
36.067 kB
10.856 kB
react-checkbox
CheckboxField
43.019 kB
12.787 kB
react-combobox
Combobox (including child components)
88.73 kB
28.105 kB
react-combobox
ComboboxField
85.147 kB
27.871 kB
react-combobox
Dropdown (including child components)
87.428 kB
27.853 kB
react-components
react-components: Button, FluentProvider & webLightTheme
67.994 kB
18.395 kB
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
207.4 kB
57.516 kB
react-components
react-components: FluentProvider & webLightTheme
38.819 kB
12.351 kB
react-dialog
Dialog (including children components)
93.616 kB
27.452 kB
react-divider
Divider
19.863 kB
6.697 kB
react-field
Field
20.552 kB
7.092 kB
react-image
Image
14.011 kB
4.993 kB
react-infobutton
InfoButton
130.577 kB
39.439 kB
react-infobutton
InfoLabel
133.874 kB
40.488 kB
react-input
Input
25.747 kB
7.697 kB
react-input
InputField
35.723 kB
10.637 kB
react-label
Label
12.57 kB
4.586 kB
react-link
Link
12.301 kB
5.07 kB
react-menu
Menu (including children components)
130.926 kB
39.629 kB
react-menu
Menu (including selectable components)
134.062 kB
40.161 kB
react-overflow
hooks only
11.214 kB
4.271 kB
react-persona
Persona
67.338 kB
17.524 kB
react-popover
Popover
117.58 kB
35.828 kB
react-portal
Portal
11.649 kB
4.263 kB
react-portal-compat
PortalCompatProvider
6.446 kB
2.185 kB
react-positioning
usePositioning
24.008 kB
8.798 kB
react-progress
ProgressBar
15.961 kB
5.675 kB
react-progress
ProgressField
26.435 kB
8.859 kB
react-provider
FluentProvider
20.766 kB
7.119 kB
react-radio
Radio
35.48 kB
11.126 kB
react-radio
RadioGroup
17.988 kB
6.544 kB
react-radio
RadioGroupField
28.166 kB
9.735 kB
react-select
Select
26.957 kB
8.766 kB
react-select
SelectField
36.293 kB
11.316 kB
react-slider
Slider
35.919 kB
11.059 kB
react-slider
SliderField
45.847 kB
14.005 kB
react-spinbutton
SpinButton
35.648 kB
10.348 kB
react-spinbutton
SpinButtonField
44.671 kB
12.812 kB
react-spinner
Spinner
23.425 kB
7.195 kB
react-switch
Switch
31.413 kB
9.294 kB
react-switch
SwitchField
38.317 kB
11.21 kB
react-table
DataGrid
149.878 kB
40.662 kB
react-table
Table (Primitives only)
47.119 kB
12.703 kB
react-table
Table as DataGrid
138.018 kB
35.282 kB
react-table
Table (Selection only)
85.849 kB
21.303 kB
react-table
Table (Sort only)
85.179 kB
21.113 kB
react-text
Text - Default
15.018 kB
5.327 kB
react-text
Text - Wrappers
15.572 kB
5.23 kB
react-textarea
Textarea
29.07 kB
9.081 kB
react-textarea
TextareaField
39.454 kB
12.055 kB
react-theme
Single theme token import
69 B
89 B
react-theme
Teams: all themes
31.33 kB
6.764 kB
react-theme
Teams: Light theme
17.895 kB
5.162 kB
react-tooltip
Tooltip
49.388 kB
16.815 kB
react-utilities
SSRProvider
180 B
159 B
🤖 This report was generated against b95b78b91f242861c5f465526c697d13f8f9ffca

@size-auditor
Copy link

size-auditor bot commented Feb 20, 2023

Asset size changes

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

Baseline commit: b95b78b91f242861c5f465526c697d13f8f9ffca (build)

@codesandbox-ci
Copy link

codesandbox-ci bot commented Feb 20, 2023

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 512f962:

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

@fabricteam
Copy link
Collaborator

fabricteam commented Feb 20, 2023

Perf Analysis (@fluentui/react-northstar)

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
DividerMinimalPerf.default 266 242 1.1:1
TreeWith60ListItems.default 111 103 1.08:1
ChatWithPopoverPerf.default 255 238 1.07:1
AttachmentSlotsPerf.default 826 788 1.05:1
FormMinimalPerf.default 281 267 1.05:1
TextAreaMinimalPerf.default 334 319 1.05:1
AttachmentMinimalPerf.default 102 98 1.04:1
ButtonMinimalPerf.default 111 107 1.04:1
ChatMinimalPerf.default 524 502 1.04:1
LayoutMinimalPerf.default 262 252 1.04:1
LoaderMinimalPerf.default 237 228 1.04:1
RefMinimalPerf.default 147 142 1.04:1
ChatDuplicateMessagesPerf.default 190 184 1.03:1
DropdownManyItemsPerf.default 484 472 1.03:1
MenuButtonMinimalPerf.default 1241 1208 1.03:1
SliderMinimalPerf.default 892 870 1.03:1
AccordionMinimalPerf.default 105 103 1.02:1
AnimationMinimalPerf.default 381 372 1.02:1
CardMinimalPerf.default 377 369 1.02:1
HeaderMinimalPerf.default 260 255 1.02:1
ItemLayoutMinimalPerf.default 865 844 1.02:1
LabelMinimalPerf.default 272 267 1.02:1
ListMinimalPerf.default 364 356 1.02:1
MenuMinimalPerf.default 602 590 1.02:1
PopupMinimalPerf.default 441 433 1.02:1
SkeletonMinimalPerf.default 244 239 1.02:1
IconMinimalPerf.default 479 468 1.02:1
TableMinimalPerf.default 289 283 1.02:1
TextMinimalPerf.default 238 234 1.02:1
AlertMinimalPerf.default 185 183 1.01:1
AvatarMinimalPerf.default 130 129 1.01:1
BoxMinimalPerf.default 240 237 1.01:1
ButtonOverridesMissPerf.default 825 816 1.01:1
DatepickerMinimalPerf.default 4534 4468 1.01:1
DialogMinimalPerf.default 558 554 1.01:1
DropdownMinimalPerf.default 1764 1755 1.01:1
EmbedMinimalPerf.default 2322 2290 1.01:1
ListNestedPerf.default 397 394 1.01:1
ProviderMinimalPerf.default 275 271 1.01:1
RadioGroupMinimalPerf.default 311 309 1.01:1
StatusMinimalPerf.default 486 479 1.01:1
TableManyItemsPerf.default 1384 1369 1.01:1
TreeMinimalPerf.default 560 553 1.01:1
GridMinimalPerf.default 235 235 1:1
HeaderSlotsPerf.default 566 565 1:1
InputMinimalPerf.default 709 709 1:1
SplitButtonMinimalPerf.default 2931 2920 1:1
ButtonSlotsPerf.default 393 397 0.99:1
ImageMinimalPerf.default 274 278 0.99:1
PortalMinimalPerf.default 118 119 0.99:1
ProviderMergeThemesPerf.default 877 882 0.99:1
SegmentMinimalPerf.default 239 242 0.99:1
CustomToolbarPrototype.default 1844 1869 0.99:1
TooltipMinimalPerf.default 1585 1600 0.99:1
VideoMinimalPerf.default 525 528 0.99:1
CarouselMinimalPerf.default 344 352 0.98:1
CheckboxMinimalPerf.default 1495 1526 0.98:1
ListCommonPerf.default 479 491 0.98:1
ListWith60ListItems.default 451 460 0.98:1
RosterPerf.default 1919 1953 0.98:1
ReactionMinimalPerf.default 256 261 0.98:1
ToolbarMinimalPerf.default 648 662 0.98:1
FlexMinimalPerf.default 192 200 0.96:1

@fabricteam
Copy link
Collaborator

fabricteam commented Feb 20, 2023

Perf Analysis (@fluentui/react)

Scenario Render type Master Ticks PR Ticks Iterations Status
BaseButton mount 967 980 5000 Possible regression
Breadcrumb mount 2342 2318 1000 Possible regression
Checkbox mount 2239 2213 5000 Possible regression
CheckboxBase mount 1993 1966 5000 Possible regression
ChoiceGroup mount 3867 3871 5000 Possible regression
ComboBox mount 1041 1045 1000 Possible regression
CommandBar mount 8280 8296 1000 Possible regression
ContextualMenu mount 17360 17191 1000 Possible regression
DefaultButton mount 1141 1139 5000 Possible regression
DetailsRow mount 3044 3040 5000 Possible regression
DetailsRowFast mount 3086 3015 5000 Possible regression
DetailsRowNoStyles mount 2810 2826 5000 Possible regression
Dialog mount 3391 3403 1000 Possible regression
DocumentCardTitle mount 432 443 1000 Possible regression
Dropdown mount 2739 2710 5000 Possible regression
FocusTrapZone mount 1650 1671 5000 Possible regression
FocusZone mount 1556 1607 5000 Possible regression
GroupedList mount 45756 58716 2 Possible regression
GroupedList virtual-rerender 22322 24491 2 Possible regression
GroupedList virtual-rerender-with-unmount 75808 75944 2 Possible regression
GroupedListV2 mount 457 449 2 Possible regression
GroupedListV2 virtual-rerender 420 427 2 Possible regression
GroupedListV2 virtual-rerender-with-unmount 452 458 2 Possible regression
IconButton mount 1580 1608 5000 Possible regression
Label mount 589 574 5000 Possible regression
Layer mount 3707 3760 5000 Possible regression
Link mount 654 644 5000 Possible regression
MenuButton mount 1382 1419 5000 Possible regression
Nav mount 2685 2665 1000 Possible regression
OverflowSet mount 1116 1144 5000 Possible regression
Panel mount 2108 2125 1000 Possible regression
Persona mount 1089 1081 1000 Possible regression
Pivot mount 1334 1316 1000 Possible regression
PrimaryButton mount 1256 1251 5000 Possible regression
Rating mount 5765 5781 5000 Possible regression
SearchBox mount 1264 1258 5000 Possible regression
Shimmer mount 2451 2432 5000 Possible regression
Slider mount 1807 1798 5000 Possible regression
SpinButton mount 3921 3938 5000 Possible regression
Spinner mount 651 636 5000 Possible regression
SplitButton mount 2664 2659 5000 Possible regression
Stack mount 649 675 5000 Possible regression
StackWithIntrinsicChildren mount 1257 1252 5000 Possible regression
StackWithTextChildren mount 3371 3354 5000 Possible regression
SwatchColorPicker mount 8301 8294 5000 Possible regression
TagPicker mount 2164 2133 5000 Possible regression
Text mount 635 624 5000 Possible regression
TextField mount 1338 1293 5000 Possible regression
ThemeProvider mount 1250 1253 5000 Possible regression
ThemeProvider virtual-rerender 887 893 5000 Possible regression
ThemeProvider virtual-rerender-with-unmount 1827 1811 5000 Possible regression
Toggle mount 905 906 5000 Possible regression
buttonNative mount 410 411 5000 Possible regression
All results

Scenario Render type Master Ticks PR Ticks Iterations Status
BaseButton mount 967 980 5000 Possible regression
Breadcrumb mount 2342 2318 1000 Possible regression
Checkbox mount 2239 2213 5000 Possible regression
CheckboxBase mount 1993 1966 5000 Possible regression
ChoiceGroup mount 3867 3871 5000 Possible regression
ComboBox mount 1041 1045 1000 Possible regression
CommandBar mount 8280 8296 1000 Possible regression
ContextualMenu mount 17360 17191 1000 Possible regression
DefaultButton mount 1141 1139 5000 Possible regression
DetailsRow mount 3044 3040 5000 Possible regression
DetailsRowFast mount 3086 3015 5000 Possible regression
DetailsRowNoStyles mount 2810 2826 5000 Possible regression
Dialog mount 3391 3403 1000 Possible regression
DocumentCardTitle mount 432 443 1000 Possible regression
Dropdown mount 2739 2710 5000 Possible regression
FocusTrapZone mount 1650 1671 5000 Possible regression
FocusZone mount 1556 1607 5000 Possible regression
GroupedList mount 45756 58716 2 Possible regression
GroupedList virtual-rerender 22322 24491 2 Possible regression
GroupedList virtual-rerender-with-unmount 75808 75944 2 Possible regression
GroupedListV2 mount 457 449 2 Possible regression
GroupedListV2 virtual-rerender 420 427 2 Possible regression
GroupedListV2 virtual-rerender-with-unmount 452 458 2 Possible regression
IconButton mount 1580 1608 5000 Possible regression
Label mount 589 574 5000 Possible regression
Layer mount 3707 3760 5000 Possible regression
Link mount 654 644 5000 Possible regression
MenuButton mount 1382 1419 5000 Possible regression
MessageBar mount 28133 28129 5000
Nav mount 2685 2665 1000 Possible regression
OverflowSet mount 1116 1144 5000 Possible regression
Panel mount 2108 2125 1000 Possible regression
Persona mount 1089 1081 1000 Possible regression
Pivot mount 1334 1316 1000 Possible regression
PrimaryButton mount 1256 1251 5000 Possible regression
Rating mount 5765 5781 5000 Possible regression
SearchBox mount 1264 1258 5000 Possible regression
Shimmer mount 2451 2432 5000 Possible regression
Slider mount 1807 1798 5000 Possible regression
SpinButton mount 3921 3938 5000 Possible regression
Spinner mount 651 636 5000 Possible regression
SplitButton mount 2664 2659 5000 Possible regression
Stack mount 649 675 5000 Possible regression
StackWithIntrinsicChildren mount 1257 1252 5000 Possible regression
StackWithTextChildren mount 3371 3354 5000 Possible regression
SwatchColorPicker mount 8301 8294 5000 Possible regression
TagPicker mount 2164 2133 5000 Possible regression
Text mount 635 624 5000 Possible regression
TextField mount 1338 1293 5000 Possible regression
ThemeProvider mount 1250 1253 5000 Possible regression
ThemeProvider virtual-rerender 887 893 5000 Possible regression
ThemeProvider virtual-rerender-with-unmount 1827 1811 5000 Possible regression
Toggle mount 905 906 5000 Possible regression
buttonNative mount 410 411 5000 Possible regression

@Hotell Hotell removed their assignment Feb 20, 2023
@Hotell Hotell force-pushed the hotell/build/scripts/refactor-perf-setup branch from 126315b to 1b24428 Compare February 22, 2023 14:26
@Hotell Hotell changed the title feat(scripts-tasks): migrate and make perf setup generic feat(scripts-tasks): make perf setup generic Feb 22, 2023
@Hotell Hotell changed the title feat(scripts-tasks): make perf setup generic feat(scripts-tasks): make perf test setup generic Feb 22, 2023
@Hotell Hotell force-pushed the hotell/build/scripts/refactor-perf-setup branch from 3b50772 to a89f961 Compare February 24, 2023 10:31
@fabricteam
Copy link
Collaborator

fabricteam commented Feb 24, 2023

🕵 fluentuiv9 No visual regressions between this PR and main

@fabricteam
Copy link
Collaborator

fabricteam commented Feb 24, 2023

🕵 FluentUI-v0 No visual regressions between this PR and main

@Hotell Hotell added Fluent UI react-components (v9) Fluent UI react-northstar (v0) Work related to Fluent UI V0 Fluent UI react (v8) Issues about @fluentui/react (v8) labels Mar 30, 2023
@fabricteam
Copy link
Collaborator

fabricteam commented Mar 30, 2023

Perf Analysis (@fluentui/react-components)

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 915 890 5000 Possible regression
Button mount 601 596 5000 Possible regression
Field mount 1513 1555 5000 Possible regression
FluentProvider mount 1094 1085 5000 Possible regression
FluentProviderWithTheme mount 288 301 10 Possible regression
FluentProviderWithTheme virtual-rerender 273 277 10 Possible regression
FluentProviderWithTheme virtual-rerender-with-unmount 287 282 10 Possible regression
InfoButton mount 203 200 5000 Possible regression
MakeStyles mount 1388 1378 50000 Possible regression
Persona mount 2107 2060 5000 Possible regression
SpinButton mount 1838 1795 5000 Possible regression
All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 915 890 5000 Possible regression
Button mount 601 596 5000 Possible regression
Field mount 1513 1555 5000 Possible regression
FluentProvider mount 1094 1085 5000 Possible regression
FluentProviderWithTheme mount 288 301 10 Possible regression
FluentProviderWithTheme virtual-rerender 273 277 10 Possible regression
FluentProviderWithTheme virtual-rerender-with-unmount 287 282 10 Possible regression
InfoButton mount 203 200 5000 Possible regression
MakeStyles mount 1388 1378 50000 Possible regression
Persona mount 2107 2060 5000 Possible regression
SpinButton mount 1838 1795 5000 Possible regression

@Hotell Hotell force-pushed the hotell/build/scripts/refactor-perf-setup branch from 9373ac5 to 57c3d2a Compare March 30, 2023 14:49
@fabricteam
Copy link
Collaborator

fabricteam commented Mar 30, 2023

🕵 fluentuiv8 No visual regressions between this PR and main

@Hotell Hotell marked this pull request as ready for review March 30, 2023 16:37
@Hotell Hotell enabled auto-merge (squash) March 31, 2023 08:18
@Hotell Hotell merged commit ffe1c8b into microsoft:master Apr 3, 2023
@Hotell Hotell deleted the hotell/build/scripts/refactor-perf-setup branch April 3, 2023 08:35
marcosmoura added a commit to marcosmoura/fluentui that referenced this pull request Apr 4, 2023
* master: (39 commits)
  Added merge tests for custom styles (microsoft#27086)
  fix: make Option's checkIcon slot render conditionally (microsoft#27409)
  docs: add subcomponents to Combobox and Dropdown docs (microsoft#27410)
  Breadcrumb spec (microsoft#26742)
  bugfix(react-utilities): increments SlotRenderFunction signature to include children (microsoft#27377)
  fix: Menu should not steal focus on close (microsoft#27414)
  Fixed Overflow component when there's more then one children element (microsoft#27402)
  feat(scripts-executors): support custom base and printing all affected packages for checkIfPackagesAffected (microsoft#27364)
  applying package updates
  feat(scripts-tasks): make perf test setup generic (microsoft#26920)
  fix: ColorPicker preview color updated to ignore forced colors (microsoft#27394)
  fix: Fix babel build error on windows (microsoft#27406)
  chore(react-datepicker-compat): Add vr-tests and bundle-size fixtures for DatePicker (microsoft#27351)
  fix(react-dialog): DialogContent scrollbar always visible (microsoft#27367)
  docs: Add tokens search (microsoft#27265)
  chore(scripts-tasks): remove not needed api-extractor task logs (microsoft#27094)
  chore(react-tree): adds e2e flat tree tests (microsoft#27318)
  applying package updates
  Accessibility fix for empty vertical bar chart (microsoft#26254)
  fix(react-datepicker-compat): Fix theming issues with all themes and WHCM (microsoft#27361)
  ...
@Hotell Hotell mentioned this pull request Apr 6, 2023
28 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

6 participants