Skip to content

Conversation

@bsunderhus
Copy link
Contributor

Previous Behavior

New Behavior

  1. reduces bundle size maintainig same functionality
  2. adds bundle-size metrics with fixtures

Related Issue(s)

  • Fixes #

@bsunderhus bsunderhus requested a review from a team as a code owner August 23, 2023 14:43
@bsunderhus bsunderhus self-assigned this Aug 23, 2023
@github-actions github-actions bot added this to the August Project Cycle Q4 2023 milestone Aug 23, 2023
@bsunderhus bsunderhus changed the title chore: decrease bundle size & adds fixtures chore: decrease bundle size Aug 23, 2023
@bsunderhus bsunderhus changed the title chore: decrease bundle size chore(react-jsx-runtime): decrease bundle size Aug 23, 2023
@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 b9ab936:

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

@fabricteam
Copy link
Collaborator

Perf Analysis (@fluentui/react-components)

Scenario Render type Master Ticks PR Ticks Iterations Status
InfoButton mount 11 12 5000 Possible regression
All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 630 612 5000
Button mount 300 317 5000
Field mount 1100 1097 5000
FluentProvider mount 704 677 5000
FluentProviderWithTheme mount 81 87 10
FluentProviderWithTheme virtual-rerender 62 66 10
FluentProviderWithTheme virtual-rerender-with-unmount 74 68 10
InfoButton mount 11 12 5000 Possible regression
MakeStyles mount 863 839 50000
Persona mount 1718 1657 5000
SpinButton mount 1363 1370 5000

@fabricteam
Copy link
Collaborator

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react-jsx-runtime
Classic Pragma
0 B
0 B
1.049 kB
531 B
🆕 New entry
react-jsx-runtime
JSX Dev Runtime
0 B
0 B
2.752 kB
1.277 kB
🆕 New entry
react-jsx-runtime
JSX Runtime
0 B
0 B
3.27 kB
1.519 kB
🆕 New entry
Unchanged fixtures
Package & Exports Size (minified/GZIP)
react-accordion
Accordion (including children components)
88.688 kB
26.917 kB
react-alert
Alert
81.836 kB
22.031 kB
react-avatar
Avatar
47.01 kB
14.502 kB
react-avatar
AvatarGroup
16.116 kB
6.431 kB
react-avatar
AvatarGroupItem
61.789 kB
18.912 kB
react-badge
Badge
23.183 kB
7.254 kB
react-badge
CounterBadge
24.084 kB
7.553 kB
react-badge
PresenceBadge
22.14 kB
7.867 kB
react-button
Button
37.078 kB
9.751 kB
react-button
CompoundButton
44.427 kB
11.234 kB
react-button
MenuButton
41.464 kB
11.001 kB
react-button
SplitButton
49.499 kB
12.555 kB
react-button
ToggleButton
54.124 kB
11.65 kB
react-card
Card - All
88.335 kB
25.271 kB
react-card
Card
83.177 kB
23.742 kB
react-card
CardFooter
9.338 kB
3.932 kB
react-card
CardHeader
11.59 kB
4.716 kB
react-card
CardPreview
10.297 kB
4.317 kB
react-checkbox
Checkbox
32.872 kB
10.652 kB
react-combobox
Combobox (including child components)
87.101 kB
28.273 kB
react-combobox
Dropdown (including child components)
85.461 kB
27.912 kB
react-components
react-components: Button, FluentProvider & webLightTheme
66.614 kB
18.512 kB
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
203.567 kB
57.847 kB
react-components
react-components: FluentProvider & webLightTheme
37.787 kB
12.387 kB
react-datepicker-compat
DatePicker Compat
207.157 kB
57.399 kB
react-dialog
Dialog (including children components)
86.738 kB
26.341 kB
react-divider
Divider
17.098 kB
6.303 kB
react-field
Field
18.295 kB
6.978 kB
react-image
Image
12.029 kB
4.783 kB
react-infobutton
InfoButton
125.301 kB
39.269 kB
react-infobutton
InfoLabel
128.971 kB
40.446 kB
react-input
Input
23.237 kB
7.688 kB
react-label
Label
10.423 kB
4.31 kB
react-link
Link
13.254 kB
5.397 kB
react-menu
Menu (including children components)
135.523 kB
41.576 kB
react-menu
Menu (including selectable components)
138.209 kB
42.078 kB
react-persona
Persona
53.905 kB
16.371 kB
react-popover
Popover
114.603 kB
35.934 kB
react-portal-compat
PortalCompatProvider
6.48 kB
2.203 kB
react-progress
ProgressBar
13.718 kB
5.476 kB
react-provider
FluentProvider
18.332 kB
6.817 kB
react-radio
Radio
26.617 kB
8.601 kB
react-radio
RadioGroup
11.622 kB
4.833 kB
react-select
Select
24.599 kB
8.651 kB
react-slider
Slider
34.134 kB
11.039 kB
react-spinbutton
SpinButton
32.681 kB
10.209 kB
react-spinner
Spinner
19.577 kB
7.008 kB
react-switch
Switch
29.092 kB
9.217 kB
react-table
DataGrid
152.77 kB
42.242 kB
react-table
Table (Primitives only)
39.638 kB
12.129 kB
react-table
Table as DataGrid
126.224 kB
33.612 kB
react-table
Table (Selection only)
71.594 kB
18.91 kB
react-table
Table (Sort only)
70.213 kB
18.511 kB
react-tags-preview
InteractionTag
11.031 kB
4.528 kB
react-tags-preview
Tag
25.398 kB
8.396 kB
react-tags-preview
TagGroup
69.607 kB
20.482 kB
react-text
Text - Default
13.043 kB
5.129 kB
react-text
Text - Wrappers
16.215 kB
5.447 kB
react-textarea
Textarea
27.302 kB
9.047 kB
react-toast
Toast (including Toaster)
87.69 kB
26.037 kB
react-tooltip
Tooltip
47.942 kB
16.845 kB
🤖 This report was generated against 1fdfe8d9ac8f83790d1d49c123e1eab52b7b2fd9

