Skip to content

chore: Reducing bundle size of Stack by moving selector used in multiple places to local const#25429

Merged
khmakoto merged 3 commits intomicrosoft:masterfrom
khmakoto:stackFeedback
Oct 28, 2022
Merged

chore: Reducing bundle size of Stack by moving selector used in multiple places to local const#25429
khmakoto merged 3 commits intomicrosoft:masterfrom
khmakoto:stackFeedback

Conversation

@khmakoto
Copy link
Member

@khmakoto khmakoto commented Oct 28, 2022

PR Description

This PR moves the children selector logic in Stack's styles to a local const that is referenced to avoid duplication and help reduce bundle size of the component.

Related Issue(s)

Applies suggestions from this comment in #25397

@khmakoto khmakoto added Component: Stack Fluent UI react (v8) Issues about @fluentui/react (v8) labels Oct 28, 2022
@khmakoto khmakoto self-assigned this Oct 28, 2022
@khmakoto khmakoto requested review from a team as code owners October 28, 2022 00:29
@size-auditor
Copy link

size-auditor bot commented Oct 28, 2022 •
edited
Loading

Asset size changes

Project Bundle Baseline Size New Size Difference
office-ui-fabric-react fluentui-react-TeachingBubble 193.751 kB 193.563 kB BelowBaseline     -188 bytes
office-ui-fabric-react fluentui-react-Stack 40.244 kB 40.056 kB BelowBaseline     -188 bytes

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

Baseline commit: e799d65bcc8a71db789a41bda7240103f3bf5de7 (build)

@codesandbox-ci
Copy link

codesandbox-ci bot commented Oct 28, 2022 •
edited
Loading

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 d20cf95:

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

@fabricteam
Copy link
Collaborator

fabricteam commented Oct 28, 2022 •
edited
Loading

📊 Bundle size report

🤖 This report was generated against e799d65bcc8a71db789a41bda7240103f3bf5de7

behowell
behowell approved these changes Oct 28, 2022
View reviewed changes
@khmakoto khmakoto enabled auto-merge (squash) October 28, 2022 21:29
@fabricteam
Copy link
Collaborator

fabricteam commented Oct 28, 2022

Perf Analysis (@fluentui/react)

Scenario Render type Master Ticks PR Ticks Iterations Status
TeachingBubble mount 84532 84943 5000 Possible regression
All results

Scenario Render type Master Ticks PR Ticks Iterations Status
BaseButton mount 1199 1177 5000
Breadcrumb mount 2950 2948 1000
Checkbox mount 2635 2625 5000
CheckboxBase mount 2364 2338 5000
ChoiceGroup mount 4404 4393 5000
ComboBox mount 1215 1245 1000
CommandBar mount 9947 9576 1000
ContextualMenu mount 11096 11072 1000
DefaultButton mount 1364 1373 5000
DetailsRow mount 3626 3608 5000
DetailsRowFast mount 3597 3606 5000
DetailsRowNoStyles mount 3468 3467 5000
Dialog mount 3077 3063 1000
DocumentCardTitle mount 576 584 1000
Dropdown mount 3180 3261 5000
FocusTrapZone mount 2006 2015 5000
FocusZone mount 1913 1943 5000
GroupedList mount 52331 59456 2
GroupedList virtual-rerender 24994 24772 2
GroupedList virtual-rerender-with-unmount 92093 93791 2
GroupedListV2 mount 550 558 2
GroupedListV2 virtual-rerender 544 551 2
GroupedListV2 virtual-rerender-with-unmount 560 572 2
IconButton mount 1916 1899 5000
Label mount 727 739 5000
Layer mount 4215 4233 5000
Link mount 825 831 5000
MenuButton mount 1668 1641 5000
MessageBar mount 2337 2291 5000
Nav mount 3267 3221 1000
OverflowSet mount 1392 1342 5000
Panel mount 2518 2523 1000
Persona mount 1260 1262 1000
Pivot mount 1635 1654 1000
PrimaryButton mount 1539 1536 5000
Rating mount 7037 6995 5000
SearchBox mount 1482 1509 5000
Shimmer mount 2836 2840 5000
Slider mount 2123 2074 5000
SpinButton mount 4688 4685 5000
Spinner mount 803 803 5000
SplitButton mount 3069 3100 5000
Stack mount 828 830 5000
StackWithIntrinsicChildren mount 2463 2446 5000
StackWithTextChildren mount 4920 4906 5000
SwatchColorPicker mount 10497 11260 5000
TagPicker mount 2634 2662 5000
TeachingBubble mount 84532 84943 5000 Possible regression
Text mount 787 783 5000
TextField mount 1620 1583 5000
ThemeProvider mount 1507 1522 5000
ThemeProvider virtual-rerender 1082 1085 5000
ThemeProvider virtual-rerender-with-unmount 2140 2161 5000
Toggle mount 1085 1133 5000
buttonNative mount 537 540 5000

