Skip to content

Conversation

@Hotell
Copy link
Contributor

@Hotell Hotell commented Apr 9, 2024

Previous Behavior

New Behavior

Using readProjectConfiguration api for more than 1 call is extremely expensive. This was happening in various parts of our infra:

  • isConvergedPackage function
  • shipsAmd
  • generateConfig ( beachball )
  • others ( see file changes )

This PR refactores critical API's in our core infra to simplify logic and make things significantly faster 🚅🚅🚅

command Before After
yarn workspace @fluentui/scripts-beachball jest 31s 0.2s / 𝚫 99% FASTER
node -r ./scripts/ts-node/register scripts/executors/tag-react-components.ts 22s 0.8s / 𝚫 96% FASTER
lage build --to react-migration-v8-v9 241.12s 220.16s / 𝚫 9% FASTER

running lage build (whole monorepo):

NOTE:

  • not that not every task calls following APIs 4 times
  • these calculations are for non parallel execution ( which doesn't happen on CI - that's why "actuall" speed up gain is "only" 9% )
api 1 call just-scripts 1 call lage build - 200 (count of monorepo projects) runs
old isConvergedPackage() 380ms 4 * 380ms = 1520ms 304s
new metadata.isConverged() 1ms 4 * 1ms = 4ms 0.8s / 𝚫99.8% faster

Related Issue(s)

  • Fixes #

Hotell added 2 commits April 9, 2024 17:26
…ge util to accept allProjects param which drastically improves execution
@github-actions github-actions bot added this to the April Project Cycle Q1 2024 milestone Apr 9, 2024
@Hotell Hotell changed the title Perf/speed up beachbal config creation perf(script-beachball): leveage new monorepo function api to improve execution by 99% Apr 9, 2024
@Hotell Hotell changed the title perf(script-beachball): leveage new monorepo function api to improve execution by 99% perf(script-beachball): leverage new monorepo utility functions api to improve execution speed by 99% Apr 9, 2024
@fabricteam
Copy link
Collaborator

fabricteam commented Apr 9, 2024

Perf Analysis (@fluentui/react-components)

Scenario Render type Master Ticks PR Ticks Iterations Status
FluentProviderWithTheme virtual-rerender 29 34 10 Possible regression
FluentProviderWithTheme virtual-rerender-with-unmount 75 73 10 Possible regression
All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 615 645 5000
Button mount 317 310 5000
Field mount 1100 1112 5000
FluentProvider mount 703 712 5000
FluentProviderWithTheme mount 78 78 10
FluentProviderWithTheme virtual-rerender 29 34 10 Possible regression
FluentProviderWithTheme virtual-rerender-with-unmount 75 73 10 Possible regression
MakeStyles mount 834 872 50000
Persona mount 1741 1694 5000
SpinButton mount 1365 1376 5000

@fabricteam
Copy link
Collaborator

fabricteam commented Apr 9, 2024

Perf Analysis (@fluentui/react-northstar)

⚠️ 1 potential perf regressions detected

Potential regressions comparing to master

