Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore(bundle-size): extract classname consts to separate files #13145

Closed
wants to merge 2 commits into from

Conversation

mnajdova
Copy link
Contributor

@mnajdova mnajdova commented May 13, 2020

This PR is experimenting with some optimization for the bundle size. I was doing some investigation of why for an application with one Button we are dragging all components in the bundle. The reason was quite surprising - because we are importing the constants for the classNames and slot's classNames from the component's file. Just extracting these constants to a separate file, removed the components from the bundle. This PR is showcasing the dropping of the Dropdown components from the bundle.

Before:
image

After:
image

We should probably do some more deeper investigation of why this is happening, and whether this is the default behavior of webpack (as one representative of the bundlers), but this seems like a low hanging fruit for dropping the bundle size for sure.

@DustyTheBot
Copy link

DustyTheBot commented May 13, 2020

Warnings
⚠️ There are no updates provided to CHANGELOG. Ensure there are no publicly visible changes introduced by this PR.

Generated by 🚫 dangerJS against a894c60

@mnajdova mnajdova changed the title chore(bundle-size): extract classname consts to separate files chore(bundle-size): extract classname consts to separate files [WIP] May 13, 2020
@msft-github-bot
Copy link
Contributor

msft-github-bot commented May 13, 2020

Perf Analysis

No significant results to display.

All results