@khmakoto khmakoto merged commit aa6aca3 into microsoft:master Oct 28, 2022
@khmakoto khmakoto deleted the stackFeedback branch October 28, 2022 22:18
marcosmoura added a commit to marcosmoura/fluentui that referenced this pull request Oct 31, 2022
@marcosmoura
Merge branch 'master' into marcosmoura/feat/selectable-cards
b02b125 
* master: (22 commits)
  fix(react-menu): removes exposing of internal type FluentTriggerComponent (microsoft#25410)
  fix(react-popover): removes exposing of internal type FluentTriggerComponent (microsoft#25411)
  applying package updates
  fix(react-tooltip): removes exposing of internal type FluentTriggerComponent (microsoft#25409)
  chore: Reducing bundle size of Stack by moving selector used in multiple places to local const (microsoft#25429)
  docs(rfcs): Simple component implementation (microsoft#25139)
  Fix migration publishing (microsoft#25422)
  Integrate storywright for story tests - As part of exploring screener alternative (microsoft#25399)
  fix(react-utilities): exposes internal methods used in API surface (microsoft#25406)
  fix(react-dialog): removes exposing of internal type FluentTriggerComponent (microsoft#25408)
  fix(react-context-selector): exposes internal type ContextSelector (microsoft#25404)
  fix(react-aria): exposes internal leaking types (microsoft#25403)
  fix(react-shared-contexts): exposes internal leaks used in the API surface (microsoft#25405)
  fix(react-positioning): exposes new typings to avoid exposing internal methods (microsoft#25407)
  applying package updates
  fix: Allowing DatePicker to be focusable within FocusZones by default (microsoft#25428)
  fix: Pad in slider so the thumb does not render outside the bounds of the root element (microsoft#25378)
  feat: Add enableScopedSelectors prop to Stack that, when true, makes the Stack styles selectors be more scoped to not be as expensive in style recalculation (microsoft#25397)
  fix(react-avatar): Remove gaps between AvatarGroupItem/OveflowButton and its outline (microsoft#25382)
  fix: Combobox text attribute ignored when empty string is passed (microsoft#24665)
  ...
NotWoods pushed a commit to NotWoods/fluentui that referenced this pull request Nov 18, 2022
@khmakoto @NotWoods
chore: Reducing bundle size of Stack by moving selector used in multi…
24e6a7b 
…ple places to local const (microsoft#25429)

* chore: Reducing bundle size of Stack by moving selector used in multiple places to local const.

* Adding change file.

* Addressing PR feedback.

Co-authored-by: KHMakoto <humberto_makoto@hotmail.com>
Co-authored-by: Humberto Makoto Morimoto Burgos <makotom@microsoft.com>
Hotell pushed a commit to Hotell/fluentui that referenced this pull request Feb 9, 2023
@khmakoto @Hotell
chore: Reducing bundle size of Stack by moving selector used in multi…
eee1551 
…ple places to local const (microsoft#25429)

* chore: Reducing bundle size of Stack by moving selector used in multiple places to local const.

* Adding change file.

* Addressing PR feedback.

Co-authored-by: KHMakoto <humberto_makoto@hotmail.com>
Co-authored-by: Humberto Makoto Morimoto Burgos <makotom@microsoft.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@sopranopillow sopranopillow sopranopillow approved these changes

@spmonahan spmonahan spmonahan approved these changes

+1 more reviewer

@behowell behowell behowell approved these changes

Reviewers whose approvals may not affect merge requirements

Assignees

@khmakoto khmakoto

Labels

Component: Stack Fluent UI react (v8) Issues about @fluentui/react (v8)

Projects

None yet

Milestone

October Project Cycle Q4 2022

Development

Successfully merging this pull request may close these issues.

5 participants

@khmakoto @fabricteam @sopranopillow @behowell @spmonahan