@size-auditor
Copy link

size-auditor bot commented Aug 23, 2023

Asset size changes

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

Baseline commit: 1fdfe8d9ac8f83790d1d49c123e1eab52b7b2fd9 (build)

@fabricteam
Copy link
Collaborator

🕵 fluentuiv9 No visual regressions between this PR and main

@bsunderhus bsunderhus merged commit d7f04c2 into microsoft:master Aug 23, 2023
@bsunderhus bsunderhus deleted the react-jsx-runtime/chore--reduce-bundle-size branch August 23, 2023 16:22
marcosmoura added a commit to marcosmoura/fluentui that referenced this pull request Aug 23, 2023
* master:
  chore: update CODEOWNERS to some components to tag the current owner (microsoft#28949)
  fix(react-popover): Only apply modal attributes if the PopoverSurface traps focus (microsoft#28613)
  feat(react-table, react-components): export DataGridContextProvider (microsoft#28955)
  chore: decrease bundle size & adds fixtures (microsoft#28962)
  feat(react-utilities): create useAnimationFrame hook (microsoft#28948)
  fix(react-utilities): `useOnClickOutside` should consider text selection from inside to outside as inside click (microsoft#28765)
  docs(react-accordion): Added subcomponents to index story (microsoft#28956)
  applying package updates
  bugfix: ensure interop between assertSlots and old API (microsoft#28957)
  chore: rename imports from react-tree to react-components (microsoft#28946)
  applying package updates
  fix: Autofill queries the inputElement ownerDocument instead of document (microsoft#27312)
marcosmoura added a commit to marcosmoura/fluentui that referenced this pull request Aug 23, 2023
* master: (27 commits)
  feat: Add documentKeyboardEvent to OnVisibleChangeData when Tooltip is hidden via Escape (microsoft#28951)
  RFC: Component CSS Transitions/Animations on mount/unmount (microsoft#27328)
  8.0 Azure Theme: Details list row focus contrast a11y bug fix  (microsoft#28966)
  chore: update CODEOWNERS to some components to tag the current owner (microsoft#28949)
  fix(react-popover): Only apply modal attributes if the PopoverSurface traps focus (microsoft#28613)
  feat(react-table, react-components): export DataGridContextProvider (microsoft#28955)
  chore: decrease bundle size & adds fixtures (microsoft#28962)
  feat(react-utilities): create useAnimationFrame hook (microsoft#28948)
  fix(react-utilities): `useOnClickOutside` should consider text selection from inside to outside as inside click (microsoft#28765)
  docs(react-accordion): Added subcomponents to index story (microsoft#28956)
  applying package updates
  bugfix: ensure interop between assertSlots and old API (microsoft#28957)
  chore: rename imports from react-tree to react-components (microsoft#28946)
  applying package updates
  fix: Autofill queries the inputElement ownerDocument instead of document (microsoft#27312)
  Accordion : updated styles for accordion header cursor (microsoft#28850)
  Additional VR tests Charting Library (microsoft#28777)
  feat(react-motion): create react-motion-preview package scaffolding (microsoft#28947)
  chore: updates generator to use new slot API (microsoft#28916)
  chore: bumps version of esbuild-loader to v3.2.0 (microsoft#28878)
  ...
marcosmoura added a commit to marcosmoura/fluentui that referenced this pull request Aug 25, 2023
…e-motion

* feat/use-motion-presence-hook: (25 commits)
  fix: revert changes to CODEOWNERS
  fix: remove duplicated code due to a merge conflict
  fix: upgrade tests
  fix: set motion as active when animations are disabled
  fix: remove debug function
  feat: refactor useMotion to a much more clean/performant logic
  fix:  use correct type for MotionOptions
  fix: improve typings and documentation
  feat: Add documentKeyboardEvent to OnVisibleChangeData when Tooltip is hidden via Escape (microsoft#28951)
  fix: use correct boolean values
  RFC: Component CSS Transitions/Animations on mount/unmount (microsoft#27328)
  8.0 Azure Theme: Details list row focus contrast a11y bug fix  (microsoft#28966)
  fix: remove outdated changefile
  chore: update CODEOWNERS to some components to tag the current owner (microsoft#28949)
  fix(react-popover): Only apply modal attributes if the PopoverSurface traps focus (microsoft#28613)
  feat(react-table, react-components): export DataGridContextProvider (microsoft#28955)
  chore: decrease bundle size & adds fixtures (microsoft#28962)
  feat(react-utilities): create useAnimationFrame hook (microsoft#28948)
  fix(react-utilities): `useOnClickOutside` should consider text selection from inside to outside as inside click (microsoft#28765)
  docs(react-accordion): Added subcomponents to index story (microsoft#28956)
  ...
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants