chore: add more Babel plugins by layershifter · Pull Request #18037 · microsoft/fluentui

layershifter · 2021-05-04T12:12:41Z

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

Description of changes

This PR adds two Babel plugins to existing pipeline to improve bundle size: these plugins add /*#__PURE__*/ annotations before React & pure function calls, which allows them to be tree shaken/dead code eliminated by Terser and other minifiers.

`@babel/transform-react-pure-annotations`

For example, libraries making use of React.forwardRef or React.memo could be tree shaken if unused. For apps using large libraries of components that use these APIs, this could make a big difference to overall bundle size.

babel/babel#11428

Without a plugin

import * as React from "react";
const C = React.createContext({});
// 👆 unused variable, should be eliminated

// ------- ⬇ --------

/******/ (() => {
    // webpackBootstrap
    /******/ "use strict";
    // CONCATENATED MODULE: external "react"
    react.createContext({});
})
/******/ ();

With plugin

import * as React from "react";
const C = /*#__PURE__*/ React.createContext({});

// ------- ⬇ --------

/******/ (() => {
    // webpackBootstrap
    /******/ "use strict";
})
/******/ ();

`babel-plugin-annotate-pure-calls`

This plugins helps with automatic #__PURE__ annotation insertion. It add the comment to top level call expressions and new expressions in assignment contexts (those are considered by the plugin as side effect free).

https://www.npmjs.com/package/babel-plugin-annotate-pure-calls

Is also used in tsdx: https://github.com/formium/tsdx/blob/462af2d002987f985695b98400e0344b8f2754b7/src/babelPluginTsdx.ts#L72

Without a plugin

// real case from packages/make-styles/src/renderer/createDOMRenderer.ts

var ignoreSuffixes = ["-moz-placeholder", "-moz-focus-inner"].join("|");
var ignoreSuffixesRegex = new RegExp(":(" + ignoreSuffixes + ")");

// ------- ⬇ --------

(()=>{var e=["-moz-placeholder","-moz-focus-inner"].join("|");new RegExp(":("+e+")")})();
// 👆 Statement (VariableDeclaration) with side effects in source code at 1:0-72

With plugin

var ignoreSuffixes = /*#__PURE__*/["-moz-placeholder", "-moz-focus-inner"].join("|");
var ignoreSuffixesRegex = /*#__PURE__*/new RegExp(":(" + ignoreSuffixes + ")");

// ------- ⬇ --------

// nothing ¯\_(ツ)_/¯

size-auditor · 2021-05-04T12:23:09Z

Asset size changes

Project	Bundle	Baseline Size	New Size	Difference
office-ui-fabric-react	fluentui-react-components-Accordion	14.914 kB	14.983 kB	69 bytes
office-ui-fabric-react	fluentui-react-components-Menu	99.539 kB	99.42 kB	-119 bytes
office-ui-fabric-react	fluentui-react-components-Link	15.453 kB	15.333 kB	-120 bytes
office-ui-fabric-react	fluentui-react-components-Divider	18.261 kB	18.136 kB	-125 bytes
office-ui-fabric-react	fluentui-react-components-Image	11.755 kB	11.627 kB	-128 bytes
office-ui-fabric-react	fluentui-react-components-Badge	16.129 kB	16.001 kB	-128 bytes
office-ui-fabric-react	fluentui-react-components-Button	34.263 kB	34.132 kB	-131 bytes
office-ui-fabric-react	fluentui-react-components-Tooltip	39.192 kB	39.061 kB	-131 bytes
office-ui-fabric-react	fluentui-react-components-Avatar	50.773 kB	50.633 kB	-140 bytes
office-ui-fabric-react	fluentui-react-components-makeStyles	21.435 kB	21.285 kB	-150 bytes
office-ui-fabric-react	fluentui-react-components-__styles	2.275 kB	2.125 kB	-150 bytes
office-ui-fabric-react	fluentui-react-components-makeStaticStyles	8.509 kB	8.357 kB	-152 bytes
office-ui-fabric-react	fluentui-react-components-CompoundButton	40.268 kB	40.112 kB	-156 bytes
office-ui-fabric-react	fluentui-react-components-ToggleButton	52.358 kB	52.2 kB	-158 bytes
office-ui-fabric-react	fluentui-react-components-teamsLightTheme	25.024 kB	24.721 kB	-303 bytes
office-ui-fabric-react	fluentui-react-components-webLightTheme	25.024 kB	24.721 kB	-303 bytes
office-ui-fabric-react	fluentui-react-components-FluentProvider	36.489 kB	34.934 kB	-1.555 kB

Over Tolerance (1024 B) Over Baseline Below Baseline New Removed 1 kB = 1000 B

