Skip to content

Conversation

@Hotell
Copy link
Contributor

@Hotell Hotell commented Jun 15, 2023

Previous Behavior

v8 and v0 use size-auditor which lives in apps/test-bundles. This cannot be easily configured nor run on CI only if particular packages have been affected, thus consuming unnecessary resources.

New Behavior

bundle-size-auditor CLI

apps/test-bundles is replaced with genereic CLI tool called bundle-size-auditor

This tool is used within react and react-northstar packages for all bundle-size related processing which produces metadata that we sent to lightrail service for auditing capabilities.

See the tool Readme for more info

Usage:

yarn lage bundle-size-auditor --to @fluentui/react

or on CI only for affected packages yarn lage bundle-size-auditor --since=origin/master

CI

bundle size setup for v8,v0 is simplified to one command yarn lage bundle-size-auditor --since=origin/master

Related Issue(s)

@github-actions github-actions bot added this to the June Project Cycle Q2 2023 milestone Jun 15, 2023
@Hotell Hotell changed the title Hotell/ci/fix size auditor pipelines v3 feat(scripts-bundle-size-auditor): refactor test-bundles app into a generic tool that enables faster CI Jun 15, 2023
@Hotell Hotell force-pushed the hotell/ci/fix-size-auditor-pipelines-v3 branch from 41f2b63 to 852d3cf Compare June 15, 2023 16:22
@Hotell Hotell added Area: Build System Fluent UI react-northstar (v0) Work related to Fluent UI V0 Fluent UI react (v8) Issues about @fluentui/react (v8) CI labels Jun 15, 2023
@codesandbox-ci
Copy link

codesandbox-ci bot commented Jun 15, 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 d5f2cdb:

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

@fabricteam
Copy link
Collaborator

fabricteam commented Jun 15, 2023

📊 Bundle size report

Unchanged fixtures
Package & Exports Size (minified/GZIP)
global-context
createContext
510 B
330 B
global-context
createContextSelector
537 B
342 B
priority-overflow
createOverflowManager
4.204 kB
1.656 kB
react-accordion
Accordion (including children components)
88.246 kB
26.712 kB
react-alert
Alert
82.552 kB
21.771 kB
react-avatar
Avatar
47.7 kB
14.504 kB
react-avatar
AvatarGroup
15.682 kB
6.306 kB
react-avatar
AvatarGroupItem
63.876 kB
18.984 kB
react-badge
Badge
23.591 kB
7.264 kB
react-badge
CounterBadge
24.493 kB
7.565 kB
react-badge
PresenceBadge
22.213 kB
7.872 kB
react-button
Button
36.778 kB
9.51 kB
react-button
CompoundButton
43.932 kB
10.99 kB
react-button
MenuButton
40.965 kB
10.705 kB
react-button
SplitButton
49.197 kB
12.27 kB
react-button
ToggleButton
55.06 kB
11.446 kB
react-card
Card - All
88.829 kB
25.141 kB
react-card
Card
83.764 kB
23.685 kB
react-card
CardFooter
9.229 kB
3.9 kB
react-card
CardHeader
11.125 kB
4.596 kB
react-card
CardPreview
10.034 kB
4.248 kB
react-checkbox
Checkbox
33.164 kB
10.699 kB
react-combobox
Combobox (including child components)
86.98 kB
28.084 kB
react-combobox
Dropdown (including child components)
85.321 kB
27.675 kB
react-components
react-components: Button, FluentProvider & webLightTheme
65.162 kB
17.952 kB
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
210.365 kB
58.697 kB
react-components
react-components: FluentProvider & webLightTheme
36.395 kB
11.996 kB
react-datepicker-compat
DatePicker Compat
221.863 kB
59.081 kB
react-dialog
Dialog (including children components)
92.072 kB
27.46 kB
react-divider
Divider
17.477 kB
6.357 kB
react-field
Field
18.003 kB
6.931 kB
react-image
Image
11.55 kB
4.627 kB
react-infobutton
InfoButton
131.161 kB
40.259 kB
react-infobutton
InfoLabel
134.626 kB
41.328 kB
react-input
Input
24.219 kB
7.781 kB
react-label
Label
10.175 kB
4.243 kB
react-link
Link
12.375 kB
5.113 kB
react-menu
Menu (including children components)
132.358 kB
40.508 kB
react-menu
Menu (including selectable components)
135.122 kB
41.002 kB
react-overflow
hooks only
12.461 kB
4.609 kB
react-persona
Persona
54.621 kB
16.435 kB
react-popover
Popover
119.751 kB
36.834 kB
react-portal
Portal
11.82 kB
4.391 kB
react-portal-compat
PortalCompatProvider
6.473 kB
2.196 kB
react-positioning
usePositioning
24.249 kB
8.856 kB
react-progress
ProgressBar
13.927 kB
5.488 kB
react-provider
FluentProvider
18.115 kB
6.719 kB
react-radio
Radio
26.952 kB
8.608 kB
react-radio
RadioGroup
11.362 kB
4.753 kB
react-select
Select
24.915 kB
8.708 kB
react-slider
Slider
34.358 kB
11.107 kB
react-spinbutton
SpinButton
33.452 kB
10.296 kB
react-spinner
Spinner
21.363 kB
7.021 kB
react-switch
Switch
29.472 kB
9.226 kB
react-table
DataGrid
156.306 kB
42.785 kB
react-table
Table (Primitives only)
44.652 kB
12.468 kB
react-table
Table as DataGrid
131.96 kB
33.791 kB
react-table
Table (Selection only)
77.561 kB
19.178 kB
react-table
Table (Sort only)
76.891 kB
18.989 kB
react-tags
Tag
23.153 kB
7.922 kB
react-text
Text - Default
12.563 kB
4.972 kB
react-text
Text - Wrappers
15.713 kB
5.293 kB
react-textarea
Textarea
27.69 kB
9.125 kB
react-theme
Single theme token import
69 B
89 B
react-theme
Teams: all themes
31.987 kB
6.85 kB
react-theme
Teams: Light theme
18.121 kB
5.194 kB
react-tooltip
Tooltip
47.263 kB
16.585 kB
react-utilities
SSRProvider
180 B
159 B
🤖 This report was generated against 9b5b3f33ad05e2dce6457c72b9e5ffa352033e47

@fabricteam
Copy link
Collaborator

fabricteam commented Jun 15, 2023

Perf Analysis (@fluentui/react-northstar)

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
AccordionMinimalPerf.default 86 78 1.1:1
ButtonSlotsPerf.default 325 300 1.08:1
PortalMinimalPerf.default 88 82 1.07:1
SkeletonMinimalPerf.default 208 195 1.07:1
AnimationMinimalPerf.default 306 290 1.06:1
HeaderMinimalPerf.default 214 202 1.06:1
ChatWithPopoverPerf.default 196 186 1.05:1
SegmentMinimalPerf.default 201 191 1.05:1
AvatarMinimalPerf.default 111 107 1.04:1
ButtonMinimalPerf.default 94 90 1.04:1
CarouselMinimalPerf.default 274 264 1.04:1
DialogMinimalPerf.default 461 445 1.04:1
GridMinimalPerf.default 194 186 1.04:1
InputMinimalPerf.default 538 519 1.04:1
ListNestedPerf.default 329 315 1.04:1
MenuButtonMinimalPerf.default 988 951 1.04:1
ProviderMinimalPerf.default 207 199 1.04:1
StatusMinimalPerf.default 398 384 1.04:1
CardMinimalPerf.default 312 304 1.03:1
ChatDuplicateMessagesPerf.default 158 154 1.03:1
PopupMinimalPerf.default 360 348 1.03:1
SliderMinimalPerf.default 758 739 1.03:1
ToolbarMinimalPerf.default 539 525 1.03:1
AttachmentMinimalPerf.default 86 84 1.02:1
ProviderMergeThemesPerf.default 674 658 1.02:1
TextMinimalPerf.default 201 198 1.02:1
AttachmentSlotsPerf.default 645 638 1.01:1
BoxMinimalPerf.default 196 194 1.01:1
RosterPerf.default 1565 1543 1.01:1
SplitButtonMinimalPerf.default 2265 2244 1.01:1
ButtonOverridesMissPerf.default 650 650 1:1
ChatMinimalPerf.default 451 451 1:1
HeaderSlotsPerf.default 466 466 1:1
ImageMinimalPerf.default 227 227 1:1
ItemLayoutMinimalPerf.default 704 704 1:1
ListWith60ListItems.default 373 372 1:1
RadioGroupMinimalPerf.default 269 269 1:1
TableManyItemsPerf.default 1121 1125 1:1
TableMinimalPerf.default 232 233 1:1
TextAreaMinimalPerf.default 285 284 1:1
CustomToolbarPrototype.default 1503 1501 1:1
TreeWith60ListItems.default 87 87 1:1
AlertMinimalPerf.default 156 157 0.99:1
DatepickerMinimalPerf.default 3858 3890 0.99:1
DropdownManyItemsPerf.default 399 404 0.99:1
EmbedMinimalPerf.default 1853 1864 0.99:1
MenuMinimalPerf.default 500 507 0.99:1
RefMinimalPerf.default 114 115 0.99:1
TreeMinimalPerf.default 483 487 0.99:1
CheckboxMinimalPerf.default 1137 1158 0.98:1
DropdownMinimalPerf.default 1429 1453 0.98:1
FlexMinimalPerf.default 156 159 0.98:1
LayoutMinimalPerf.default 204 208 0.98:1
ListCommonPerf.default 393 402 0.98:1
ReactionMinimalPerf.default 211 215 0.98:1
TooltipMinimalPerf.default 1252 1282 0.98:1
DividerMinimalPerf.default 204 210 0.97:1
LabelMinimalPerf.default 220 227 0.97:1
LoaderMinimalPerf.default 190 195 0.97:1
VideoMinimalPerf.default 420 431 0.97:1
FormMinimalPerf.default 219 229 0.96:1
IconMinimalPerf.default 387 402 0.96:1
ListMinimalPerf.default 304 329 0.92:1

@fabricteam
Copy link
Collaborator

fabricteam commented Jun 16, 2023

Perf Analysis (@fluentui/react-components)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 594 574 5000
Button mount 297 303 5000
Field mount 1029 1010 5000
FluentProvider mount 635 646 5000
FluentProviderWithTheme mount 75 73 10
FluentProviderWithTheme virtual-rerender 61 58 10
FluentProviderWithTheme virtual-rerender-with-unmount 72 71 10
InfoButton mount 14 11 5000
MakeStyles mount 845 880 50000
Persona mount 1619 1597 5000
SpinButton mount 1276 1320 5000

@fabricteam
Copy link
Collaborator

fabricteam commented Jun 16, 2023

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
BaseButton mount 618 633 5000
Breadcrumb mount 1650 1665 1000
Checkbox mount 1694 1696 5000
CheckboxBase mount 1460 1481 5000
ChoiceGroup mount 2964 2961 5000
ComboBox mount 653 645 1000
CommandBar mount 6113 6232 1000
ContextualMenu mount 11742 11980 1000
DefaultButton mount 728 771 5000
DetailsRow mount 2160 2198 5000
DetailsRowFast mount 2174 2212 5000
DetailsRowNoStyles mount 2041 1999 5000
Dialog mount 2727 2799 1000
DocumentCardTitle mount 218 238 1000
Dropdown mount 1968 2005 5000
FocusTrapZone mount 1125 1153 5000
FocusZone mount 1068 1045 5000
GroupedList mount 41270 41256 2
GroupedList virtual-rerender 19766 19628 2
GroupedList virtual-rerender-with-unmount 49889 50205 2
GroupedListV2 mount 235 216 2
GroupedListV2 virtual-rerender 206 198 2
GroupedListV2 virtual-rerender-with-unmount 225 231 2
IconButton mount 1118 1093 5000
Label mount 330 335 5000
Layer mount 2703 2688 5000
Link mount 391 387 5000
MenuButton mount 939 930 5000
MessageBar mount 21467 21449 5000
Nav mount 1947 1937 1000
OverflowSet mount 784 773 5000
Panel mount 1814 1742 1000
Persona mount 721 722 1000
Pivot mount 848 847 1000
PrimaryButton mount 839 824 5000
Rating mount 4601 4567 5000
SearchBox mount 916 885 5000
Shimmer mount 1885 1829 5000
Slider mount 1328 1322 5000
SpinButton mount 2850 2875 5000
Spinner mount 393 386 5000
SplitButton mount 1827 1780 5000
Stack mount 404 408 5000
StackWithIntrinsicChildren mount 859 893 5000
StackWithTextChildren mount 2620 2637 5000
SwatchColorPicker mount 6149 6074 5000
TagPicker mount 1422 1456 5000
Text mount 369 375 5000
TextField mount 940 939 5000
ThemeProvider mount 837 841 5000
ThemeProvider virtual-rerender 581 588 5000
ThemeProvider virtual-rerender-with-unmount 1265 1258 5000
Toggle mount 607 619 5000
buttonNative mount 194 184 5000

@fabricteam
Copy link
Collaborator

fabricteam commented Jun 16, 2023

🕵 fluentuiv9 No visual regressions between this PR and main

@Hotell Hotell force-pushed the hotell/ci/fix-size-auditor-pipelines-v3 branch from 8c3ebb1 to 21718f4 Compare June 16, 2023 12:17
…Config to replace need of 'packageName' which doenst provide any context on caller site
@microsoft microsoft deleted a comment from size-auditor bot Jun 19, 2023
@size-auditor
Copy link

size-auditor bot commented Jun 19, 2023

Asset size changes

Project Bundle Baseline Size New Size Difference
office-ui-fabric-react fluentui-react-northstar-SvgIcon 37.691 kB 37.687 kB BelowBaseline     -4 bytes
office-ui-fabric-react fluentui-react-northstar-Toolbar 180.862 kB 180.854 kB BelowBaseline     -8 bytes
office-ui-fabric-react fluentui-react-northstar-Provider 94.924 kB 94.914 kB BelowBaseline     -10 bytes
office-ui-fabric-react fluentui-react-northstar-Animation 56.787 kB 56.773 kB BelowBaseline     -14 bytes
office-ui-fabric-react fluentui-react-northstar-Flex 48.886 kB 48.871 kB BelowBaseline     -15 bytes
office-ui-fabric-react fluentui-react-northstar-ItemLayout 81.005 kB 80.989 kB BelowBaseline     -16 bytes
office-ui-fabric-react fluentui-react-northstar-Label 80.82 kB 80.804 kB BelowBaseline     -16 bytes
office-ui-fabric-react fluentui-react-northstar-Layout 78.071 kB 78.055 kB BelowBaseline     -16 bytes
office-ui-fabric-react fluentui-react-northstar-List 92.256 kB 92.24 kB BelowBaseline     -16 bytes
office-ui-fabric-react fluentui-react-northstar-Loader 81.595 kB 81.579 kB BelowBaseline     -16 bytes
office-ui-fabric-react fluentui-react-northstar-Pill 86.895 kB 86.879 kB BelowBaseline     -16 bytes
office-ui-fabric-react fluentui-react-northstar-Image 76.175 kB 76.159 kB BelowBaseline     -16 bytes
office-ui-fabric-react fluentui-react-northstar-Reaction 80.176 kB 80.16 kB BelowBaseline     -16 bytes
office-ui-fabric-react fluentui-react-northstar-Segment 78.999 kB 78.983 kB BelowBaseline     -16 bytes
office-ui-fabric-react fluentui-react-northstar-Skeleton 80.476 kB 80.46 kB BelowBaseline     -16 bytes
office-ui-fabric-react fluentui-react-northstar-Slider 87.925 kB 87.909 kB BelowBaseline     -16 bytes
office-ui-fabric-react fluentui-react-northstar-Status 79.2 kB 79.184 kB BelowBaseline     -16 bytes
office-ui-fabric-react fluentui-react-northstar-Tooltip 112.116 kB 112.1 kB BelowBaseline     -16 bytes
office-ui-fabric-react fluentui-react-northstar-Table 84.188 kB 84.172 kB BelowBaseline     -16 bytes
office-ui-fabric-react fluentui-react-northstar-Text 76.771 kB 76.755 kB BelowBaseline     -16 bytes
office-ui-fabric-react fluentui-react-northstar-TextArea 76.899 kB 76.883 kB BelowBaseline     -16 bytes
office-ui-fabric-react fluentui-react-northstar-Input 91.749 kB 91.733 kB BelowBaseline     -16 bytes
office-ui-fabric-react fluentui-react-northstar-Tree 91.458 kB 91.442 kB BelowBaseline     -16 bytes
office-ui-fabric-react fluentui-react-northstar-Header 77.464 kB 77.448 kB BelowBaseline     -16 bytes
office-ui-fabric-react fluentui-react-northstar-Grid 72.907 kB 72.891 kB BelowBaseline     -16 bytes
office-ui-fabric-react fluentui-react-northstar-Accordion 89.091 kB 89.075 kB BelowBaseline     -16 bytes
office-ui-fabric-react fluentui-react-northstar-Alert 91.119 kB 91.103 kB BelowBaseline     -16 bytes
office-ui-fabric-react fluentui-react-northstar-Attachment 90.357 kB 90.341 kB BelowBaseline     -16 bytes
office-ui-fabric-react fluentui-react-northstar-Avatar 83.345 kB 83.329 kB BelowBaseline     -16 bytes
office-ui-fabric-react fluentui-react-northstar-Box 77.99 kB 77.974 kB BelowBaseline     -16 bytes
office-ui-fabric-react fluentui-react-northstar-Breadcrumb 82.98 kB 82.964 kB BelowBaseline     -16 bytes
office-ui-fabric-react fluentui-react-northstar-Button 86.449 kB 86.433 kB BelowBaseline     -16 bytes
office-ui-fabric-react fluentui-react-northstar-Card 85.947 kB 85.931 kB BelowBaseline     -16 bytes
office-ui-fabric-react fluentui-react-northstar-Checkbox 83.079 kB 83.063 kB BelowBaseline     -16 bytes
office-ui-fabric-react fluentui-react-northstar-Video 78.203 kB 78.187 kB BelowBaseline     -16 bytes
office-ui-fabric-react fluentui-react-northstar-Design 36.739 kB 36.723 kB BelowBaseline     -16 bytes
office-ui-fabric-react fluentui-react-northstar-Divider 79.43 kB 79.414 kB BelowBaseline     -16 bytes
office-ui-fabric-react fluentui-react-northstar-Embed 84.786 kB 84.77 kB BelowBaseline     -16 bytes
office-ui-fabric-react fluentui-react-northstar-Form 96.17 kB 96.154 kB BelowBaseline     -16 bytes
office-ui-fabric-react fluentui-react-northstar-Popup 138.485 kB 138.468 kB BelowBaseline     -17 bytes
office-ui-fabric-react fluentui-react-northstar-Chat 159.463 kB 159.446 kB BelowBaseline     -17 bytes
office-ui-fabric-react fluentui-react-northstar-Carousel 109.449 kB 109.432 kB BelowBaseline     -17 bytes
office-ui-fabric-react fluentui-react-northstar-Menu 132.514 kB 132.497 kB BelowBaseline     -17 bytes
office-ui-fabric-react fluentui-react-northstar-Dialog 117.074 kB 117.057 kB BelowBaseline     -17 bytes
office-ui-fabric-react fluentui-react-northstar-RadioGroup 86.772 kB 86.755 kB BelowBaseline     -17 bytes
office-ui-fabric-react fluentui-react-northstar-Portal 59.829 kB 59.811 kB BelowBaseline     -18 bytes
office-ui-fabric-react fluentui-react-northstar-SplitButton 184.715 kB 184.697 kB BelowBaseline     -18 bytes
office-ui-fabric-react fluentui-react-northstar-MenuButton 168.395 kB 168.377 kB BelowBaseline     -18 bytes
office-ui-fabric-react fluentui-react-northstar-Datepicker 193.787 kB 193.768 kB BelowBaseline     -19 bytes
office-ui-fabric-react fluentui-react-northstar-Dropdown 203.798 kB 203.774 kB BelowBaseline     -24 bytes

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

