Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: improve dist size for N* #15331

Merged
merged 1 commit into from
Jan 4, 2021
Merged

Conversation

layershifter
Copy link
Member

warnings about sourcemaps

image

The basic Webpack setup was screaming about missing sourcemaps, now there are inlined so there it's not an issue anymore.

cleanup build

With @miroslavstastny we mentioned that artifacts published to NPM are too heavy.

  • dist folder was not cleaned up properly (/* does not work at least on Windows) so I was publishing processedIcons folder that was removed a decade ago
  • dts folder was also published however it's not required at all

The result is 31MB => 14MB on published artifacts for @fluentui/react-northstar, this should speed up install of packages on CodeSandbox.

@codesandbox-ci
Copy link

codesandbox-ci bot commented Oct 1, 2020

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 39d8aa5:

Sandbox Source
Fluent UI Button Configuration
microsoft/fluentui: codesandbox-react-template Configuration
microsoft/fluentui: codesandbox-react-next-template Configuration
microsoft/fluentui: codesandbox-react-northstar-template Configuration

@msft-github-bot
Copy link
Contributor

Perf Analysis

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 831 821 5000
BaseButton mount 933 926 5000
Breadcrumb mount 39293 39057 5000
BreadcrumbNext mount 147040 148754 5000
ButtonNext mount 578 565 5000
Checkbox mount 1565 1594 5000
CheckboxBase mount 1326 1333 5000
CheckboxNext mount 1525 1524 5000
ChoiceGroup mount 4954 5027 5000
ChoiceGroupNext mount 9221 9297 5000
ComboBox mount 914 913 1000
CommandBar mount 7359 7358 1000
ContextualMenu mount 12430 12508 1000
DefaultButton mount 1146 1153 5000
DetailsRow mount 3660 3666 5000
DetailsRowFast mount 3557 3640 5000
DetailsRowNoStyles mount 3468 3380 5000
Dialog mount 1481 1501 1000
DocumentCardTitle mount 1727 1708 1000
Dropdown mount 2584 2594 5000
FocusTrapZone mount 1669 1616 5000
FocusTrapZoneNext mount 1709 1700 5000
FocusZone mount 1745 1779 5000
IconButton mount 1785 1808 5000
Label mount 334 320 5000
Layer mount 1935 1914 5000
LayerNext mount 1878 1861 5000
Link mount 444 450 5000
LinkNext mount 474 475 5000
MenuButton mount 1492 1506 5000
MessageBar mount 1984 2015 5000
MessageBarNext mount 1927 1944 5000
Nav mount 3233 3227 1000
OverflowSet mount 1374 1360 5000
OverflowSetNext mount 1029 985 5000
Panel mount 1442 1432 1000
Persona mount 867 831 1000
Pivot mount 1419 1428 1000
PivotNext mount 1378 1341 1000
PrimaryButton mount 1292 1306 5000
Rating mount 7683 7742 5000
RatingNext mount 7571 7564 5000
SearchBox mount 1327 1339 5000
SearchBoxNext mount 1337 1349 5000
Shimmer mount 2630 2598 5000
ShimmerNext mount 2574 2589 5000
Slider mount 1505 1530 5000
SliderNext mount 1879 1886 5000
SpinButton mount 4974 4941 5000
SpinButtonNext mount 5021 5110 5000
Spinner mount 397 414 5000
SplitButton mount 3166 3130 5000
Stack mount 550 534 5000
StackWithIntrinsicChildren mount 1853 1901 5000
StackWithTextChildren mount 5010 4994 5000
SwatchColorPicker mount 10344 10230 5000
SwatchColorPickerNext mount 10198 10141 5000
TagPicker mount 2749 2756 5000
TeachingBubble mount 47527 47218 5000
TeachingBubbleNext mount 11324 11261 5000
Text mount 424 426 5000
TextField mount 1390 1365 5000
ThemeProvider mount 2967 2965 5000
ThemeProvider virtual-rerender 571 588 5000
Toggle mount 805 829 5000
ToggleNext mount 807 813 5000
button mount 115 117 5000

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🎯 Avatar.Fluent 0.46 0.47 0.98:1 2000 927
🦄 Button.Fluent 0.12 0.21 0.57:1 5000 612
🔧 Checkbox.Fluent 0.64 0.36 1.78:1 1000 635
🎯 Dialog.Fluent 0.17 0.22 0.77:1 5000 842
🔧 Dropdown.Fluent 2.83 0.47 6.02:1 1000 2829
🔧 Icon.Fluent 0.14 0.06 2.33:1 5000 723
🎯 Image.Fluent 0.09 0.11 0.82:1 5000 428
🔧 Slider.Fluent 1.54 0.37 4.16:1 1000 1540
🔧 Text.Fluent 0.08 0.03 2.67:1 5000 399
🦄 Tooltip.Fluent 0.11 14.66 0.01:1 5000 568

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
RadioGroupMinimalPerf.default 538 496 1.08:1
ReactionMinimalPerf.default 469 433 1.08:1
SegmentMinimalPerf.default 423 390 1.08:1
TableMinimalPerf.default 456 426 1.07:1
AccordionMinimalPerf.default 165 155 1.06:1
ButtonMinimalPerf.default 201 189 1.06:1
CardMinimalPerf.default 620 586 1.06:1
CarouselMinimalPerf.default 483 454 1.06:1
ChatDuplicateMessagesPerf.default 444 418 1.06:1
HeaderMinimalPerf.default 422 398 1.06:1
Text.Fluent 399 377 1.06:1
AttachmentMinimalPerf.default 178 170 1.05:1
ChatWithPopoverPerf.default 486 464 1.05:1
ListWith60ListItems.default 985 935 1.05:1
Image.Fluent 428 409 1.05:1
AvatarMinimalPerf.default 508 489 1.04:1
FlexMinimalPerf.default 318 305 1.04:1
HeaderSlotsPerf.default 866 830 1.04:1
AttachmentSlotsPerf.default 1157 1125 1.03:1
DialogMinimalPerf.default 839 817 1.03:1
DividerMinimalPerf.default 411 399 1.03:1
LayoutMinimalPerf.default 440 429 1.03:1
ProviderMinimalPerf.default 1008 978 1.03:1
RefMinimalPerf.default 237 230 1.03:1
TableManyItemsPerf.default 2363 2284 1.03:1
ToolbarMinimalPerf.default 1010 976 1.03:1
Dialog.Fluent 842 815 1.03:1
AlertMinimalPerf.default 325 318 1.02:1
LabelMinimalPerf.default 453 442 1.02:1
ListNestedPerf.default 617 602 1.02:1
PopupMinimalPerf.default 720 705 1.02:1
ProviderMergeThemesPerf.default 2059 2022 1.02:1
SkeletonMinimalPerf.default 472 465 1.02:1
SplitButtonMinimalPerf.default 4002 3914 1.02:1
TreeMinimalPerf.default 929 907 1.02:1
TreeWith60ListItems.default 213 209 1.02:1
Avatar.Fluent 927 909 1.02:1
AnimationMinimalPerf.default 429 423 1.01:1
ButtonUseCssNestingPerf.default 1106 1091 1.01:1
DropdownMinimalPerf.default 2861 2825 1.01:1
ItemLayoutMinimalPerf.default 1364 1349 1.01:1
MenuButtonMinimalPerf.default 1653 1642 1.01:1
PortalMinimalPerf.default 157 156 1.01:1
VideoMinimalPerf.default 679 670 1.01:1
Tooltip.Fluent 568 561 1.01:1
ButtonSlotsPerf.default 618 618 1:1
ChatMinimalPerf.default 649 652 1:1
CheckboxMinimalPerf.default 2842 2833 1:1
EmbedMinimalPerf.default 1983 1974 1:1
GridMinimalPerf.default 376 376 1:1
ImageMinimalPerf.default 418 420 1:1
InputMinimalPerf.default 1281 1281 1:1
ListMinimalPerf.default 519 519 1:1
StatusMinimalPerf.default 860 861 1:1
TextAreaMinimalPerf.default 542 540 1:1
CustomToolbarPrototype.default 3752 3754 1:1
TooltipMinimalPerf.default 828 826 1:1
Checkbox.Fluent 635 636 1:1
BoxMinimalPerf.default 393 395 0.99:1
ButtonOverridesMissPerf.default 1649 1669 0.99:1
ButtonUseCssPerf.default 845 850 0.99:1
DropdownManyItemsPerf.default 783 789 0.99:1
ListCommonPerf.default 697 701 0.99:1
LoaderMinimalPerf.default 729 738 0.99:1
TextMinimalPerf.default 382 384 0.99:1
Dropdown.Fluent 2829 2862 0.99:1
Slider.Fluent 1540 1562 0.99:1
FormMinimalPerf.default 473 481 0.98:1
MenuMinimalPerf.default 910 927 0.98:1
SliderMinimalPerf.default 1531 1565 0.98:1
Button.Fluent 612 624 0.98:1
Icon.Fluent 723 736 0.98:1
IconMinimalPerf.default 726 772 0.94:1

@size-auditor
Copy link

size-auditor bot commented Oct 1, 2020

Asset size changes

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

Baseline commit: 0af4f308c6f7da6a6c5e3796696e92d451a73919 (build)


task(
'bundle:package:types',
series('bundle:package:types:tsc', 'bundle:package:types:copy', 'bundle:package:types:clean'),
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Types should exist only under es directory, this will remove temporary dts directory after build.

.pipe(dest(paths.packageDist(packageName, 'commonjs'))),
);

task('bundle:package:es', () =>
src(componentsSrc)
.pipe(sourcemaps.init())
.pipe(babel({ caller: { useESModules: true } } as any))
.pipe(sourcemaps.write('.'))
.pipe(sourcemaps.write())
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sourcemaps will be written inline, it saves from sourcemaps warnings.

@layershifter layershifter merged commit 6d4e387 into master Jan 4, 2021
@layershifter layershifter deleted the chore/build-improvements branch January 4, 2021 19:37
YuanboXue-Amber added a commit that referenced this pull request Jan 19, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants