chore: introduce bundle aware `build:react-with-umd` task for v8 packages that ship UMD to production(npm registry) #32031

Hotell · 2024-07-17T11:06:57Z

Previous Behavior

Some React v8 packages ship UMD bundle to npm registry and thus they include bundle target

New Behavior

scripts/tasks:

implements new react:build task which will produce UMD via webpack if --production argument is present

React v8 Packages that ship UMD bundle to npm registry:

no longer have bundle target within their target(task) definition
use new build:react-with-umd just-scripts task that will produce UMD bundle during release only ( if --production argument is specified )

CI Perf improvements:
This setup conforms with our our target definition per project style-guide and also improves PR pipeline speeds as webpack is invoked significantly less than before.

deploytE2E piipeline `bundle` step	time
Before	632s
After	594s / 𝚫 6% FASTER

Related Issue(s)

Follows chore: normalize target names and target dependency graph to properly utilize cache hits #31926
Implements partially [Feature]: migrate to nx #30267

…ip UMD to production(npm registry)

fabricteam · 2024-07-17T11:16:17Z

📊 Bundle size report

✅ No changes found

fabricteam · 2024-07-17T11:18:25Z

🕵 fluentui-web-components-v3 No visual regressions between this PR and main

fabricteam · 2024-07-17T11:24:06Z

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

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
FluentProviderWithTheme	virtual-rerender-with-unmount	70	78	10	Possible regression

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
Avatar	mount	660	633	5000
Button	mount	296	308	5000
Field	mount	1157	1148	5000
FluentProvider	mount	725	720	5000
FluentProviderWithTheme	mount	81	88	10
FluentProviderWithTheme	virtual-rerender	35	38	10
FluentProviderWithTheme	virtual-rerender-with-unmount	70	78	10	Possible regression
MakeStyles	mount	884	851	50000
Persona	mount	1816	1735	5000
SpinButton	mount	1393	1427	5000
SwatchPicker	mount	1643	1669	5000

fabricteam · 2024-07-17T11:24:47Z

🕵 FluentUIV0 No visual regressions between this PR and main

fabricteam · 2024-07-17T11:26:17Z

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

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
AttachmentMinimalPerf.default	92	79	1.16:1
PortalMinimalPerf.default	96	84	1.14:1
FlexMinimalPerf.default	171	153	1.12:1
ChatDuplicateMessagesPerf.default	166	151	1.1:1
LabelMinimalPerf.default	232	213	1.09:1
ListMinimalPerf.default	331	303	1.09:1
ButtonSlotsPerf.default	321	298	1.08:1
VideoMinimalPerf.default	455	422	1.08:1
ButtonMinimalPerf.default	93	87	1.07:1
TreeMinimalPerf.default	497	470	1.06:1
AvatarMinimalPerf.default	115	110	1.05:1
HeaderMinimalPerf.default	215	204	1.05:1
ListWith60ListItems.default	384	367	1.05:1
RadioGroupMinimalPerf.default	283	269	1.05:1
BoxMinimalPerf.default	202	194	1.04:1
DropdownMinimalPerf.default	1471	1414	1.04:1
ItemLayoutMinimalPerf.default	732	707	1.04:1
ReactionMinimalPerf.default	222	214	1.04:1
StatusMinimalPerf.default	403	388	1.04:1
TableMinimalPerf.default	245	235	1.04:1
DropdownManyItemsPerf.default	400	390	1.03:1
LayoutMinimalPerf.default	202	199	1.02:1
SliderMinimalPerf.default	760	748	1.02:1
TreeWith60ListItems.default	89	87	1.02:1
ButtonOverridesMissPerf.default	684	676	1.01:1
DatepickerMinimalPerf.default	3851	3796	1.01:1
EmbedMinimalPerf.default	1933	1922	1.01:1
HeaderSlotsPerf.default	469	466	1.01:1
ImageMinimalPerf.default	232	230	1.01:1
SkeletonMinimalPerf.default	207	205	1.01:1
SplitButtonMinimalPerf.default	2245	2228	1.01:1
TableManyItemsPerf.default	1122	1110	1.01:1
TextMinimalPerf.default	203	200	1.01:1
AttachmentSlotsPerf.default	656	655	1:1
CheckboxMinimalPerf.default	1149	1145	1:1
LoaderMinimalPerf.default	189	189	1:1
MenuMinimalPerf.default	515	514	1:1
MenuButtonMinimalPerf.default	972	969	1:1
SegmentMinimalPerf.default	195	195	1:1
AnimationMinimalPerf.default	296	299	0.99:1
CardMinimalPerf.default	315	317	0.99:1
ListNestedPerf.default	331	335	0.99:1
ProviderMergeThemesPerf.default	645	649	0.99:1
TextAreaMinimalPerf.default	288	292	0.99:1
CustomToolbarPrototype.default	1482	1490	0.99:1
DividerMinimalPerf.default	197	202	0.98:1
FormMinimalPerf.default	221	225	0.98:1
GridMinimalPerf.default	194	198	0.98:1
RosterPerf.default	1581	1606	0.98:1
PopupMinimalPerf.default	356	362	0.98:1
ProviderMinimalPerf.default	200	205	0.98:1
RefMinimalPerf.default	112	114	0.98:1
AlertMinimalPerf.default	151	156	0.97:1
ChatMinimalPerf.default	446	461	0.97:1
DialogMinimalPerf.default	441	454	0.97:1
InputMinimalPerf.default	536	551	0.97:1
ToolbarMinimalPerf.default	531	547	0.97:1
AccordionMinimalPerf.default	88	92	0.96:1
IconMinimalPerf.default	384	399	0.96:1
ListCommonPerf.default	385	406	0.95:1
TooltipMinimalPerf.default	1214	1282	0.95:1
ChatWithPopoverPerf.default	203	216	0.94:1
CarouselMinimalPerf.default	255	275	0.93:1