Scenario Master Ticks PR Ticks Iterations Status
BaseButton 685 666 5000
Checkbox 1324 1293 5000
CheckboxBase 1119 1073 5000
CheckboxNext 1243 1291 5000
ChoiceGroup 4045 4033 5000
ComboBox 843 823 1000
CommandBar 6240 6302 1000
ContextualMenu 11862 11694 1000
DefaultButton 959 870 5000
DetailsRow 2915 2886 5000
DetailsRow (fast icons) 2786 2867 5000
DetailsRow without styles 2648 2647 5000
Dialog 1245 1218 1000
DocumentCardTitle with truncation 1455 1397 1000
Dropdown 1904 1964 5000
FocusZone 1437 1433 5000
IconButton 1376 1391 5000
Label 248 267 5000
Link 383 368 5000
LinkNext 366 369 5000
MenuButton 1116 1155 5000
Nav 2599 2537 1000
Panel 1175 1159 1000
Persona 695 654 1000
Pivot 1118 1075 1000
PrimaryButton 994 990 5000
SearchBox 994 1010 5000
Slider 1183 1204 5000
Spinner 312 334 5000
SplitButton 2529 2513 5000
Stack 388 377 5000
Stack with Intrinsic children 898 944 5000
Stack with Text children 3345 3274 5000
TagPicker 2435 2317 5000
Text 327 323 5000
TextField 1182 1129 5000
Toggle 721 697 5000
button 57 63 5000

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🎯 Avatar.Fluent 0.39 0.4 0.98:1 2000 775
🦄 Button.Fluent 0.08 0.14 0.57:1 5000 424
🔧 Checkbox.Fluent 0.56 0.27 2.07:1 1000 558
🔧 Dialog.Fluent 0.28 0.17 1.65:1 5000 1407
🔧 Dropdown.Fluent 2.79 0.35 7.97:1 1000 2792
🔧 Icon.Fluent 0.12 0.04 3:1 5000 580
🎯 Image.Fluent 0.06 0.08 0.75:1 5000 289
🔧 Slider.Fluent 1.23 0.29 4.24:1 1000 1227
🔧 Text.Fluent 0.05 0.02 2.5:1 5000 272
🦄 Tooltip.Fluent 0.07 14.93 0:1 5000 372

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
HeaderMinimalPerf.default 486 410 1.19:1
FormMinimalPerf.default 344 305 1.13:1
ChatDuplicateMessagesPerf.default 362 330 1.1:1
TreeMinimalPerf.default 1065 985 1.08:1
AlertMinimalPerf.default 251 235 1.07:1
TextAreaMinimalPerf.default 380 356 1.07:1
ToolbarMinimalPerf.default 703 655 1.07:1
DropdownManyItemsPerf.default 1147 1082 1.06:1
HierarchicalTreeMinimalPerf.default 872 819 1.06:1
FlexMinimalPerf.default 237 225 1.05:1
Slider.Fluent 1227 1168 1.05:1
ChatMinimalPerf.default 516 497 1.04:1
StatusMinimalPerf.default 545 524 1.04:1
AnimationMinimalPerf.default 501 487 1.03:1
BoxMinimalPerf.default 269 262 1.03:1
LoaderMinimalPerf.default 672 653 1.03:1
MenuMinimalPerf.default 544 526 1.03:1
RadioGroupMinimalPerf.default 462 449 1.03:1
IconMinimalPerf.default 524 509 1.03:1
TextMinimalPerf.default 280 273 1.03:1
AttachmentSlotsPerf.default 969 947 1.02:1
CheckboxMinimalPerf.default 2520 2463 1.02:1
DividerMinimalPerf.default 284 278 1.02:1
EmbedMinimalPerf.default 1681 1654 1.02:1
LayoutMinimalPerf.default 451 443 1.02:1
RefMinimalPerf.default 167 164 1.02:1
TableMinimalPerf.default 309 303 1.02:1
VideoMinimalPerf.default 492 483 1.02:1
Dropdown.Fluent 2792 2725 1.02:1
Icon.Fluent 580 569 1.02:1
ButtonMinimalPerf.default 131 130 1.01:1
DialogMinimalPerf.default 1467 1455 1.01:1
DropdownMinimalPerf.default 2770 2743 1.01:1
ProviderMergeThemesPerf.default 1463 1454 1.01:1
ProviderMinimalPerf.default 576 571 1.01:1
Avatar.Fluent 775 767 1.01:1
Checkbox.Fluent 558 551 1.01:1
ButtonSlotsPerf.default 511 511 1:1
InputMinimalPerf.default 827 830 1:1
PopupMinimalPerf.default 220 219 1:1
SliderMinimalPerf.default 1201 1206 1:1
SplitButtonMinimalPerf.default 2850 2852 1:1
Button.Fluent 424 422 1:1
Dialog.Fluent 1407 1409 1:1
Image.Fluent 289 289 1:1
Tooltip.Fluent 372 371 1:1
CardMinimalPerf.default 447 451 0.99:1
ListCommonPerf.default 794 805 0.99:1
ListNestedPerf.default 754 761 0.99:1
ListWith60ListItems.default 962 972 0.99:1
TreeWith60ListItems.default 188 189 0.99:1
AvatarMinimalPerf.default 423 433 0.98:1
ItemLayoutMinimalPerf.default 1327 1357 0.98:1
ListMinimalPerf.default 378 386 0.98:1
GridMinimalPerf.default 545 559 0.97:1
HeaderSlotsPerf.default 1221 1263 0.97:1
ImageMinimalPerf.default 294 304 0.97:1
CustomToolbarPrototype.default 3083 3175 0.97:1
CarouselMinimalPerf.default 388 404 0.96:1
LabelMinimalPerf.default 308 321 0.96:1
MenuButtonMinimalPerf.default 1271 1327 0.96:1
ReactionMinimalPerf.default 305 317 0.96:1
AttachmentMinimalPerf.default 127 133 0.95:1
ChatWithPopoverPerf.default 452 475 0.95:1
AccordionMinimalPerf.default 106 114 0.93:1
PortalMinimalPerf.default 237 256 0.93:1
TooltipMinimalPerf.default 585 631 0.93:1
SegmentMinimalPerf.default 250 271 0.92:1
Text.Fluent 272 302 0.9:1

@size-auditor
Copy link

size-auditor bot commented May 13, 2020

Asset size changes

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

Baseline commit: 446bf39dcf55c1a306c9e9674960f8c0027c71c9 (build)

@mnajdova mnajdova changed the title chore(bundle-size): extract classname consts to separate files [WIP] chore(bundle-size): extract classname consts to separate files May 13, 2020
# Conflicts:
#	packages/fluentui/react-northstar/src/components/Dropdown/DropdownSelectedItem.tsx
#	packages/fluentui/react-northstar/src/themes/teams/components/Dropdown/dropdownSelectedItemStyles.ts
@ecraig12345
Copy link
Member

@mnajdova Is this intended to be checked in or is it just for demo purposes? If it's just a demo and is no longer needed we should close it.

@msft-github-bot
Copy link
Contributor

This pull request has been automatically marked as stale because it was marked as requiring author feedback but has not had any activity for 7 days. It will be closed if no further activity occurs within 5 days of this comment. Thank you for your contributions to Fluent UI!

@ecraig12345 ecraig12345 deleted the chore/extract-classname-consts branch March 3, 2021 00:01
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.

4 participants