Baseline commit: 9b5b3f33ad05e2dce6457c72b9e5ffa352033e47 (build)

@fabricteam
Copy link
Collaborator

fabricteam commented Jun 19, 2023

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

@fabricteam
Copy link
Collaborator

fabricteam commented Jun 20, 2023

🕵 fluentuiv8 No visual regressions between this PR and main

@Hotell Hotell marked this pull request as ready for review June 20, 2023 16:38
@Hotell Hotell requested review from a team, JustSlone, jurokapsiar and tudorpopams as code owners June 20, 2023 16:38
@Hotell Hotell changed the title feat(scripts-bundle-size-auditor): refactor test-bundles app into a generic tool that enables faster CI feat(scripts-bundle-size-auditor): refactor test-bundles app into a generic CLI tool that enables faster CI Jun 20, 2023
Copy link
Member

@TristanWatanabe TristanWatanabe left a comment

Choose a reason for hiding this comment

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

🚢

@Hotell Hotell merged commit a5d2752 into microsoft:master Jun 26, 2023
@Hotell Hotell deleted the hotell/ci/fix-size-auditor-pipelines-v3 branch June 26, 2023 11:16
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Area: Build System CI Fluent UI react (v8) Issues about @fluentui/react (v8) Fluent UI react-northstar (v0) Work related to Fluent UI V0

Projects

None yet

Development

Successfully merging this pull request may close these issues.

6 participants