change/@fluentui-azure-themes-a88a46a2-005b-456c-9295-49ecb3d78029.json

…that ship UMD to production(npm registry)

change/@fluentui-azure-themes-a88a46a2-005b-456c-9295-49ecb3d78029.json

fabricteam · 2024-07-17T12:56:38Z

Perf Analysis (`@fluentui/react`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
BaseButton	mount	619	625	5000
Breadcrumb	mount	1708	1700	1000
Checkbox	mount	1735	1738	5000
CheckboxBase	mount	1530	1471	5000
ChoiceGroup	mount	2998	3000	5000
ComboBox	mount	687	703	1000
CommandBar	mount	6645	6692	1000
ContextualMenu	mount	12936	13018	1000
DefaultButton	mount	814	820	5000
DetailsRow	mount	2263	2239	5000
DetailsRowFast	mount	2273	2250	5000
DetailsRowNoStyles	mount	2097	2121	5000
Dialog	mount	2873	2733	1000
DocumentCardTitle	mount	230	234	1000
Dropdown	mount	2080	2066	5000
FocusTrapZone	mount	1164	1164	5000
FocusZone	mount	1140	1136	5000
GroupedList	mount	38844	43547	2
GroupedList	virtual-rerender	20954	20831	2
GroupedList	virtual-rerender-with-unmount	52489	52612	2
GroupedListV2	mount	225	231	2
GroupedListV2	virtual-rerender	218	224	2
GroupedListV2	virtual-rerender-with-unmount	239	236	2
IconButton	mount	1166	1156	5000
Label	mount	342	354	5000
Layer	mount	2766	2820	5000
Link	mount	420	396	5000
MenuButton	mount	991	1027	5000
MessageBar	mount	22085	22094	5000
Nav	mount	2095	2014	1000
OverflowSet	mount	798	803	5000
Panel	mount	1880	1924	1000
Persona	mount	775	774	1000
Pivot	mount	917	916	1000
PrimaryButton	mount	935	944	5000
Rating	mount	4667	4804	5000
SearchBox	mount	903	953	5000
Shimmer	mount	1897	1878	5000
Slider	mount	1364	1352	5000
SpinButton	mount	3018	3063	5000
Spinner	mount	399	399	5000
SplitButton	mount	1888	1875	5000
Stack	mount	437	439	5000
StackWithIntrinsicChildren	mount	889	900	5000
StackWithTextChildren	mount	2776	2791	5000
SwatchColorPicker	mount	6506	6563	5000
TagPicker	mount	1543	1484	5000
Text	mount	393	397	5000
TextField	mount	957	962	5000
ThemeProvider	mount	885	881	5000
ThemeProvider	virtual-rerender	606	591	5000
ThemeProvider	virtual-rerender-with-unmount	1301	1338	5000
Toggle	mount	614	637	5000
buttonNative	mount	206	197	5000

packages/react-monaco-editor/package.json

Hotell · 2024-07-18T13:40:37Z

got enough reviewers - admin merged

Hotell added 2 commits July 17, 2024 13:02

feat: introduce bundle aware build:react task for v8 packages that sh…

0bb6b34

…ip UMD to production(npm registry)

change files

b50e4e2

github-actions bot added this to the July Project Cycle Q3 2024 milestone Jul 17, 2024

Hotell changed the title ~~Nx/target names normalize react v8 build target~~ chore: introduce bundle aware build:react task for v8 packages that ship UMD to production(npm registry) Jul 17, 2024

Hotell added Area: Build System Fluent UI react (v8) Issues about @fluentui/react (v8) labels Jul 17, 2024

fabricteam reviewed Jul 17, 2024

View reviewed changes

change/@fluentui-azure-themes-a88a46a2-005b-456c-9295-49ecb3d78029.json Show resolved Hide resolved

fixup! feat: introduce bundle aware build:react task for v8 packages …

0c747c5

…that ship UMD to production(npm registry)

Hotell changed the title ~~chore: introduce bundle aware build:react task for v8 packages that ship UMD to production(npm registry)~~ chore: introduce bundle aware build:react-with-umd task for v8 packages that ship UMD to production(npm registry) Jul 17, 2024

fabricteam reviewed Jul 17, 2024

View reviewed changes

change/@fluentui-azure-themes-a88a46a2-005b-456c-9295-49ecb3d78029.json Show resolved Hide resolved

Hotell marked this pull request as ready for review July 17, 2024 13:26

Hotell requested review from a team, GeoffCoxMSFT, khmakoto, dzearing, Jacqueline-ms and robtaft-ms as code owners July 17, 2024 13:26

Hotell commented Jul 17, 2024

View reviewed changes

packages/react-monaco-editor/package.json Show resolved Hide resolved

Hotell mentioned this pull request Jul 17, 2024

[Feature]: migrate to nx #30267

Closed

39 tasks

AtishayMsft approved these changes Jul 17, 2024

View reviewed changes

spmonahan approved these changes Jul 17, 2024

View reviewed changes

GeoffCoxMSFT approved these changes Jul 17, 2024

View reviewed changes

layershifter approved these changes Jul 17, 2024

View reviewed changes

tudorpopams requested review from dmytrokirpa and mainframev July 18, 2024 12:04

mainframev approved these changes Jul 18, 2024

View reviewed changes

Hotell merged commit b147de9 into microsoft:master Jul 18, 2024
21 checks passed

Hotell deleted the nx/target-names-normalize-react-v8-build-target branch July 18, 2024 13:40

Hotell mentioned this pull request Aug 1, 2024

[Bug]: fluentui-react.* files removed from "dist" folder #32189

Closed

2 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

chore: introduce bundle aware `build:react-with-umd` task for v8 packages that ship UMD to production(npm registry) #32031

chore: introduce bundle aware `build:react-with-umd` task for v8 packages that ship UMD to production(npm registry) #32031

Hotell commented Jul 17, 2024 •

edited

Loading

fabricteam commented Jul 17, 2024 •

edited

Loading

fabricteam commented Jul 17, 2024 •

edited

Loading

fabricteam commented Jul 17, 2024 •

edited

Loading

fabricteam commented Jul 17, 2024 •

edited

Loading

fabricteam commented Jul 17, 2024 •

edited

Loading

fabricteam commented Jul 17, 2024

Hotell commented Jul 18, 2024

chore: introduce bundle aware build:react-with-umd task for v8 packages that ship UMD to production(npm registry) #32031

chore: introduce bundle aware build:react-with-umd task for v8 packages that ship UMD to production(npm registry) #32031

Conversation

Hotell commented Jul 17, 2024 • edited Loading

Previous Behavior

New Behavior

Related Issue(s)

fabricteam commented Jul 17, 2024 • edited Loading

📊 Bundle size report

fabricteam commented Jul 17, 2024 • edited Loading

🕵 fluentui-web-components-v3 No visual regressions between this PR and main

fabricteam commented Jul 17, 2024 • edited Loading

Perf Analysis (@fluentui/react-components)

fabricteam commented Jul 17, 2024 • edited Loading

🕵 FluentUIV0 No visual regressions between this PR and main

fabricteam commented Jul 17, 2024 • edited Loading

Perf Analysis (@fluentui/react-northstar)

fabricteam commented Jul 17, 2024

Perf Analysis (@fluentui/react)

Hotell commented Jul 18, 2024

chore: introduce bundle aware `build:react-with-umd` task for v8 packages that ship UMD to production(npm registry) #32031

chore: introduce bundle aware `build:react-with-umd` task for v8 packages that ship UMD to production(npm registry) #32031

Hotell commented Jul 17, 2024 •

edited

Loading

fabricteam commented Jul 17, 2024 •

edited

Loading

fabricteam commented Jul 17, 2024 •

edited

Loading

fabricteam commented Jul 17, 2024 •

edited

Loading

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

fabricteam commented Jul 17, 2024 •

edited

Loading

fabricteam commented Jul 17, 2024 •

edited

Loading

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

Perf Analysis (`@fluentui/react`)