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.

Sign up for GitHub

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

Jump to bottom

chore(makeStyles): use shorter hashes for classnames #18171

Merged
merged 1 commit into from
May 17, 2021
Merged

chore(makeStyles): use shorter hashes for classnames #18171

merged 1 commit into from
May 17, 2021

Conversation

layershifter
Copy link
Member

@layershifter layershifter commented May 13, 2021 •
edited
Loading

Pull request checklist

  • Addresses an existing issue: Fixes #0000
  • Include a change request file using $ yarn change

Description of changes

Currently all hashes that are generated in makeStyles are forced to have 7 characters (8 for classnames). This is a requirement for sequence hashes, but we don't need to do this for classnames and properties.

As hashes are used in produced build output this allows to improve bundle sizes for free.

Before

flcnb000 # 8 chars
fe3e8s90 # 8 chars
f17t1d3d # 8 chars

After

flcnb0   # 6 chars
fe3e8s9  # 7 chars
f17t1d3d # 8 chars

@layershifter layershifter requested a review from a team May 13, 2021 14:23
@size-auditor
Copy link

size-auditor bot commented May 13, 2021

Asset size changes

Project Bundle Baseline Size New Size Difference
office-ui-fabric-react fluentui-react-components-FluentProvider 36.489 kB 36.481 kB BelowBaseline     -8 bytes
office-ui-fabric-react fluentui-react-components-makeStyles 21.435 kB 21.407 kB BelowBaseline     -28 bytes
office-ui-fabric-react fluentui-react-components-Menu 99.539 kB 99.507 kB BelowBaseline     -32 bytes
office-ui-fabric-react fluentui-react-components-Tooltip 39.192 kB 39.121 kB BelowBaseline     -71 bytes
office-ui-fabric-react fluentui-react-components-Image 11.755 kB 11.683 kB BelowBaseline     -72 bytes
office-ui-fabric-react fluentui-react-components-makeStaticStyles 8.509 kB 8.422 kB BelowBaseline     -87 bytes
office-ui-fabric-react fluentui-react-components-Link 15.453 kB 15.364 kB BelowBaseline     -89 bytes
office-ui-fabric-react fluentui-react-components-Badge 16.129 kB 16.008 kB BelowBaseline     -121 bytes
office-ui-fabric-react fluentui-react-components-Divider 18.261 kB 18.127 kB BelowBaseline     -134 bytes
office-ui-fabric-react fluentui-react-components-Button 34.263 kB 33.812 kB BelowBaseline     -451 bytes
office-ui-fabric-react fluentui-react-components-CompoundButton 40.268 kB 39.746 kB BelowBaseline     -522 bytes
office-ui-fabric-react fluentui-react-components-Avatar 50.773 kB 50.248 kB BelowBaseline     -525 bytes
office-ui-fabric-react fluentui-react-components-ToggleButton 52.358 kB 51.601 kB BelowBaseline     -757 bytes

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

Baseline commit: f0a38b2bfa1d6c4deb227fa65e2216edc0206ce5 (build)

@codesandbox-ci
Copy link

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 8d3e049:

Sandbox Source
Fluent UI Button Configuration
codesandbox-react-template Configuration
codesandbox-react-northstar-template Configuration

@fabricteam
Copy link
Collaborator

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 853 808 5000
BaseButton mount 896 904 5000
Breadcrumb mount 2572 2548 1000
ButtonNext mount 499 478 5000
Checkbox mount 1532 1485 5000
CheckboxBase mount 1284 1280 5000
ChoiceGroup mount 4711 4637 5000
ComboBox mount 971 1025 1000
CommandBar mount 9903 10017 1000
ContextualMenu mount 5978 5963 1000
DefaultButton mount 1119 1101 5000
DetailsRow mount 3648 3662 5000
DetailsRowFast mount 3592 3687 5000
DetailsRowNoStyles mount 3442 3489 5000
Dialog mount 2165 2106 1000
DocumentCardTitle mount 139 129 1000
Dropdown mount 3184 3154 5000
FocusTrapZone mount 1773 1805 5000
FocusZone mount 1818 1786 5000
IconButton mount 1732 1667 5000
Label mount 337 334 5000
Layer mount 1751 1740 5000
Link mount 451 459 5000
MakeStyles mount 1825 1824 50000
MenuButton mount 1400 1437 5000
MessageBar mount 1973 2014 5000
Nav mount 3190 3224 1000
OverflowSet mount 1004 994 5000
Panel mount 2052 2025 1000
Persona mount 793 778 1000
Pivot mount 1391 1395 1000
PrimaryButton mount 1248 1270 5000
Rating mount 7438 7408 5000
SearchBox mount 1274 1272 5000
Shimmer mount 2542 2458 5000
Slider mount 1938 1943 5000
SpinButton mount 4804 4893 5000
Spinner mount 425 413 5000
SplitButton mount 3087 3095 5000
Stack mount 467 482 5000
StackWithIntrinsicChildren mount 1513 1515 5000
StackWithTextChildren mount 4420 4403 5000
SwatchColorPicker mount 10104 9915 5000
Tabs mount 1375 1385 1000
TagPicker mount 2354 2412 5000
TeachingBubble mount 11695 11640 5000
Text mount 405 408 5000
TextField mount 1343 1348 5000
ThemeProvider mount 1170 1158 5000
ThemeProvider virtual-rerender 598 604 5000
ThemeProviderNext mount 6794 6841 5000
Toggle mount 806 776 5000
buttonNative mount 113 106 5000