Scenario Current PR Ticks Baseline Ticks Ratio Regression Analysis
PortalMinimalPerf.default 93 83 1.12:1 analysis
Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
TreeWith60ListItems.default 89 79 1.13:1
ChatDuplicateMessagesPerf.default 161 145 1.11:1
TextMinimalPerf.default 203 183 1.11:1
PopupMinimalPerf.default 365 333 1.1:1
AttachmentMinimalPerf.default 81 75 1.08:1
ButtonMinimalPerf.default 95 89 1.07:1
FlexMinimalPerf.default 161 151 1.07:1
ProviderMinimalPerf.default 207 194 1.07:1
FormMinimalPerf.default 225 213 1.06:1
TableMinimalPerf.default 240 227 1.06:1
AccordionMinimalPerf.default 86 82 1.05:1
AvatarMinimalPerf.default 109 104 1.05:1
GridMinimalPerf.default 187 178 1.05:1
LoaderMinimalPerf.default 193 184 1.05:1
VideoMinimalPerf.default 461 437 1.05:1
DropdownManyItemsPerf.default 399 382 1.04:1
InputMinimalPerf.default 532 511 1.04:1
RadioGroupMinimalPerf.default 264 255 1.04:1
SliderMinimalPerf.default 774 746 1.04:1
TreeMinimalPerf.default 492 474 1.04:1
DividerMinimalPerf.default 201 196 1.03:1
HeaderMinimalPerf.default 209 203 1.03:1
ItemLayoutMinimalPerf.default 714 692 1.03:1
LayoutMinimalPerf.default 196 191 1.03:1
AnimationMinimalPerf.default 302 295 1.02:1
BoxMinimalPerf.default 192 189 1.02:1
ButtonSlotsPerf.default 322 317 1.02:1
CheckboxMinimalPerf.default 1139 1119 1.02:1
ListCommonPerf.default 382 376 1.02:1
SegmentMinimalPerf.default 204 200 1.02:1
SkeletonMinimalPerf.default 202 198 1.02:1
IconMinimalPerf.default 385 376 1.02:1
TooltipMinimalPerf.default 1283 1262 1.02:1
ButtonOverridesMissPerf.default 639 635 1.01:1
CardMinimalPerf.default 312 310 1.01:1
DialogMinimalPerf.default 438 434 1.01:1
DropdownMinimalPerf.default 1434 1419 1.01:1
EmbedMinimalPerf.default 1882 1855 1.01:1
HeaderSlotsPerf.default 459 453 1.01:1
MenuButtonMinimalPerf.default 943 932 1.01:1
TableManyItemsPerf.default 1102 1089 1.01:1
CarouselMinimalPerf.default 264 263 1:1
ProviderMergeThemesPerf.default 651 649 1:1
RefMinimalPerf.default 109 109 1:1
SplitButtonMinimalPerf.default 2219 2221 1:1
TextAreaMinimalPerf.default 296 296 1:1
MenuMinimalPerf.default 500 503 0.99:1
StatusMinimalPerf.default 383 386 0.99:1
CustomToolbarPrototype.default 1456 1476 0.99:1
ToolbarMinimalPerf.default 531 537 0.99:1
AlertMinimalPerf.default 151 154 0.98:1
ImageMinimalPerf.default 227 231 0.98:1
DatepickerMinimalPerf.default 3450 3539 0.97:1
RosterPerf.default 1492 1546 0.97:1
LabelMinimalPerf.default 217 225 0.96:1
ListMinimalPerf.default 304 317 0.96:1
ListNestedPerf.default 314 327 0.96:1
ListWith60ListItems.default 349 362 0.96:1
ReactionMinimalPerf.default 205 214 0.96:1
ChatWithPopoverPerf.default 183 192 0.95:1
ChatMinimalPerf.default 414 441 0.94:1
AttachmentSlotsPerf.default 606 658 0.92:1

@codesandbox-ci
Copy link

codesandbox-ci bot commented Apr 9, 2024

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.

@fabricteam
Copy link
Collaborator

fabricteam commented Apr 9, 2024

🕵 fluentuiv8 No visual regressions between this PR and main

@fabricteam
Copy link
Collaborator

fabricteam commented Apr 9, 2024

🕵 FluentUIV0 No visual regressions between this PR and main

@fabricteam
Copy link
Collaborator

