Skip to content

chore: bump monosize#30381

Merged
Hotell merged 3 commits intomicrosoft:masterfrom
Hotell:bundle-size/migrate-to-monosize-1
Jan 25, 2024
Merged

chore: bump monosize#30381
Hotell merged 3 commits intomicrosoft:masterfrom
Hotell:bundle-size/migrate-to-monosize-1

Conversation

@Hotell
Copy link
Contributor

@Hotell Hotell commented Jan 24, 2024

Previous Behavior

New Behavior

  • migrates to latest monosize
  • updates all babel dependencies in order to get rid of dupes that are causing type issues etc

Related Issue(s)

@fabricteam
Copy link
Collaborator

fabricteam commented Jan 24, 2024

📊 Bundle size report

Unchanged fixtures
Package & Exports Size (minified/GZIP)
global-context
createContext
510 B
328 B
global-context
createContextSelector
537 B
339 B
priority-overflow
createOverflowManager
4.447 kB
1.853 kB
react-accordion
Accordion (including children components)
93.962 kB
28.706 kB
react-alert
Alert
83.737 kB
23.474 kB
react-avatar
Avatar
50.175 kB
15.944 kB
react-avatar
AvatarGroup
19.704 kB
7.796 kB
react-avatar
AvatarGroupItem
64.831 kB
20.274 kB
react-badge
Badge
26.905 kB
8.729 kB
react-badge
CounterBadge
27.806 kB
9.024 kB
react-badge
PresenceBadge
25.311 kB
9.306 kB
react-button
Button
39.513 kB
11.169 kB
react-button
CompoundButton
46.874 kB
12.661 kB
react-button
MenuButton
44.292 kB
12.542 kB
react-button
SplitButton
52.306 kB
14.134 kB
react-button
ToggleButton
56.559 kB
13.068 kB
react-calendar-compat
Calendar Compat
142.28 kB
37.196 kB
react-card
Card - All
94.653 kB
27.242 kB
react-card
Card
89.477 kB
25.731 kB
react-card
CardFooter
13.064 kB
5.385 kB
react-card
CardHeader
15.307 kB
6.143 kB
react-card
CardPreview
14.015 kB
5.752 kB
react-checkbox
Checkbox
34.746 kB
11.902 kB
react-combobox
Combobox (including child components)
97.293 kB
31.432 kB
react-combobox
Dropdown (including child components)
98.514 kB
31.428 kB
react-components
react-components: Button, FluentProvider & webLightTheme
69.901 kB
20.261 kB
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
210.494 kB
60.055 kB
react-components
react-components: FluentProvider & webLightTheme
42.388 kB
14.103 kB
react-datepicker-compat
DatePicker Compat
214.107 kB
60.047 kB
react-dialog
Dialog (including children components)
95.522 kB
28.482 kB
react-divider
Divider
20.82 kB
7.763 kB
react-field
Field
22.427 kB
8.573 kB
react-image
Image
15.736 kB
6.228 kB
react-infobutton
InfoButton
132.952 kB
41.844 kB
react-infobutton
InfoLabel
136.64 kB
42.986 kB
react-input
Input
26.887 kB
9.118 kB
react-jsx-runtime
Classic Pragma
1.057 kB
530 B
react-jsx-runtime
JSX Dev Runtime
3.783 kB
1.648 kB
react-jsx-runtime
JSX Runtime
4.377 kB
1.881 kB
react-label
Label
14.149 kB
5.759 kB
react-link
Link
17.082 kB
6.911 kB
react-menu
Menu (including children components)
142.794 kB
43.72 kB
react-menu
Menu (including selectable components)
145.48 kB
44.227 kB
react-message-bar
MessageBar (all components)
25.181 kB
9.039 kB
react-overflow
hooks only
12.862 kB
4.827 kB
react-persona
Persona
57.066 kB
17.821 kB
react-popover
Popover
121.146 kB
38.235 kB
react-portal
Portal
12.788 kB
4.67 kB
react-portal-compat
PortalCompatProvider
7.099 kB
2.385 kB
react-positioning
usePositioning
26.162 kB
9.465 kB
react-progress
ProgressBar
17.428 kB
6.898 kB
react-provider
FluentProvider
22.928 kB
8.472 kB
react-radio
Radio
32.042 kB
10.046 kB
react-radio
RadioGroup
15.345 kB
6.263 kB
react-select
Select
28.609 kB
10.205 kB
react-slider
Slider
39.15 kB
12.769 kB
react-spinbutton
SpinButton
36.774 kB
11.788 kB
react-spinner
Spinner
23.4 kB
8.467 kB
react-switch
Switch
34.23 kB
10.995 kB
react-table
DataGrid
157.363 kB
43.948 kB
react-table
Table (Primitives only)
44.493 kB
13.921 kB
react-table
Table as DataGrid
130.321 kB
35.173 kB
react-table
Table (Selection only)
75.365 kB
20.367 kB
react-table
Table (Sort only)
74.031 kB
19.976 kB
react-tags
InteractionTag
15.259 kB
6.058 kB
react-tags
Tag
29.982 kB
9.439 kB
react-tags
TagGroup
74.404 kB
22.31 kB
react-text
Text - Default
16.705 kB
6.569 kB
react-text
Text - Wrappers
19.878 kB
6.896 kB
react-textarea
Textarea
30.947 kB
10.476 kB
react-theme
Single theme token import
69 B
89 B
react-theme
Teams: all themes
34.616 kB
7.317 kB
react-theme
Teams: Light theme
19.287 kB
5.498 kB
react-timepicker-compat
TimePicker
99.127 kB
32.864 kB
react-toast
Toast (including Toaster)
93.274 kB
28.044 kB
react-tooltip
Tooltip
53.515 kB
18.907 kB
react-utilities
SSRProvider
180 B
160 B
🤖 This report was generated against be3a3d59d5c30f75d55c739548d576594ddf5c53

