chore: add bundle size fixtures for converged components #18970

layershifter · 2021-07-16T09:32:29Z

Pull request checklist

Addresses an existing issue: related to Bundle size tooling #17697
Include a change request file using $ yarn change

Description of changes

This PR recreates all existing fixtures in SizeAuditor for @fluentui/react-components to replace it with new bundle size tool.
Pipelines are cleaned up in #18971.

codesandbox-ci · 2021-07-16T09:39:23Z

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

Sandbox	Source
Fluent UI React Starter	Configuration

fabricteam · 2021-07-16T09:40:55Z

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
`react-accordion` Accordion (including children components)	`0 B` `0 B`	`80.582 kB` `24.29 kB`	🆕 New entry
`react-avatar` Avatar	`0 B` `0 B`	`54.293 kB` `14.665 kB`	🆕 New entry
`react-badge` Badge	`0 B` `0 B`	`24.393 kB` `7.174 kB`	🆕 New entry
`react-badge` CounterBadge	`0 B` `0 B`	`27.206 kB` `7.862 kB`	🆕 New entry
`react-badge` PresenseBadge	`0 B` `0 B`	`237 B` `177 B`	🆕 New entry
`react-button` Button	`0 B` `0 B`	`25.967 kB` `8.231 kB`	🆕 New entry
`react-button` CompoundButton	`0 B` `0 B`	`31.409 kB` `9.107 kB`	🆕 New entry
`react-button` MenuButton	`0 B` `0 B`	`27.552 kB` `8.732 kB`	🆕 New entry
`react-button` ToggleButton	`0 B` `0 B`	`36.393 kB` `8.907 kB`	🆕 New entry
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`0 B` `0 B`	`197.867 kB` `57.783 kB`	🆕 New entry
`react-components` react-components: FluentProvider & webLightTheme	`0 B` `0 B`	`35.513 kB` `11.437 kB`	🆕 New entry
`react-label` Label	`0 B` `0 B`	`28.622 kB` `10.654 kB`	🆕 New entry
`react-link` Link	`0 B` `0 B`	`14.715 kB` `6.012 kB`	🆕 New entry
`react-menu` Menu (including children components)	`0 B` `0 B`	`113.947 kB` `34.389 kB`	🆕 New entry
`react-portal` Portal	`0 B` `0 B`	`7.78 kB` `2.672 kB`	🆕 New entry
`react-positioning` usePopper	`0 B` `0 B`	`23.141 kB` `7.931 kB`	🆕 New entry
`react-provider` FluentProvider	`0 B` `0 B`	`16.235 kB` `5.972 kB`	🆕 New entry
`react-tooltip` Tooltip	`0 B` `0 B`	`44.695 kB` `15.294 kB`	🆕 New entry
`react-utilities` SSRProvider	`0 B` `0 B`	`213 B` `170 B`	🆕 New entry

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
`react-divider` Divider	`15.889 kB` `5.747 kB`
`react-image` Image	`10.642 kB` `4.264 kB`
`react-make-styles` makeStaticStyles (runtime)	`7.59 kB` `3.321 kB`
`react-make-styles` makeStyles + mergeClasses (runtime)	`22.135 kB` `8.356 kB`
`react-make-styles` makeStyles + mergeClasses (build time)	`2.557 kB` `1.202 kB`
`react-menu` Menu (including selectable components)	`115.959 kB` `34.649 kB`
`react-popover` Popover	`140.938 kB` `41.968 kB`

_{🤖 This report was generated against 8ebf2d422547bda60eb22eae2b12c3bd1339ec06}

ling1726 · 2021-07-16T09:48:12Z