fabricteam commented Apr 9, 2024

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react-swatch-picker-preview
@fluentui/react-swatch-picker-preview - package
107.291 kB
30.015 kB
107.039 kB
29.953 kB
-252 B
-62 B
Unchanged fixtures
Package & Exports Size (minified/GZIP)
global-context
createContext
510 B
328 B
global-context
createContextSelector
537 B
339 B
keyboard-key
keyboard-key package
3.746 kB
1.928 kB
priority-overflow
createOverflowManager
4.447 kB
1.853 kB
react
ActivityItem
68.833 kB
22.613 kB
react
Announced
36.473 kB
12.628 kB
react
Autofill
15.365 kB
4.743 kB
react
Breadcrumb
196.131 kB
58.76 kB
react
Button
190.127 kB
55.019 kB
react
ButtonGrid
175.918 kB
53.25 kB
react
Calendar
118.756 kB
36.101 kB
react
Callout
80.866 kB
26.564 kB
react
Check
51.062 kB
17.152 kB
react
Checkbox
57.791 kB
19.17 kB
react
ChoiceGroup
63.339 kB
20.824 kB
react
ChoiceGroupOption
56.601 kB
18.695 kB
react
Coachmark
89.704 kB
28.407 kB
react
Color
7.737 kB
3.106 kB
react
ColorPicker
130.032 kB
40.591 kB
react
ComboBox
245.355 kB
70.51 kB
react
CommandBar
197.41 kB
58.464 kB
react
ContextualMenu
150.967 kB
46.982 kB
react
DatePicker
180.318 kB
54.947 kB
react
DateTimeUtilities
5.244 kB
1.849 kB
react
DetailsList
225.911 kB
64.65 kB
react
Dialog
205.294 kB
61.428 kB
react
Divider
17.63 kB
6.234 kB
react
DocumentCard
211.08 kB
62.793 kB
react
DragDrop
8.343 kB
2.724 kB
react
DraggableZone
33.345 kB
11.166 kB
react
Dropdown
227.809 kB
66.884 kB
react
ExtendedPicker
94.987 kB
27.297 kB
react
Fabric
39.75 kB
13.688 kB
react
Facepile
206.04 kB
61.687 kB
react
FloatingPicker
236.281 kB
67.376 kB
react
FocusTrapZone
15.831 kB
5.54 kB
react
FocusZone
53.259 kB
16.869 kB
react
Grid
175.918 kB
53.25 kB
react
GroupedList
131.707 kB
39.689 kB
react
GroupedListV2
119.324 kB
36.822 kB
react
HoverCard
93.735 kB
29.778 kB
react
Icon
49.74 kB
16.603 kB
react
Icons
65.829 kB
24.212 kB
react
Image
44.79 kB
15.024 kB
react
Keytip
78.588 kB
25.825 kB
react
KeytipData
13.585 kB
4.418 kB
react
KeytipLayer
100.422 kB
31.128 kB
react
Keytips
103.175 kB
32.07 kB
react
Label
36.347 kB
12.639 kB
react
Layer
45.683 kB
15.585 kB
react
Link
37.673 kB
12.993 kB
react
List
38.136 kB
12.004 kB
react
MarqueeSelection
72.119 kB
21.676 kB
react
MessageBar
184.707 kB
55.523 kB
react
Modal
90.409 kB
29.213 kB
react
Nav
183.442 kB
55.093 kB
react
OverflowSet
31.044 kB
10.593 kB
react
Overlay
38.784 kB
13.401 kB
react
Panel
194.946 kB
58.34 kB
react
Persona
111.753 kB
35.58 kB
react
PersonaCoin
111.753 kB
35.58 kB
react
PersonaPresence
55.928 kB
18.715 kB
react
Pickers
287.867 kB
80.661 kB
react
Pivot
184.252 kB
55.823 kB
react
Popup
12.032 kB
4.114 kB
react
Positioning
21.821 kB
7.334 kB
react
PositioningContainer
70.754 kB
22.84 kB
react
ProgressIndicator
37.498 kB
12.906 kB
react
Rating
78.989 kB
25.18 kB
react
ResizeGroup
13.286 kB
4.365 kB
react
ResponsiveMode
8.078 kB
2.95 kB
react
ScrollablePane
53.538 kB
17.113 kB
react
SearchBox
182.982 kB
55.1 kB
react
SelectableOption
724 B
413 B
react
SelectedItemsList
226.707 kB
66.319 kB
react
Selection
41.202 kB
11.839 kB
react
Separator
33.397 kB
11.529 kB
react
Shimmer
47.265 kB
15.632 kB
react
ShimmeredDetailsList
236.679 kB
67.422 kB
react
Slider
55.575 kB
18.574 kB
react
SpinButton
186.661 kB
56.205 kB
react
Spinner
39.691 kB
13.815 kB
react
Stack
40.761 kB
13.931 kB
react
Sticky
32.064 kB
10.324 kB
react
Styling
44.812 kB
14.688 kB
react
SwatchColorPicker
186.166 kB
56.724 kB
react
TeachingBubble
200.004 kB
59.345 kB
react
Text
35.931 kB
12.486 kB
react
TextField
78.587 kB
24.642 kB
react
Theme
42.456 kB
13.773 kB
react
ThemeGenerator
12.34 kB
4.106 kB
react
TimePicker
235.197 kB
68.29 kB
react
Toggle
44.17 kB
15.346 kB
react
Tooltip
84.273 kB
27.284 kB
react
Utilities
71.851 kB
21.843 kB
react
Viewport
22.945 kB
7.292 kB
react
WeeklyDayPicker
98.762 kB
30.828 kB
react
WindowProvider
1.059 kB
541 B
react-accordion
Accordion (including children components)
99.599 kB
30.264 kB
react-alert
Alert
83.737 kB
23.475 kB
react-avatar
Avatar
50.175 kB
15.944 kB
react-avatar
AvatarGroup
19.702 kB
7.794 kB
react-avatar
AvatarGroupItem
64.829 kB
20.272 kB
react-badge
Badge
26.905 kB
8.73 kB
react-badge
CounterBadge
27.806 kB
9.025 kB
react-badge
PresenceBadge
25.311 kB
9.307 kB
react-breadcrumb
@fluentui/react-breadcrumb - package
115.48 kB
31.843 kB
react-button
Button
39.513 kB
11.17 kB
react-button
CompoundButton
46.874 kB
12.662 kB
react-button
MenuButton
44.292 kB
12.544 kB
react-button
SplitButton
52.306 kB
14.135 kB
react-button
ToggleButton
56.558 kB
13.068 kB
react-calendar-compat
Calendar Compat
152.084 kB
39.836 kB
react-card
Card - All
103.371 kB
29.144 kB
react-card
Card
96.382 kB
27.401 kB
react-card
CardFooter
13.971 kB
5.626 kB
react-card
CardHeader
16.214 kB
6.386 kB
react-card
CardPreview
14.015 kB
5.752 kB
react-checkbox
Checkbox
35.656 kB
12.07 kB
react-combobox
Combobox (including child components)
103.128 kB
33.283 kB
react-combobox
Dropdown (including child components)
104.606 kB
33.244 kB
react-components
react-components: Button, FluentProvider & webLightTheme
71.104 kB
20.52 kB
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
219.611 kB
62.103 kB
react-components
react-components: FluentProvider & webLightTheme
43.591 kB
14.356 kB
react-datepicker-compat
DatePicker Compat
225.837 kB
63.195 kB
react-dialog
Dialog (including children components)
100.928 kB
29.921 kB
react-divider
Divider
20.922 kB
7.791 kB
react-field
Field
22.976 kB
8.722 kB
react-image
Image
15.745 kB
6.231 kB
react-infobutton
InfoButton
138.778 kB
43.414 kB
react-infobutton
InfoLabel
142.579 kB
44.641 kB
react-input
Input
28.122 kB
9.36 kB
react-jsx-runtime
Classic Pragma
1.057 kB
530 B
react-jsx-runtime
JSX Dev Runtime
3.781 kB
1.646 kB
react-jsx-runtime
JSX Runtime
4.377 kB
1.881 kB
react-label
Label
14.266 kB
5.829 kB
react-link
Link
17.082 kB
6.911 kB
react-menu
Menu (including children components)
152.352 kB
45.725 kB
react-menu
Menu (including selectable components)
155.038 kB
46.291 kB
react-message-bar
MessageBar (all components)
25.566 kB
9.13 kB
react-northstar
Accordion
85.392 kB
26.518 kB
react-northstar
Alert
87.45 kB
26.902 kB
react-northstar
Animation
55.34 kB
17.829 kB
react-northstar
Attachment
86.844 kB
26.692 kB
react-northstar
Avatar
80.279 kB
24.629 kB
react-northstar
Box
75.248 kB
23.806 kB
react-northstar
Breadcrumb
79.92 kB
24.709 kB
react-northstar
Button
83.16 kB
25.947 kB
react-northstar
Card
82.705 kB
25.023 kB
react-northstar
Carousel
105.182 kB
31.871 kB
react-northstar
Chat
152.378 kB
45.964 kB
react-northstar
Checkbox
79.807 kB
25.078 kB
react-northstar
Datepicker
184.939 kB
56.194 kB
react-northstar
Debug
8.801 kB
3.594 kB
react-northstar
Design
36.589 kB
12.067 kB
react-northstar
Dialog
112.058 kB
33.615 kB
react-northstar
Divider
76.619 kB
24.129 kB
react-northstar
Dropdown
196.499 kB
59.455 kB
react-northstar
Embed
81.477 kB
25.417 kB
react-northstar
Flex
47.728 kB
15.438 kB
react-northstar
Form
92.527 kB
28.879 kB
react-northstar
Grid
70.584 kB
22.278 kB
react-northstar
Header
74.756 kB
23.461 kB
react-northstar
Image
73.591 kB
23.329 kB
react-northstar
Input
88.346 kB
27.78 kB
react-northstar
ItemLayout
78.231 kB
24.454 kB
react-northstar
Label
77.92 kB
24.41 kB
react-northstar
Layout
75.393 kB
23.798 kB
react-northstar
List
88.493 kB
27.547 kB
react-northstar
Loader
78.616 kB
24.729 kB
react-northstar
Menu
126.89 kB
39.872 kB
react-northstar
MenuButton
161.296 kB
48.883 kB
react-northstar
Pill
83.722 kB
26.069 kB
react-northstar
Popup
133.604 kB
41.483 kB
react-northstar
Portal
58.338 kB
18.852 kB
react-northstar
Provider
93.138 kB
29.63 kB
react-northstar
RadioGroup
83.282 kB
26.053 kB
react-northstar
Reaction
77.28 kB
24.122 kB
react-northstar
Segment
76.209 kB
23.892 kB
react-northstar
Skeleton
77.765 kB
24.2 kB
react-northstar
Slider
84.27 kB
26.737 kB
react-northstar
SplitButton
176.534 kB
52.63 kB
react-northstar
Status
76.272 kB
24.05 kB
react-northstar
SvgIcon
36.823 kB
11.743 kB
react-northstar
Table
80.796 kB
25.154 kB
react-northstar
Text
74.114 kB
23.507 kB
react-northstar
TextArea
74.248 kB
23.492 kB
react-northstar
Toolbar
173.345 kB
52.08 kB
react-northstar
Tooltip
108.261 kB
34.482 kB
react-northstar
Tree
87.855 kB
27.217 kB
react-northstar
Video
75.411 kB
23.799 kB
react-overflow
hooks only
12.86 kB
4.825 kB
react-persona
Persona
57.066 kB
17.821 kB
react-popover
Popover
126.968 kB
39.817 kB
react-portal
Portal
13.717 kB
4.886 kB
react-portal-compat
PortalCompatProvider
7.944 kB
2.588 kB
react-positioning
usePositioning
26.398 kB
9.539 kB
react-progress
ProgressBar
17.428 kB
6.899 kB
react-provider
FluentProvider
23.765 kB
8.662 kB
react-radio
Radio
32.95 kB
10.252 kB
react-radio
RadioGroup
15.354 kB
6.265 kB
react-select
Select
28.609 kB
10.204 kB
react-slider
Slider
39.949 kB
12.968 kB
react-spinbutton
SpinButton
36.774 kB
11.789 kB
react-spinner
Spinner
24.71 kB
8.35 kB
react-switch
Switch
35.14 kB
11.199 kB
react-table
DataGrid
165.647 kB
46.063 kB
react-table
Table (Primitives only)
45.324 kB
14.116 kB
react-table
Table as DataGrid
136.573 kB
36.817 kB
react-table
Table (Selection only)
76.334 kB
20.553 kB
react-table
Table (Sort only)
74.977 kB
20.155 kB
react-tag-picker-preview
@fluentui/react-tag-picker-preview - package
182.393 kB
54.611 kB
react-tags
InteractionTag
15.284 kB
6.07 kB
react-tags
Tag
30.029 kB
9.461 kB
react-tags
TagGroup
80.68 kB
24.073 kB
react-text
Text - Default
16.705 kB
6.57 kB
react-text
Text - Wrappers
19.878 kB
6.897 kB
react-textarea
Textarea
30.947 kB
10.477 kB
react-theme
Single theme token import
69 B
89 B
react-theme
Teams: all themes
35.666 kB
7.453 kB
react-theme
Teams: Light theme
19.642 kB
5.549 kB
react-timepicker-compat
TimePicker
105.149 kB
34.653 kB
react-toast
Toast (including Toaster)
100.282 kB
29.779 kB
react-tooltip
Tooltip
54.664 kB
19.206 kB
react-utilities
SSRProvider
180 B
160 B
🤖 This report was generated against 07fc578da563451b89d9e4d20e9cb960c91c4032

@fabricteam
Copy link
Collaborator

fabricteam commented Apr 9, 2024

🕵 fluentuiv9 No visual regressions between this PR and main

@fabricteam
Copy link
Collaborator

fabricteam commented Apr 9, 2024

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
BaseButton mount 623 600 5000
Breadcrumb mount 1683 1664 1000
Checkbox mount 1653 1692 5000
CheckboxBase mount 1484 1440 5000
ChoiceGroup mount 2900 2895 5000
ComboBox mount 650 658 1000
CommandBar mount 6176 6118 1000
ContextualMenu mount 11470 12080 1000
DefaultButton mount 743 736 5000
DetailsRow mount 2219 2167 5000
DetailsRowFast mount 2176 2167 5000
DetailsRowNoStyles mount 1991 1996 5000
Dialog mount 2570 2799 1000
DocumentCardTitle mount 218 228 1000
Dropdown mount 1993 1981 5000
FocusTrapZone mount 1160 1142 5000
FocusZone mount 1084 1090 5000
GroupedList mount 41507 41390 2
GroupedList virtual-rerender 19971 19862 2
GroupedList virtual-rerender-with-unmount 50602 50424 2
GroupedListV2 mount 225 225 2
GroupedListV2 virtual-rerender 205 205 2
GroupedListV2 virtual-rerender-with-unmount 211 227 2
IconButton mount 1082 1094 5000
Label mount 317 332 5000
Layer mount 2683 2662 5000
Link mount 387 392 5000
MenuButton mount 958 937 5000
MessageBar mount 21655 21324 5000
Nav mount 1933 1944 1000
OverflowSet mount 789 767 5000
Panel mount 1995 1781 1000
Persona mount 724 754 1000
Pivot mount 869 871 1000
PrimaryButton mount 841 852 5000
Rating mount 4559 4505 5000
SearchBox mount 882 905 5000
Shimmer mount 1879 1872 5000
Slider mount 1306 1314 5000
SpinButton mount 2835 2842 5000
Spinner mount 381 400 5000
SplitButton mount 1828 1813 5000
Stack mount 397 411 5000
StackWithIntrinsicChildren mount 841 846 5000
StackWithTextChildren mount 2603 2606 5000
SwatchColorPicker mount 6207 6126 5000
TagPicker mount 1468 1455 5000
Text mount 357 365 5000
TextField mount 922 904 5000
ThemeProvider mount 822 834 5000
ThemeProvider virtual-rerender 577 578 5000
ThemeProvider virtual-rerender-with-unmount 1253 1270 5000
Toggle mount 625 597 5000
buttonNative mount 191 193 5000

@Hotell Hotell changed the title perf(script-beachball): leverage new monorepo utility functions api to improve execution speed by 99% feat(scripts-*): speed up all isConverged calls by ~95% Apr 10, 2024
@Hotell Hotell marked this pull request as ready for review April 11, 2024 09:22
@Hotell Hotell requested a review from a team as a code owner April 11, 2024 09:22
@Hotell Hotell changed the title feat(scripts-*): speed up all isConverged calls by ~95% feat(scripts-*): speed up all isConverged, getAllPackageInfo calls/usage by ~95% Apr 11, 2024
@tudorpopams tudorpopams self-requested a review April 11, 2024 12:11
@Hotell Hotell requested a review from TristanWatanabe April 12, 2024 09:37
@Hotell Hotell merged commit 363cd38 into microsoft:master Apr 12, 2024
Hotell added a commit to Hotell/fluentui that referenced this pull request Apr 17, 2024
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.

3 participants