Skip to content

Conversation

spmonahan
Copy link
Contributor

Just a test to see how much of a bundle impact updating to ES2022 brings

Updates all tsconfigs and swcrcs for react-components packages.
@spmonahan spmonahan requested a review from a team as a code owner September 12, 2025 22:08
Copy link

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
priority-overflow
createOverflowManager
4.481 kB
1.864 kB
4.321 kB
1.783 kB
-160 B
-81 B
react-accordion
Accordion (including children components)
108.537 kB
33.183 kB
107.728 kB
33.016 kB
-809 B
-167 B
react-avatar
Avatar
48.518 kB
15.508 kB
48.101 kB
15.382 kB
-417 B
-126 B
react-avatar
AvatarGroup
19.235 kB
7.617 kB
19.074 kB
7.562 kB
-161 B
-55 B
react-avatar
AvatarGroupItem
62.662 kB
19.727 kB
62.255 kB
19.611 kB
-407 B
-116 B
react-badge
Badge
25.089 kB
8.256 kB
24.928 kB
8.201 kB
-161 B
-55 B
react-badge
CounterBadge
25.869 kB
8.53 kB
25.708 kB
8.476 kB
-161 B
-54 B
react-badge
PresenceBadge
24.929 kB
9.147 kB
24.768 kB
9.089 kB
-161 B
-58 B
react-breadcrumb
@fluentui/react-breadcrumb - package
114.22 kB
31.522 kB
113.682 kB
31.417 kB
-538 B
-105 B
react-button
Button
36.705 kB
10.508 kB
36.456 kB
10.427 kB
-249 B
-81 B
react-button
CompoundButton
43.117 kB
11.812 kB
42.794 kB
11.708 kB
-323 B
-104 B
react-button
MenuButton
41.6 kB
11.902 kB
41.335 kB
11.813 kB
-265 B
-89 B
react-button
SplitButton
49.667 kB
13.477 kB
49.359 kB
13.378 kB
-308 B
-99 B
react-button
ToggleButton
52.636 kB
12.285 kB
52.373 kB
12.183 kB
-263 B
-102 B
react-calendar-compat
Calendar Compat
149.782 kB
39.934 kB
148.716 kB
39.705 kB
-1.066 kB
-229 B
react-card
Card - All
106.044 kB
29.799 kB
105.358 kB
29.682 kB
-686 B
-117 B
react-card
Card
98.69 kB
27.924 kB
98.193 kB
27.84 kB
-497 B
-84 B
react-card
CardFooter
13.662 kB
5.517 kB
13.501 kB
5.467 kB
-161 B
-50 B
react-card
CardHeader
16.195 kB
6.38 kB
15.861 kB
6.274 kB
-334 B
-106 B
react-card
CardPreview
13.729 kB
5.645 kB
13.532 kB
5.579 kB
-197 B
-66 B
react-charts
AreaChart
384.432 kB
117.19 kB
380.419 kB
116.357 kB
-4.013 kB
-833 B
react-charts
DeclarativeChart
680.732 kB
195.464 kB
676.719 kB
194.556 kB
-4.013 kB
-908 B
react-charts
DonutChart
296.516 kB
88.592 kB
293.016 kB
87.826 kB
-3.5 kB
-766 B
react-charts
FunnelChart
287.743 kB
85.563 kB
284.243 kB
84.786 kB
-3.5 kB
-777 B
react-charts
GanttChart
367.672 kB
110.706 kB
363.659 kB
109.824 kB
-4.013 kB
-882 B
react-charts
GaugeChart
310.819 kB
92.091 kB
306.806 kB
91.239 kB
-4.013 kB
-852 B
react-charts
GroupedVerticalBarChart
371.203 kB
111.812 kB
367.19 kB
110.966 kB
-4.013 kB
-846 B
react-charts
HeatMapChart
369.7 kB
112.325 kB
365.687 kB
111.497 kB
-4.013 kB
-828 B
react-charts
HorizontalBarChart
295.272 kB
86.894 kB
291.259 kB
85.719 kB
-4.013 kB
-1.175 kB
react-charts
Legends
234.845 kB
69.479 kB
231.684 kB
68.785 kB
-3.161 kB
-694 B
react-charts
LineChart
393.937 kB
118.727 kB
389.924 kB
117.852 kB
-4.013 kB
-875 B
react-charts
SankeyChart
198.839 kB
61.09 kB
196.868 kB
60.741 kB
-1.971 kB
-349 B
react-charts
ScatterChart
375.457 kB
113.246 kB
371.444 kB
112.367 kB
-4.013 kB
-879 B
react-charts
Sparkline
91.123 kB
28.692 kB
90.988 kB
28.666 kB
-135 B
-26 B
react-charts
VerticalBarChart
410.271 kB
118.795 kB
406.258 kB
117.932 kB
-4.013 kB
-863 B
react-charts
VerticalStackedBarChart
382.091 kB
114.656 kB
378.078 kB
113.759 kB
-4.013 kB
-897 B
react-checkbox
Checkbox
34.335 kB
11.786 kB
33.756 kB
11.607 kB
-579 B
-179 B
react-color-picker
ColorArea
49.32 kB
17.32 kB
49.024 kB
17.25 kB
-296 B
-70 B
react-color-picker
ColorPicker
17.95 kB
7.143 kB
17.782 kB
7.088 kB
-168 B
-55 B
react-color-picker
ColorSlider
41.493 kB
15.375 kB
41.277 kB
15.304 kB
-216 B
-71 B
react-combobox
Combobox (including child components)
106.952 kB
34.798 kB
104.309 kB
34.104 kB
-2.643 kB
-694 B
react-combobox
Dropdown (including child components)
107.582 kB
34.719 kB
105.085 kB
34.105 kB
-2.497 kB
-614 B
react-components
react-components: Button, FluentProvider & webLightTheme
68.796 kB
19.903 kB
68.198 kB
19.736 kB
-598 B
-167 B
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
236.691 kB
68.567 kB
232.726 kB
67.725 kB
-3.965 kB
-842 B
react-components
react-components: FluentProvider & webLightTheme
43.63 kB
14.257 kB
43.178 kB
14.142 kB
-452 B
-115 B
react-components
react-components: entire library
1.284 MB
323.352 kB
1.265 MB
318.342 kB
-19.38 kB
-5.01 kB
react-datepicker-compat
DatePicker Compat
226.653 kB
64.089 kB
223.642 kB
63.361 kB
-3.011 kB
-728 B
react-dialog
Dialog (including children components)
103.578 kB
30.891 kB
102.443 kB
30.674 kB
-1.135 kB
-217 B
react-divider
Divider
20.626 kB
7.654 kB
20.435 kB
7.591 kB
-191 B
-63 B
react-field
Field
22.657 kB
8.602 kB
21.961 kB
8.382 kB
-696 B
-220 B
react-image
Image
14.473 kB
5.919 kB
14.312 kB
5.873 kB
-161 B
-46 B
react-input
Input
27.148 kB
9.108 kB
26.64 kB
8.923 kB
-508 B
-185 B
react-jsx-runtime
Classic Pragma
1.101 kB
550 B
1.081 kB
539 B
-20 B
-11 B
react-jsx-runtime
JSX Dev Runtime
2.8 kB
1.251 kB
2.78 kB
1.244 kB
-20 B
-7 B
react-jsx-runtime
JSX Runtime
3.422 kB
1.493 kB
3.402 kB
1.489 kB
-20 B
-4 B
react-label
Label
13.799 kB
5.644 kB
13.638 kB
5.597 kB
-161 B
-47 B
react-link
Link
16.746 kB
6.785 kB
16.524 kB
6.713 kB
-222 B
-72 B
react-list
List
88.922 kB
26.387 kB
88.415 kB
26.297 kB
-507 B
-90 B
react-list
ListItem
112.381 kB
33.224 kB
111.515 kB
32.999 kB
-866 B
-225 B
react-menu
Menu (including children components)
165.115 kB
49.994 kB
162.322 kB
49.441 kB
-2.793 kB
-553 B
react-menu
Menu (including selectable components)
168.097 kB
50.588 kB
165.124 kB
49.987 kB
-2.973 kB
-601 B
react-message-bar
MessageBar (all components)
24.088 kB
8.96 kB
23.361 kB
8.779 kB
-727 B
-181 B
react-motion
@fluentui/react-motion - createMotionComponent()
4.109 kB
1.806 kB
3.709 kB
1.667 kB
-400 B
-139 B
react-motion
@fluentui/react-motion - createPresenceComponent()
5.771 kB
2.396 kB
5.34 kB
2.248 kB
-431 B
-148 B
react-motion
@fluentui/react-motion - PresenceGroup
1.727 kB
823 B
1.555 kB
747 B
-172 B
-76 B
react-overflow
hooks only
12.854 kB
4.828 kB
12.581 kB
4.728 kB
-273 B
-100 B
react-persona
Persona
55.409 kB
17.389 kB
54.992 kB
17.271 kB
-417 B
-118 B
react-popover
Popover
132.3 kB
41.178 kB
130.146 kB
40.76 kB
-2.154 kB
-418 B
react-portal
Portal
15.411 kB
5.385 kB
15.144 kB
5.304 kB
-267 B
-81 B
react-portal-compat
PortalCompatProvider
8.386 kB
2.624 kB
8.212 kB
2.57 kB
-174 B
-54 B
react-positioning
usePositioning
28.865 kB
10.146 kB
28.194 kB
9.98 kB
-671 B
-166 B
react-positioning
useSafeZoneArea
12.29 kB
4.967 kB
12.1 kB
4.92 kB
-190 B
-47 B
react-progress
ProgressBar
16.593 kB
6.613 kB
16.34 kB
6.554 kB
-253 B
-59 B
react-provider
FluentProvider
23.806 kB
8.557 kB
23.354 kB
8.437 kB
-452 B
-120 B
react-radio
Radio
31.8 kB
10.006 kB
31.517 kB
9.934 kB
-283 B
-72 B
react-radio
RadioGroup
14.889 kB
6.09 kB
14.291 kB
5.882 kB
-598 B
-208 B
react-select
Select
26.95 kB
9.833 kB
26.442 kB
9.646 kB
-508 B
-187 B
react-slider
Slider
37.211 kB
12.461 kB
36.697 kB
12.29 kB
-514 B
-171 B
react-spinbutton
SpinButton
34.431 kB
11.449 kB
33.784 kB
11.217 kB
-647 B
-232 B
react-spinner
Spinner
24.396 kB
8.201 kB
24.104 kB
8.123 kB
-292 B
-78 B
react-swatch-picker
@fluentui/react-swatch-picker - package
106.047 kB
30.539 kB
105.276 kB
30.322 kB
-771 B
-217 B
react-switch
Switch
34.51 kB
11.014 kB
33.911 kB
10.819 kB
-599 B
-195 B
react-table
DataGrid
161.061 kB
45.539 kB
158.232 kB
44.886 kB
-2.829 kB
-653 B
react-table
Table (Primitives only)
41.978 kB
13.573 kB
41.14 kB
13.379 kB
-838 B
-194 B
react-table
Table as DataGrid
131.484 kB
36.345 kB
129.964 kB
35.956 kB
-1.52 kB
-389 B
react-table
Table (Selection only)
69.846 kB
19.704 kB
68.44 kB
19.31 kB
-1.406 kB
-394 B
react-table
Table (Sort only)
68.489 kB
19.321 kB
67.223 kB
18.967 kB
-1.266 kB
-354 B
react-tag-picker
@fluentui/react-tag-picker - package
188.33 kB
56.457 kB
185.118 kB
55.711 kB
-3.212 kB
-746 B
react-tags
InteractionTag
14.561 kB
5.865 kB
14.325 kB
5.788 kB
-236 B
-77 B
react-tags
Tag
30.379 kB
9.779 kB
30.042 kB
9.677 kB
-337 B
-102 B
react-tags
TagGroup
83.125 kB
24.561 kB
82.604 kB
24.47 kB
-521 B
-91 B
react-teaching-popover
TeachingPopover
102.777 kB
30.738 kB
101.152 kB
30.431 kB
-1.625 kB
-307 B
react-text
Text - Default
16.19 kB
6.366 kB
15.971 kB
6.291 kB
-219 B
-75 B
react-text
Text - Wrappers
19.35 kB
6.695 kB
19.189 kB
6.635 kB
-161 B
-60 B
react-textarea
Textarea
25.53 kB
9.361 kB
25.022 kB
9.174 kB
-508 B
-187 B
react-timepicker-compat
TimePicker
109.935 kB
36.335 kB
107.062 kB
35.574 kB
-2.873 kB
-761 B
react-toast
Toast (including Toaster)
103.665 kB
31.028 kB
101.168 kB
30.51 kB
-2.497 kB
-518 B
react-tooltip
Tooltip
57.922 kB
20.084 kB
56.406 kB
19.721 kB
-1.516 kB
-363 B
react-tree
FlatTree
149.326 kB
42.711 kB
146.329 kB
42.01 kB
-2.997 kB
-701 B
react-tree
PersonaFlatTree
150.082 kB
42.837 kB
147.087 kB
42.123 kB
-2.995 kB
-714 B
react-tree
PersonaTree
146.34 kB
41.686 kB
143.57 kB
41.052 kB
-2.77 kB
-634 B
react-tree
Tree
145.588 kB
41.562 kB
142.82 kB
40.918 kB
-2.768 kB
-644 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
keyboard-keys
Multiple keyCodes
50 B
70 B
keyboard-keys
Multiple keys
87 B
94 B
keyboard-keys
Single key
44 B
64 B
keyboard-keys
Single keyCode
39 B
59 B
react
ActivityItem
71.196 kB
23.345 kB
react
Announced
38.466 kB
13.274 kB
react
Autofill
15.42 kB
4.766 kB
react
Breadcrumb
200.704 kB
59.591 kB
react
Button
194.253 kB
55.877 kB
react
ButtonGrid
179.141 kB
53.883 kB
react
Calendar
121.126 kB
36.822 kB
react
Callout
84.233 kB
27.586 kB
react
Check
53.182 kB
17.832 kB
react
Checkbox
59.948 kB
19.872 kB
react
ChoiceGroup
65.458 kB
21.462 kB
react
ChoiceGroupOption
58.745 kB
19.351 kB
react
Coachmark
92.652 kB
29.303 kB
react
Color
7.789 kB
3.127 kB
react
ColorPicker
134.856 kB
42.108 kB
react
ComboBox
250.586 kB
71.503 kB
react
CommandBar
201.76 kB
59.381 kB
react
ContextualMenu
154.128 kB
47.559 kB
react
DatePicker
183.167 kB
55.875 kB
react
DateTimeUtilities
5.244 kB
1.849 kB
react
DetailsList
229.894 kB
65.799 kB
react
Dialog
210.059 kB
62.349 kB
react
Divider
19.582 kB
6.838 kB
react
DocumentCard
215.742 kB
63.648 kB
react
DragDrop
8.343 kB
2.724 kB
react
DraggableZone
34.28 kB
11.488 kB
react
Dropdown
233.05 kB
67.954 kB
react
ExtendedPicker
96.823 kB
27.866 kB
react
Fabric
41.722 kB
14.34 kB
react
Facepile
209.276 kB
62.369 kB
react
FloatingPicker
240.764 kB
68.214 kB
react
FocusTrapZone
16.978 kB
5.889 kB
react
FocusZone
55.1 kB
17.451 kB
react
Grid
179.141 kB
53.883 kB
react
GroupedList
135.012 kB
40.664 kB
react
GroupedListV2
122.629 kB
37.753 kB
react
HoverCard
96.718 kB
30.685 kB
react
Icon
51.863 kB
17.261 kB
react
Icons
66.339 kB
24.385 kB
react
Image
46.877 kB
15.692 kB
react
Keytip
81.241 kB
26.671 kB
react
KeytipData
14.032 kB
4.582 kB
react
KeytipLayer
103.029 kB
31.896 kB
react
Keytips
105.801 kB
32.898 kB
react
Label
38.318 kB
13.239 kB
react
Layer
48.077 kB
16.346 kB
react
Link
39.659 kB
13.651 kB
react
List
39.346 kB
12.454 kB
react
MarqueeSelection
74.484 kB
22.396 kB
react
MessageBar
189.287 kB
56.32 kB
react
Modal
93.678 kB
30.217 kB
react
Nav
186.724 kB
55.713 kB
react
OverflowSet
33.336 kB
11.279 kB
react
Overlay
40.879 kB
14.075 kB
react
Panel
200.226 kB
59.327 kB
react
Persona
114.513 kB
36.43 kB
react
PersonaCoin
114.513 kB
36.43 kB
react
PersonaPresence
58.052 kB
19.371 kB
react
Pickers
297.809 kB
82.985 kB
react
Pivot
187.621 kB
56.485 kB
react
Popup
12.294 kB
4.195 kB
react
Positioning
22.764 kB
7.683 kB
react
PositioningContainer
73.415 kB
23.685 kB
react
ProgressIndicator
39.471 kB
13.526 kB
react
Rating
82.056 kB
26.086 kB
react
Fluent UI React (entire library)
1.019 MB
283.153 kB
react
ResizeGroup
13.338 kB
4.377 kB
react
ResponsiveMode
8.13 kB
2.966 kB
react
ScrollablePane
55.535 kB
17.715 kB
react
SearchBox
187.523 kB
55.912 kB
react
SelectableOption
724 B
413 B
react
SelectedItemsList
231.249 kB
67.169 kB
react
Selection
42.418 kB
12.26 kB
react
Separator
35.359 kB
12.13 kB
react
Shimmer
49.237 kB
16.255 kB
react
ShimmeredDetailsList
240.675 kB
68.541 kB
react
Slider
57.615 kB
19.194 kB
react
SpinButton
191.196 kB
56.998 kB
react
Spinner
41.753 kB
14.466 kB
react
Stack
42.03 kB
14.386 kB
react
Sticky
32.577 kB
10.488 kB
react
Styling
46.033 kB
15.135 kB
react
SwatchColorPicker
189.536 kB
57.41 kB
react
TeachingBubble
204.538 kB
60.3 kB
react
Text
36.886 kB
12.806 kB
react
TextField
80.768 kB
25.3 kB
react
Theme
43.486 kB
14.168 kB
react
ThemeGenerator
12.384 kB
4.116 kB
react
TimePicker
240.414 kB
69.299 kB
react
Toggle
46.189 kB
15.954 kB
react
Tooltip
87.013 kB
28.144 kB
react
Utilities
82.932 kB
25.149 kB
react
Viewport
23.872 kB
7.642 kB
react
WeeklyDayPicker
101.318 kB
31.639 kB
react
WindowProvider
1.059 kB
541 B
react-aria
ARIA - Default
237 B
181 B
react-charts
HorizontalBarChartWithAxis
63 B
83 B
react-theme
Single theme token import
69 B
89 B
react-theme
Teams: all themes
36.081 kB
7.658 kB
react-theme
Teams: Light theme
20.025 kB
5.723 kB
react-utilities
SSRProvider
180 B
160 B
🤖 This report was generated against 4a918f6595f1d0c7f265b730f7cab872ff7380fb

Copy link

Pull request demo site: URL

"transform": {
"react": {
"runtime": "classic",
"useSpread": true

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🕵🏾‍♀️ visual changes to review in the Visual Change Report

vr-tests-react-components/Drawer 1 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/Drawer.overlay drawer full - High Contrast.chromium.png 4942 Changed
vr-tests-react-components/Positioning 2 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/Positioning.Positioning end.updated 2 times.chromium.png 311 Changed
vr-tests-react-components/Positioning.Positioning end.chromium.png 702 Changed
vr-tests-react-components/TagPicker 3 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/TagPicker.disabled - Dark Mode.disabled input hover.chromium.png 659 Changed
vr-tests-react-components/TagPicker.disabled - RTL.disabled input hover.chromium.png 635 Changed
vr-tests-react-components/TagPicker.disabled.disabled input hover.chromium.png 678 Changed
vr-tests-web-components/Avatar 1 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-web-components/Avatar. - Dark Mode.normal.chromium.png 10381 Changed
vr-tests-web-components/Badge 1 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-web-components/Badge. - Dark Mode.normal.chromium.png 444 Changed
vr-tests-web-components/MenuList 1 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-web-components/MenuList. - RTL.2nd selected.chromium.png 17 Changed
vr-tests-web-components/Switch 1 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-web-components/Switch. - Dark Mode.normal.chromium_1.png 92 Changed
vr-tests/Callout 13 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests/Callout.Left center.default.chromium.png 2544 Changed
vr-tests/Callout.Bottom right edge.default.chromium.png 1120 Changed
vr-tests/Callout.Left top edge.default.chromium.png 2168 Changed
vr-tests/Callout.Beak 25.default.chromium.png 2185 Changed
vr-tests/Callout.Gap space 25.default.chromium.png 2181 Changed
vr-tests/Callout.No beak.default.chromium.png 2177 Changed
vr-tests/Callout.No callout width specified.default.chromium.png 2126 Changed
vr-tests/Callout.Right bottom edge.default.chromium.png 3037 Changed
vr-tests/Callout.Right center.default.chromium.png 2080 Changed
vr-tests/Callout.Right top edge.default.chromium.png 1116 Changed
vr-tests/Callout.Top center.default.chromium.png 2113 Changed
vr-tests/Callout.Top right edge.default.chromium.png 1134 Changed
vr-tests/Callout.Top left edge.default.chromium.png 2196 Changed
vr-tests/Coachmark 1 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests/Coachmark.Collapsed.default.chromium.png 159 Changed
vr-tests/react-charting-GaugeChart 1 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests/react-charting-GaugeChart.Basic.default.chromium.png 2 Changed
vr-tests/react-charting-LineChart 2 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests/react-charting-LineChart.Events.default.chromium.png 17 Changed
vr-tests/react-charting-LineChart.Multiple.default.chromium.png 192 Changed
vr-tests/react-charting-VerticalBarChart 1 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests/react-charting-VerticalBarChart.Basic - Secondary Y Axis.default.chromium.png 3 Changed

There were 4 duplicate changes discarded. Check the build logs for more information.

@Hotell
Copy link
Contributor

Hotell commented Sep 19, 2025

we will bump to 2020, which should be the biggest delta ( cause by ? operator ), besides that AFAIR there shouldn't be significant diff

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.

2 participants