packages/react-accordion/package.json

  "license": "MIT",
  "scripts": {
    "build": "just-scripts build",
+    "bundle-size": "bundle-size measure",


is this command necessary if it's already a bin in the root ? I guess it might be for lage ?

is this command necessary if it's already a bin in the root ? I guess it might be for lage ?

Exactly, as we run commands per package to allow scoping and lage (any other other tool) needs to know what to run.

size-auditor · 2021-07-16T09:56:09Z

Asset size changes

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

Baseline commit: 8ebf2d422547bda60eb22eae2b12c3bd1339ec06 (build)

fabricteam · 2021-07-16T10:11:11Z

Perf Analysis (`@fluentui/react`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
Avatar	mount	832	820	5000
BaseButton	mount	924	946	5000
Breadcrumb	mount	2574	2547	1000
ButtonNext	mount	545	557	5000
Checkbox	mount	1622	1585	5000
CheckboxBase	mount	1344	1343	5000
ChoiceGroup	mount	4978	4882	5000
ComboBox	mount	975	995	1000
CommandBar	mount	10029	10107	1000
ContextualMenu	mount	6311	6241	1000
DefaultButton	mount	1164	1141	5000
DetailsRow	mount	3815	3811	5000
DetailsRowFast	mount	3805	3814	5000
DetailsRowNoStyles	mount	3569	3691	5000
Dialog	mount	1413	2144	1000
DocumentCardTitle	mount	162	147	1000
Dropdown	mount	3377	3358	5000
FluentProviderNext	mount	6813	6709	5000
FocusTrapZone	mount	1772	1763	5000
FocusZone	mount	1771	1803	5000
IconButton	mount	1814	1790	5000
Label	mount	325	336	5000
Layer	mount	1796	1833	5000
Link	mount	467	478	5000
MakeStyles	mount	1746	1725	50000
MenuButton	mount	1526	1490	5000
MessageBar	mount	1990	1972	5000
Nav	mount	3359	3330	1000
OverflowSet	mount	1042	1024	5000
Panel	mount	2094	2122	1000
Persona	mount	848	833	1000
Pivot	mount	1414	1496	1000
PrimaryButton	mount	1352	1320	5000
Rating	mount	8073	8162	5000
SearchBox	mount	1399	1373	5000
Shimmer	mount	2668	2616	5000
Slider	mount	1996	1981	5000
SpinButton	mount	5043	5111	5000
Spinner	mount	399	395	5000
SplitButton	mount	3270	3197	5000
Stack	mount	532	514	5000
StackWithIntrinsicChildren	mount	1628	1618	5000
StackWithTextChildren	mount	4857	4828	5000
SwatchColorPicker	mount	10452	10351	5000
Tabs	mount	1426	1413	1000
TagPicker	mount	2548	2479	5000
TeachingBubble	mount	11706	11786	5000
Text	mount	429	443	5000
TextField	mount	1417	1399	5000
ThemeProvider	mount	1203	1172	5000
ThemeProvider	virtual-rerender	613	595	5000
Toggle	mount	850	813	5000
buttonNative	mount	107	111	5000

Perf Analysis (`@fluentui/react-northstar`)

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
GridMinimalPerf.default	380	334	1.14:1
AttachmentMinimalPerf.default	176	159	1.11:1
SkeletonMinimalPerf.default	382	348	1.1:1
AccordionMinimalPerf.default	163	150	1.09:1
ChatDuplicateMessagesPerf.default	320	298	1.07:1
ImageMinimalPerf.default	415	387	1.07:1
SegmentMinimalPerf.default	374	352	1.06:1
AlertMinimalPerf.default	297	282	1.05:1
AvatarMinimalPerf.default	203	194	1.05:1
FormMinimalPerf.default	443	422	1.05:1
LayoutMinimalPerf.default	383	364	1.05:1
RefMinimalPerf.default	228	217	1.05:1
TreeWith60ListItems.default	185	177	1.05:1
AttachmentSlotsPerf.default	1121	1076	1.04:1
BoxMinimalPerf.default	366	351	1.04:1
ButtonMinimalPerf.default	176	170	1.04:1
ChatMinimalPerf.default	686	660	1.04:1
PopupMinimalPerf.default	592	567	1.04:1
IconMinimalPerf.default	677	654	1.04:1
TreeMinimalPerf.default	842	808	1.04:1
CardMinimalPerf.default	579	564	1.03:1
FlexMinimalPerf.default	288	280	1.03:1
ProviderMergeThemesPerf.default	1655	1609	1.03:1
TextAreaMinimalPerf.default	526	513	1.03:1
ChatWithPopoverPerf.default	391	382	1.02:1
DatepickerMinimalPerf.default	5497	5412	1.02:1
DialogMinimalPerf.default	776	760	1.02:1
HeaderMinimalPerf.default	377	368	1.02:1
ListNestedPerf.default	582	568	1.02:1
StatusMinimalPerf.default	704	689	1.02:1
CustomToolbarPrototype.default	3861	3799	1.02:1
DividerMinimalPerf.default	379	375	1.01:1
LabelMinimalPerf.default	404	400	1.01:1
ListWith60ListItems.default	670	663	1.01:1
LoaderMinimalPerf.default	712	705	1.01:1
MenuButtonMinimalPerf.default	1723	1710	1.01:1
TooltipMinimalPerf.default	1048	1035	1.01:1
VideoMinimalPerf.default	660	653	1.01:1
CheckboxMinimalPerf.default	2772	2778	1:1
DropdownMinimalPerf.default	3034	3049	1:1
EmbedMinimalPerf.default	4174	4170	1:1
InputMinimalPerf.default	1285	1285	1:1
RadioGroupMinimalPerf.default	473	472	1:1
SliderMinimalPerf.default	1577	1572	1:1
SplitButtonMinimalPerf.default	3966	3979	1:1
TableManyItemsPerf.default	2027	2027	1:1
TableMinimalPerf.default	417	416	1:1
ButtonOverridesMissPerf.default	1695	1713	0.99:1
DropdownManyItemsPerf.default	697	701	0.99:1
HeaderSlotsPerf.default	796	806	0.99:1
ListMinimalPerf.default	531	537	0.99:1
MenuMinimalPerf.default	871	884	0.99:1
PortalMinimalPerf.default	168	169	0.99:1
ProviderMinimalPerf.default	1011	1020	0.99:1
ReactionMinimalPerf.default	401	404	0.99:1
ToolbarMinimalPerf.default	943	953	0.99:1
AnimationMinimalPerf.default	408	417	0.98:1
ButtonSlotsPerf.default	565	574	0.98:1
ItemLayoutMinimalPerf.default	1253	1273	0.98:1
ListCommonPerf.default	671	687	0.98:1
CarouselMinimalPerf.default	469	483	0.97:1
TextMinimalPerf.default	364	378	0.96:1
RosterPerf.default	1224	1319	0.93:1

msft-fluent-ui-bot · 2021-07-20T22:26:23Z

🎉@fluentui/react-components@v9.0.0-alpha.81 has been released which incorporates this pull request.:tada:

Handy links:

…8970) * chore: add bundle size fixtures for converged components * Change files * add fixture for positioning * Change files * fix name in fixture

chore: add bundle size fixtures for converged components

0851cd3

msft-fluent-ui-bot assigned ling1726 Jul 16, 2021

This was referenced Jul 16, 2021

Bundle size tooling #17697

Closed

chore: remove SizeAuditor task for @fluentui/react-components #18971

Merged

Change files

7db7363

layershifter added 3 commits July 16, 2021 11:41

add fixture for positioning

632b5d0

Change files

deffb36

fix name in fixture

d78487a

layershifter marked this pull request as ready for review July 16, 2021 09:44

layershifter requested review from a team, behowell, dzearing, khmakoto, ling1726, miroslavstastny and sopranopillow as code owners July 16, 2021 09:44

layershifter added the Fluent UI react-components (v9) label Jul 16, 2021

ling1726 reviewed Jul 16, 2021

View reviewed changes

ling1726 approved these changes Jul 16, 2021

View reviewed changes

khmakoto approved these changes Jul 16, 2021

View reviewed changes

miroslavstastny approved these changes Jul 20, 2021

View reviewed changes

layershifter merged commit 0723d06 into master Jul 20, 2021

layershifter deleted the chore/add-bs-fixtures branch July 20, 2021 13:18

layershifter mentioned this pull request Jul 20, 2021

Text - Typography wrappers #18956

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

chore: add bundle size fixtures for converged components #18970

chore: add bundle size fixtures for converged components #18970

Uh oh!

layershifter commented Jul 16, 2021 •

edited

Loading

Uh oh!

codesandbox-ci bot commented Jul 16, 2021 •

edited

Loading

Uh oh!

fabricteam commented Jul 16, 2021 •

edited

Loading

Uh oh!

ling1726 Jul 16, 2021

Uh oh!

layershifter Jul 16, 2021 •

edited

Loading

Uh oh!

size-auditor bot commented Jul 16, 2021

Uh oh!

fabricteam commented Jul 16, 2021

Uh oh!

msft-fluent-ui-bot commented Jul 20, 2021

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

Uh oh!

chore: add bundle size fixtures for converged components #18970

chore: add bundle size fixtures for converged components #18970

Uh oh!

Conversation

layershifter commented Jul 16, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Pull request checklist

Description of changes

Uh oh!

codesandbox-ci bot commented Jul 16, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

fabricteam commented Jul 16, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📊 Bundle size report

Uh oh!

ling1726 Jul 16, 2021

Choose a reason for hiding this comment

Uh oh!

layershifter Jul 16, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

size-auditor bot commented Jul 16, 2021

Asset size changes

Uh oh!

fabricteam commented Jul 16, 2021

Perf Analysis (@fluentui/react)

Perf Analysis (@fluentui/react-northstar)

Uh oh!

msft-fluent-ui-bot commented Jul 20, 2021

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

layershifter commented Jul 16, 2021 •

edited

Loading

codesandbox-ci bot commented Jul 16, 2021 •

edited

Loading

fabricteam commented Jul 16, 2021 •

edited

Loading

layershifter Jul 16, 2021 •

edited

Loading

Perf Analysis (`@fluentui/react`)

Perf Analysis (`@fluentui/react-northstar`)