Perf Analysis (@fluentui/react-northstar)

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
ButtonMinimalPerf.default 171 154 1.11:1
FlexMinimalPerf.default 286 266 1.08:1
PortalMinimalPerf.default 167 155 1.08:1
BoxMinimalPerf.default 353 335 1.05:1
ChatMinimalPerf.default 624 596 1.05:1
TreeWith60ListItems.default 173 165 1.05:1
FormMinimalPerf.default 404 388 1.04:1
ImageMinimalPerf.default 369 356 1.04:1
RadioGroupMinimalPerf.default 430 415 1.04:1
TextMinimalPerf.default 352 339 1.04:1
CarouselMinimalPerf.default 458 446 1.03:1
ChatDuplicateMessagesPerf.default 292 284 1.03:1
HeaderMinimalPerf.default 353 342 1.03:1
LabelMinimalPerf.default 390 380 1.03:1
ProviderMinimalPerf.default 998 969 1.03:1
SegmentMinimalPerf.default 341 331 1.03:1
TableManyItemsPerf.default 1872 1824 1.03:1
TableMinimalPerf.default 407 394 1.03:1
TooltipMinimalPerf.default 966 934 1.03:1
AttachmentMinimalPerf.default 158 155 1.02:1
CardMinimalPerf.default 540 531 1.02:1
LayoutMinimalPerf.default 363 355 1.02:1
ListWith60ListItems.default 631 617 1.02:1
MenuMinimalPerf.default 833 813 1.02:1
IconMinimalPerf.default 589 580 1.02:1
TextAreaMinimalPerf.default 473 463 1.02:1
AvatarMinimalPerf.default 186 185 1.01:1
DatepickerMinimalPerf.default 5365 5295 1.01:1
DialogMinimalPerf.default 723 714 1.01:1
DividerMinimalPerf.default 350 347 1.01:1
DropdownManyItemsPerf.default 671 664 1.01:1
EmbedMinimalPerf.default 4129 4081 1.01:1
ListCommonPerf.default 608 602 1.01:1
LoaderMinimalPerf.default 683 675 1.01:1
PopupMinimalPerf.default 568 561 1.01:1
SliderMinimalPerf.default 1563 1542 1.01:1
SplitButtonMinimalPerf.default 3668 3623 1.01:1
ToolbarMinimalPerf.default 919 909 1.01:1
ButtonOverridesMissPerf.default 1669 1665 1:1
ChatWithPopoverPerf.default 363 362 1:1
HeaderSlotsPerf.default 745 743 1:1
ListNestedPerf.default 542 542 1:1
StatusMinimalPerf.default 664 664 1:1
CustomToolbarPrototype.default 3773 3757 1:1
TreeMinimalPerf.default 767 767 1:1
AlertMinimalPerf.default 265 267 0.99:1
AttachmentSlotsPerf.default 1112 1122 0.99:1
ButtonSlotsPerf.default 524 530 0.99:1
CheckboxMinimalPerf.default 2688 2709 0.99:1
DropdownMinimalPerf.default 3010 3042 0.99:1
GridMinimalPerf.default 334 336 0.99:1
InputMinimalPerf.default 1239 1252 0.99:1
MenuButtonMinimalPerf.default 1527 1535 0.99:1
ProviderMergeThemesPerf.default 1649 1669 0.99:1
ItemLayoutMinimalPerf.default 1237 1256 0.98:1
ReactionMinimalPerf.default 358 364 0.98:1
AccordionMinimalPerf.default 143 148 0.97:1
AnimationMinimalPerf.default 394 406 0.97:1
ListMinimalPerf.default 483 498 0.97:1
SkeletonMinimalPerf.default 340 349 0.97:1
VideoMinimalPerf.default 589 614 0.96:1
RosterPerf.default 1124 1191 0.94:1
RefMinimalPerf.default 219 232 0.94:1

@layershifter layershifter merged commit c845a50 into master May 17, 2021
@layershifter layershifter deleted the chore/mk-hash branch May 17, 2021 11:26
@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/[email protected] has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/[email protected] has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/[email protected] has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/[email protected] has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/[email protected] has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/[email protected] has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/[email protected] has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/[email protected] has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/[email protected] has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/[email protected] has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/[email protected] has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/[email protected] has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/[email protected] has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/[email protected] has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/[email protected] has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/[email protected] has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/[email protected] has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/[email protected] has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/[email protected] has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/[email protected] has been released which incorporates this pull request.:tada:

Handy links:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@ling1726 ling1726 ling1726 approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
4 participants
@layershifter @fabricteam @msft-fluent-ui-bot @ling1726