@fabricteam
Copy link
Collaborator

fabricteam commented Jan 24, 2024

Perf Analysis (@fluentui/react-components)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 635 659 5000
Button mount 316 314 5000
Field mount 1138 1136 5000
FluentProvider mount 723 738 5000
FluentProviderWithTheme mount 74 93 10
FluentProviderWithTheme virtual-rerender 66 60 10
FluentProviderWithTheme virtual-rerender-with-unmount 75 78 10
MakeStyles mount 865 855 50000
Persona mount 1749 1758 5000
SpinButton mount 1403 1398 5000

@codesandbox-ci
Copy link

codesandbox-ci bot commented Jan 24, 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.

Latest deployment of this branch, based on commit 90a0f1f:

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

@fabricteam
Copy link
Collaborator

fabricteam commented Jan 24, 2024

🕵 fluentuiv8 No visual regressions between this PR and main

@fabricteam
Copy link
Collaborator

fabricteam commented Jan 24, 2024

Perf Analysis (@fluentui/react-northstar)

⚠️ 63 potential perf regressions detected

Potential regressions comparing to master

Scenario Current PR Ticks Baseline Ticks Ratio Regression Analysis
RefMinimalPerf.default 121 105 1.15:1 analysis
AccordionMinimalPerf.default 91 80 1.14:1 analysis
AlertMinimalPerf.default 169 155 1.09:1 analysis
IconMinimalPerf.default 405 372 1.09:1 analysis
ButtonMinimalPerf.default 88 83 1.06:1 analysis
ChatMinimalPerf.default 462 436 1.06:1 analysis
RosterPerf.default 1590 1503 1.06:1 analysis
FormMinimalPerf.default 224 214 1.05:1 analysis
GridMinimalPerf.default 200 190 1.05:1 analysis
BoxMinimalPerf.default 194 186 1.04:1 analysis
PopupMinimalPerf.default 357 342 1.04:1 analysis
PortalMinimalPerf.default 85 82 1.04:1 analysis
SegmentMinimalPerf.default 200 193 1.04:1 analysis
AnimationMinimalPerf.default 301 293 1.03:1 analysis
AttachmentSlotsPerf.default 657 637 1.03:1 analysis
CarouselMinimalPerf.default 262 254 1.03:1 analysis
DropdownManyItemsPerf.default 388 377 1.03:1 analysis
FlexMinimalPerf.default 159 154 1.03:1 analysis
ListCommonPerf.default 397 384 1.03:1 analysis
TreeMinimalPerf.default 474 461 1.03:1 analysis
AvatarMinimalPerf.default 114 112 1.02:1 analysis
ButtonSlotsPerf.default 321 314 1.02:1 analysis
DividerMinimalPerf.default 206 202 1.02:1 analysis
HeaderSlotsPerf.default 477 469 1.02:1 analysis
InputMinimalPerf.default 526 518 1.02:1 analysis
ItemLayoutMinimalPerf.default 701 689 1.02:1 analysis
MenuMinimalPerf.default 500 492 1.02:1 analysis
MenuButtonMinimalPerf.default 977 960 1.02:1 analysis
ProviderMinimalPerf.default 204 200 1.02:1 analysis
TooltipMinimalPerf.default 1278 1252 1.02:1 analysis
DatepickerMinimalPerf.default 3616 3588 1.01:1 analysis
LoaderMinimalPerf.default 198 196 1.01:1 analysis
SplitButtonMinimalPerf.default 2272 2256 1.01:1 analysis
StatusMinimalPerf.default 391 388 1.01:1 analysis
ToolbarMinimalPerf.default 538 535 1.01:1 analysis
CardMinimalPerf.default 314 315 1:1 analysis
ChatDuplicateMessagesPerf.default 147 147 1:1 analysis
DropdownMinimalPerf.default 1425 1429 1:1 analysis
HeaderMinimalPerf.default 201 201 1:1 analysis
ImageMinimalPerf.default 228 227 1:1 analysis
ProviderMergeThemesPerf.default 649 649 1:1 analysis
RadioGroupMinimalPerf.default 261 262 1:1 analysis
TableMinimalPerf.default 237 238 1:1 analysis
CustomToolbarPrototype.default 1483 1481 1:1 analysis
CheckboxMinimalPerf.default 1133 1141 0.99:1 analysis
ListWith60ListItems.default 370 375 0.99:1 analysis
ReactionMinimalPerf.default 215 217 0.99:1 analysis
ButtonOverridesMissPerf.default 660 675 0.98:1 analysis
EmbedMinimalPerf.default 1843 1888 0.98:1 analysis
ListMinimalPerf.default 312 319 0.98:1 analysis
ListNestedPerf.default 318 324 0.98:1 analysis
SkeletonMinimalPerf.default 191 195 0.98:1 analysis
DialogMinimalPerf.default 431 445 0.97:1 analysis
LabelMinimalPerf.default 220 226 0.97:1 analysis
LayoutMinimalPerf.default 197 203 0.97:1 analysis
SliderMinimalPerf.default 744 764 0.97:1 analysis
TextMinimalPerf.default 192 197 0.97:1 analysis
TextAreaMinimalPerf.default 287 297 0.97:1 analysis
VideoMinimalPerf.default 439 453 0.97:1 analysis
TableManyItemsPerf.default 1106 1148 0.96:1 analysis
AttachmentMinimalPerf.default 80 84 0.95:1 analysis
ChatWithPopoverPerf.default 184 196 0.94:1 analysis
TreeWith60ListItems.default 81 88 0.92:1 analysis
Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio

@fabricteam
Copy link
Collaborator

fabricteam commented Jan 24, 2024

🕵 FluentUIV0 No visual regressions between this PR and main

@fabricteam
Copy link
Collaborator

fabricteam commented Jan 24, 2024

🕵 fluentuiv9 No visual regressions between this PR and main

@fabricteam
Copy link
Collaborator

fabricteam commented Jan 24, 2024

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
BaseButton mount 621 626 5000
Breadcrumb mount 1690 1661 1000
Checkbox mount 1665 1675 5000
CheckboxBase mount 1445 1474 5000
ChoiceGroup mount 2893 2956 5000
ComboBox mount 659 658 1000
CommandBar mount 6174 6141 1000
ContextualMenu mount 12457 12015 1000
DefaultButton mount 764 743 5000
DetailsRow mount 2185 2183 5000
DetailsRowFast mount 2265 2219 5000
DetailsRowNoStyles mount 2001 2015 5000
Dialog mount 2822 2785 1000
DocumentCardTitle mount 226 217 1000
Dropdown mount 1943 1961 5000
FocusTrapZone mount 1142 1154 5000
FocusZone mount 1053 1068 5000
GroupedList mount 41868 41951 2
GroupedList virtual-rerender 20190 20096 2
GroupedList virtual-rerender-with-unmount 50682 50722 2
GroupedListV2 mount 219 219 2
GroupedListV2 virtual-rerender 210 213 2
GroupedListV2 virtual-rerender-with-unmount 229 226 2
IconButton mount 1066 1100 5000
Label mount 343 327 5000
Layer mount 2721 2738 5000
Link mount 385 388 5000
MenuButton mount 934 924 5000
MessageBar mount 21298 21240 5000
Nav mount 1904 1943 1000
OverflowSet mount 765 783 5000
Panel mount 1802 1842 1000
Persona mount 742 757 1000
Pivot mount 873 890 1000
PrimaryButton mount 838 834 5000
Rating mount 4588 4561 5000
SearchBox mount 907 898 5000
Shimmer mount 1902 1830 5000
Slider mount 1315 1347 5000
SpinButton mount 2869 2837 5000
Spinner mount 394 391 5000
SplitButton mount 1821 1783 5000
Stack mount 400 408 5000
StackWithIntrinsicChildren mount 848 853 5000
StackWithTextChildren mount 2586 2568 5000
SwatchColorPicker mount 6181 6231 5000
TagPicker mount 1472 1442 5000
Text mount 368 372 5000
TextField mount 951 927 5000
ThemeProvider mount 837 847 5000
ThemeProvider virtual-rerender 572 581 5000
ThemeProvider virtual-rerender-with-unmount 1250 1239 5000
Toggle mount 611 620 5000
buttonNative mount 198 192 5000

@size-auditor
Copy link

size-auditor bot commented Jan 24, 2024

Asset size changes

Project Bundle Baseline Size New Size Difference
office-ui-fabric-react fluentui-react-northstar-Design 36.723 kB 36.564 kB BelowBaseline     -159 bytes
office-ui-fabric-react fluentui-react-northstar-SvgIcon 37.687 kB 36.943 kB BelowBaseline     -744 bytes
office-ui-fabric-react fluentui-react-northstar-Flex 48.871 kB 47.826 kB BelowBaseline     -1.045 kB
office-ui-fabric-react fluentui-react-northstar-Animation 56.773 kB 55.673 kB BelowBaseline     -1.1 kB
office-ui-fabric-react fluentui-react-northstar-Portal 59.945 kB 58.663 kB BelowBaseline     -1.282 kB
office-ui-fabric-react fluentui-react-northstar-Provider 94.914 kB 93.609 kB BelowBaseline     -1.305 kB
office-ui-fabric-react fluentui-react-northstar-Debug 10.627 kB 9.046 kB BelowBaseline     -1.581 kB
office-ui-fabric-react fluentui-react-northstar-Grid 72.929 kB 70.679 kB BelowBaseline     -2.25 kB
office-ui-fabric-react fluentui-react-northstar-Image 76.197 kB 73.935 kB BelowBaseline     -2.262 kB
office-ui-fabric-react fluentui-react-northstar-TextArea 76.921 kB 74.592 kB BelowBaseline     -2.329 kB
office-ui-fabric-react fluentui-react-northstar-Text 76.793 kB 74.458 kB BelowBaseline     -2.335 kB
office-ui-fabric-react fluentui-react-northstar-Layout 78.093 kB 75.737 kB BelowBaseline     -2.356 kB
office-ui-fabric-react fluentui-react-northstar-Header 77.486 kB 75.1 kB BelowBaseline     -2.386 kB
office-ui-fabric-react fluentui-react-northstar-Skeleton 80.498 kB 78.109 kB BelowBaseline     -2.389 kB
office-ui-fabric-react fluentui-react-northstar-Box 78.012 kB 75.592 kB BelowBaseline     -2.42 kB
office-ui-fabric-react fluentui-react-northstar-ItemLayout 81.027 kB 78.575 kB BelowBaseline     -2.452 kB
office-ui-fabric-react fluentui-react-northstar-Segment 79.021 kB 76.553 kB BelowBaseline     -2.468 kB
office-ui-fabric-react fluentui-react-northstar-Video 78.225 kB 75.748 kB BelowBaseline     -2.477 kB
office-ui-fabric-react fluentui-react-northstar-Divider 79.452 kB 76.963 kB BelowBaseline     -2.489 kB
office-ui-fabric-react fluentui-react-northstar-Reaction 80.198 kB 77.624 kB BelowBaseline     -2.574 kB
office-ui-fabric-react fluentui-react-northstar-Label 80.842 kB 78.264 kB BelowBaseline     -2.578 kB
office-ui-fabric-react fluentui-react-northstar-Status 79.222 kB 76.616 kB BelowBaseline     -2.606 kB
office-ui-fabric-react fluentui-react-northstar-Loader 81.617 kB 78.96 kB BelowBaseline     -2.657 kB
office-ui-fabric-react fluentui-react-northstar-Avatar 83.367 kB 80.623 kB BelowBaseline     -2.744 kB
office-ui-fabric-react fluentui-react-northstar-Breadcrumb 83.002 kB 80.258 kB BelowBaseline     -2.744 kB
office-ui-fabric-react fluentui-react-northstar-Pill 86.917 kB 84.066 kB BelowBaseline     -2.851 kB
office-ui-fabric-react fluentui-react-northstar-Card 85.969 kB 83.043 kB BelowBaseline     -2.926 kB
office-ui-fabric-react fluentui-react-northstar-Checkbox 83.101 kB 80.151 kB BelowBaseline     -2.95 kB
office-ui-fabric-react fluentui-react-northstar-Button 86.471 kB 83.504 kB BelowBaseline     -2.967 kB
office-ui-fabric-react fluentui-react-northstar-Embed 84.808 kB 81.815 kB BelowBaseline     -2.993 kB
office-ui-fabric-react fluentui-react-northstar-Table 84.21 kB 81.134 kB BelowBaseline     -3.076 kB
office-ui-fabric-react fluentui-react-northstar-Input 91.771 kB 88.679 kB BelowBaseline     -3.092 kB
office-ui-fabric-react fluentui-react-northstar-RadioGroup 86.793 kB 83.619 kB BelowBaseline     -3.174 kB
office-ui-fabric-react fluentui-react-northstar-List 92.278 kB 89.087 kB BelowBaseline     -3.191 kB
office-ui-fabric-react fluentui-react-northstar-Attachment 90.379 kB 87.188 kB BelowBaseline     -3.191 kB
office-ui-fabric-react fluentui-react-northstar-Tree 91.48 kB 88.199 kB BelowBaseline     -3.281 kB
office-ui-fabric-react fluentui-react-northstar-Form 96.192 kB 92.861 kB BelowBaseline     -3.331 kB
office-ui-fabric-react fluentui-react-northstar-Slider 87.947 kB 84.604 kB BelowBaseline     -3.343 kB
office-ui-fabric-react fluentui-react-northstar-Alert 91.141 kB 87.794 kB BelowBaseline     -3.347 kB
office-ui-fabric-react fluentui-react-northstar-Accordion 89.113 kB 85.726 kB BelowBaseline     -3.387 kB
office-ui-fabric-react fluentui-react-northstar-Tooltip 112.153 kB 108.599 kB BelowBaseline     -3.554 kB
office-ui-fabric-react fluentui-react-northstar-Carousel 109.47 kB 105.519 kB BelowBaseline     -3.951 kB
office-ui-fabric-react fluentui-react-northstar-Popup 138.653 kB 133.929 kB BelowBaseline     -4.724 kB
office-ui-fabric-react fluentui-react-northstar-Dialog 117.233 kB 112.389 kB BelowBaseline     -4.844 kB
office-ui-fabric-react fluentui-react-northstar-Menu 132.602 kB 127.465 kB BelowBaseline     -5.137 kB
office-ui-fabric-react fluentui-react-northstar-Chat 159.566 kB 152.941 kB BelowBaseline     -6.625 kB
office-ui-fabric-react fluentui-react-northstar-Dropdown 203.95 kB 197.291 kB BelowBaseline     -6.659 kB
office-ui-fabric-react fluentui-react-northstar-MenuButton 168.562 kB 161.869 kB BelowBaseline     -6.693 kB
office-ui-fabric-react fluentui-react-northstar-Toolbar 181.044 kB 173.915 kB BelowBaseline     -7.129 kB
office-ui-fabric-react fluentui-react-northstar-SplitButton 184.882 kB 177.102 kB BelowBaseline     -7.78 kB
office-ui-fabric-react fluentui-react-northstar-Datepicker 193.953 kB 185.256 kB BelowBaseline     -8.697 kB

ExceedsTolerance Over Tolerance (1024 B) ExceedsBaseline Over Baseline BelowBaseline Below Baseline New New Deleted  Removed 1 kB = 1000 B

Baseline commit: be3a3d59d5c30f75d55c739548d576594ddf5c53 (build)

@Hotell Hotell marked this pull request as ready for review January 24, 2024 15:16
@Hotell Hotell requested a review from a team as a code owner January 24, 2024 15:16
@Hotell Hotell requested a review from layershifter January 24, 2024 15:16
@Hotell Hotell merged commit 69b17a0 into microsoft:master Jan 25, 2024
@Hotell Hotell deleted the bundle-size/migrate-to-monosize-1 branch January 25, 2024 13:50
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.

5 participants