Baseline commit: 2fcfc2b90dc0a19c3505b01733b0f6104f1ba82d (build)

codesandbox-ci · 2021-05-04T12:30:20Z

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

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

fabricteam · 2021-05-04T12:41:56Z

Perf Analysis (`@fluentui/react`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
Avatar	mount	958	974	5000
BaseButton	mount	1043	1078	5000
Breadcrumb	mount	2813	2789	1000
ButtonNext	mount	571	564	5000
Checkbox	mount	1755	1784	5000
CheckboxBase	mount	1517	1504	5000
ChoiceGroup	mount	5313	5345	5000
ComboBox	mount	1082	1072	1000
CommandBar	mount	11093	11129	1000
ContextualMenu	mount	6795	6764	1000
DefaultButton	mount	1293	1263	5000
DetailsRow	mount	4128	4220	5000
DetailsRowFast	mount	4089	4093	5000
DetailsRowNoStyles	mount	3836	3939	5000
Dialog	mount	2337	2333	1000
DocumentCardTitle	mount	154	164	1000
Dropdown	mount	3605	3652	5000
FocusTrapZone	mount	1898	1938	5000
FocusZone	mount	1973	1946	5000
IconButton	mount	1978	2004	5000
Label	mount	386	374	5000
Layer	mount	2049	2001	5000
Link	mount	503	516	5000
MakeStyles	mount	2030	1929	50000
MenuButton	mount	1622	1688	5000
MessageBar	mount	2187	2197	5000
Nav	mount	3631	3682	1000
OverflowSet	mount	1156	1179	5000
Panel	mount	1533	2341	1000
Persona	mount	955	908	1000
Pivot	mount	1595	1614	1000
PrimaryButton	mount	1499	1505	5000
Rating	mount	8751	8795	5000
SearchBox	mount	1524	1525	5000
Shimmer	mount	2969	2865	5000
Slider	mount	2240	2183	5000
SpinButton	mount	5566	5524	5000
Spinner	mount	461	460	5000
SplitButton	mount	3572	3555	5000
Stack	mount	565	584	5000
StackWithIntrinsicChildren	mount	1772	1705	5000
StackWithTextChildren	mount	5308	5207	5000
SwatchColorPicker	mount	11345	11397	5000
Tabs	mount	1581	1581	1000
TagPicker	mount	2677	2777	5000
TeachingBubble	mount	12910	12836	5000
Text	mount	472	499	5000
TextField	mount	1591	1574	5000
ThemeProvider	mount	1297	1327	5000
ThemeProvider	virtual-rerender	648	645	5000
ThemeProviderNext	mount	7077	7013	5000
Toggle	mount	902	915	5000
buttonNative	mount	118	127	5000

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

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
ButtonMinimalPerf.default	207	189	1.1:1
ListCommonPerf.default	760	688	1.1:1
TextMinimalPerf.default	435	394	1.1:1
AnimationMinimalPerf.default	472	437	1.08:1
SegmentMinimalPerf.default	420	390	1.08:1
AttachmentSlotsPerf.default	1348	1255	1.07:1
CarouselMinimalPerf.default	530	497	1.07:1
LabelMinimalPerf.default	454	425	1.07:1
PortalMinimalPerf.default	176	165	1.07:1
AttachmentMinimalPerf.default	184	173	1.06:1
ChatWithPopoverPerf.default	434	411	1.06:1
StatusMinimalPerf.default	840	793	1.06:1
IconMinimalPerf.default	751	706	1.06:1
ChatDuplicateMessagesPerf.default	324	309	1.05:1
ReactionMinimalPerf.default	462	438	1.05:1
LayoutMinimalPerf.default	441	426	1.04:1
ButtonOverridesMissPerf.default	1873	1820	1.03:1
ButtonSlotsPerf.default	651	631	1.03:1
FlexMinimalPerf.default	337	326	1.03:1
HeaderMinimalPerf.default	420	408	1.03:1
TreeMinimalPerf.default	903	880	1.03:1
AccordionMinimalPerf.default	176	172	1.02:1
AlertMinimalPerf.default	306	301	1.02:1
AvatarMinimalPerf.default	221	216	1.02:1
BoxMinimalPerf.default	397	389	1.02:1
CardMinimalPerf.default	642	628	1.02:1
DividerMinimalPerf.default	411	404	1.02:1
DropdownManyItemsPerf.default	786	773	1.02:1
FormMinimalPerf.default	484	475	1.02:1
InputMinimalPerf.default	1364	1342	1.02:1
ItemLayoutMinimalPerf.default	1451	1425	1.02:1
ListWith60ListItems.default	742	729	1.02:1
MenuMinimalPerf.default	950	929	1.02:1
TableMinimalPerf.default	495	483	1.02:1
TooltipMinimalPerf.default	1100	1081	1.02:1
VideoMinimalPerf.default	756	741	1.02:1
ChatMinimalPerf.default	708	698	1.01:1
DatepickerMinimalPerf.default	6165	6107	1.01:1
DialogMinimalPerf.default	827	816	1.01:1
EmbedMinimalPerf.default	4518	4462	1.01:1
GridMinimalPerf.default	390	385	1.01:1
ImageMinimalPerf.default	434	428	1.01:1
ListNestedPerf.default	629	620	1.01:1
MenuButtonMinimalPerf.default	1788	1776	1.01:1
SkeletonMinimalPerf.default	412	407	1.01:1
ToolbarMinimalPerf.default	1097	1083	1.01:1
TreeWith60ListItems.default	199	197	1.01:1
CheckboxMinimalPerf.default	3000	3004	1:1
HeaderSlotsPerf.default	893	896	1:1
LoaderMinimalPerf.default	760	760	1:1
SliderMinimalPerf.default	1720	1712	1:1
CustomToolbarPrototype.default	4085	4077	1:1
DropdownMinimalPerf.default	3258	3302	0.99:1
PopupMinimalPerf.default	626	633	0.99:1
SplitButtonMinimalPerf.default	4319	4374	0.99:1
ListMinimalPerf.default	591	604	0.98:1
ProviderMergeThemesPerf.default	1731	1764	0.98:1
ProviderMinimalPerf.default	1065	1084	0.98:1
TextAreaMinimalPerf.default	570	582	0.98:1
TableManyItemsPerf.default	2239	2301	0.97:1
RadioGroupMinimalPerf.default	495	520	0.95:1
RefMinimalPerf.default	252	264	0.95:1
RosterPerf.default	1237	1356	0.91:1

…hore/babel-plugins � Conflicts: � package.json

…hore/babel-plugins

layershifter · 2021-05-14T08:06:58Z

package.json

-    "@types/tmp": "0.2.0",
-    "@types/react": "16.9.42",
-    "@types/react-dom": "16.9.10",
+    "babel-plugin-annotate-pure-calls": "0.4.0",


Only this dependency have been added, all other changes are just reordering

Hotell

good job! PURE all the thingz :D

msft-fluent-ui-bot · 2021-05-19T07:37:22Z

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

Handy links:

msft-fluent-ui-bot · 2021-05-19T07:37:25Z

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

Handy links:

msft-fluent-ui-bot · 2021-05-19T07:37:31Z

🎉@fluentui/react-text@v0.3.1 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2021-05-19T07:37:34Z

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

Handy links:

msft-fluent-ui-bot · 2021-05-19T07:37:37Z

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

Handy links:

msft-fluent-ui-bot · 2021-05-19T07:37:49Z

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

Handy links:

msft-fluent-ui-bot · 2021-05-19T07:37:55Z

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

Handy links:

msft-fluent-ui-bot · 2021-05-19T07:37:58Z

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

Handy links:

msft-fluent-ui-bot · 2021-05-19T07:38:01Z

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

Handy links:

msft-fluent-ui-bot · 2021-05-19T07:38:07Z

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

Handy links:

msft-fluent-ui-bot · 2021-05-19T07:38:13Z

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

Handy links:

msft-fluent-ui-bot · 2021-05-19T07:38:16Z

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

Handy links:

msft-fluent-ui-bot · 2021-05-19T07:38:25Z

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

Handy links:

msft-fluent-ui-bot · 2021-05-19T07:38:28Z

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

Handy links:

msft-fluent-ui-bot · 2021-05-19T07:38:40Z

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

Handy links:

msft-fluent-ui-bot · 2021-05-19T07:38:49Z

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

Handy links:

msft-fluent-ui-bot · 2021-05-19T07:39:01Z

🎉@fluentui/react-cards@v1.0.0-beta.97 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2021-05-19T07:39:04Z

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

Handy links:

msft-fluent-ui-bot · 2021-05-19T07:39:07Z

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

Handy links:

msft-fluent-ui-bot · 2021-05-19T07:39:10Z

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

Handy links:

msft-fluent-ui-bot · 2021-05-19T07:39:13Z

🎉@fluentui/make-styles@v9.0.0-alpha.23 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2021-05-19T07:39:16Z

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

Handy links:

msft-fluent-ui-bot · 2021-05-19T07:39:19Z

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

Handy links:

msft-fluent-ui-bot · 2021-05-19T07:39:22Z

🎉@fluentui/jest-serializer-make-styles@v9.0.0-alpha.12 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2021-05-19T07:39:31Z

🎉@fluentui/public-docsite@v8.2.11 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2021-05-19T07:39:40Z

🎉@fluentui/babel-make-styles@v9.0.0-alpha.9 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2021-05-19T07:40:10Z

🎉@fluentui/react-examples@v8.22.11 has been released which incorporates this pull request.:tada:

Handy links:

layershifter added 2 commits May 4, 2021 14:11

chore: add more Babel plugins

a0fb707

Change files

bb2332d

layershifter added 2 commits May 12, 2021 10:54

Merge branch 'master' of https://github.com/microsoft/fluentui into c…

baccac6

…hore/babel-plugins � Conflicts: � package.json

Merge branch 'master' of https://github.com/microsoft/fluentui into c…

e9bd6a0

…hore/babel-plugins

layershifter commented May 14, 2021

View reviewed changes

layershifter marked this pull request as ready for review May 14, 2021 08:32

layershifter requested review from a team, assuncaocharles, behowell, dzearing, khmakoto and ling1726 as code owners May 14, 2021 08:32

layershifter requested review from Hotell and ecraig12345 May 14, 2021 08:32

layershifter added 2 commits May 14, 2021 10:39

add plugins to react-utilities

4f9a85d

Change files

d18ebe1

layershifter added the Area: Build System label May 14, 2021

Hotell approved these changes May 14, 2021

View reviewed changes

khmakoto approved these changes May 14, 2021

View reviewed changes

ecraig12345 approved these changes May 14, 2021

View reviewed changes

layershifter merged commit 9751408 into master May 18, 2021

layershifter deleted the chore/babel-plugins branch May 18, 2021 08:43

layershifter mentioned this pull request Jul 16, 2021

chore: add Babel plugins for more components #18968

Merged

2 tasks

layershifter mentioned this pull request Sep 20, 2021

Add forwardRef wrapper to clean up component types #19812

Closed

1 task

Conversation

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

Uh oh!

Description of changes

@babel/transform-react-pure-annotations

Without a plugin

With plugin

babel-plugin-annotate-pure-calls

Without a plugin

With plugin

Uh oh!

size-auditor bot commented May 4, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Asset size changes

Uh oh!

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

Uh oh!

Uh oh!

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

Uh oh!

Perf Analysis (@fluentui/react)

Perf Analysis (@fluentui/react-northstar)

Uh oh!

layershifter May 14, 2021

Choose a reason for hiding this comment

Uh oh!

Hotell left a comment

Choose a reason for hiding this comment

Uh oh!

msft-fluent-ui-bot commented May 19, 2021

Uh oh!

msft-fluent-ui-bot commented May 19, 2021

Uh oh!

msft-fluent-ui-bot commented May 19, 2021

Uh oh!

msft-fluent-ui-bot commented May 19, 2021

Uh oh!

msft-fluent-ui-bot commented May 19, 2021

Uh oh!

msft-fluent-ui-bot commented May 19, 2021

Uh oh!

msft-fluent-ui-bot commented May 19, 2021

Uh oh!

msft-fluent-ui-bot commented May 19, 2021

Uh oh!

msft-fluent-ui-bot commented May 19, 2021

Uh oh!

msft-fluent-ui-bot commented May 19, 2021

Uh oh!

msft-fluent-ui-bot commented May 19, 2021

Uh oh!

msft-fluent-ui-bot commented May 19, 2021

Uh oh!

msft-fluent-ui-bot commented May 19, 2021

Uh oh!

msft-fluent-ui-bot commented May 19, 2021

Uh oh!

msft-fluent-ui-bot commented May 19, 2021

Uh oh!

msft-fluent-ui-bot commented May 19, 2021

Uh oh!

msft-fluent-ui-bot commented May 19, 2021

Uh oh!

msft-fluent-ui-bot commented May 19, 2021

Uh oh!

msft-fluent-ui-bot commented May 19, 2021

Uh oh!

msft-fluent-ui-bot commented May 19, 2021

Uh oh!

msft-fluent-ui-bot commented May 19, 2021

Uh oh!

msft-fluent-ui-bot commented May 19, 2021

Uh oh!

msft-fluent-ui-bot commented May 19, 2021

Uh oh!

msft-fluent-ui-bot commented May 19, 2021

Uh oh!

msft-fluent-ui-bot commented May 19, 2021

Uh oh!

msft-fluent-ui-bot commented May 19, 2021

layershifter commented May 4, 2021 •

edited

Loading

`@babel/transform-react-pure-annotations`

`babel-plugin-annotate-pure-calls`

size-auditor bot commented May 4, 2021 •

edited

Loading

codesandbox-ci bot commented May 4, 2021 •

edited

Loading

fabricteam commented May 4, 2021 •

edited

Loading

Perf Analysis (`@fluentui/react`)

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