Skip to content

chore: improve docgen perf #14590

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

Merged
merged 7 commits into from
Aug 20, 2020
Merged

chore: improve docgen perf #14590

merged 7 commits into from
Aug 20, 2020

Conversation

layershifter
Copy link
Member

@layershifter layershifter commented Aug 18, 2020

Description of changes

This is heavily based on work that @ecraig12345 did in #12897. However, the actual implementation is inspired by strothj/react-docgen-typescript-loader#40. The idea is still the same - to reuse the same ts.Program as it's quite heavy. Direct requires of component's files were also removes to parse defaultProps we reuse existing AST produced by Babel.

This allows to speed up build:component-info without caching it takes around 100-110 seconds on machine.

Previous PRs: Finished 'build:docs:assets:component:info' after 5.35 min
This PR: Finished 'build:docs:assets:component:info' after 1.57 min


Another change is the lazy evaluation for @babel/plugin-transform-modules-commonjs. This improves initial load time of modules because dependencies will be evaluated based on their usage.

@dzearing
Copy link
Member

I think @ecraig12345 should probably take a look here as well, seems reasonable.

Copy link
Member

@dzearing dzearing left a comment

Choose a reason for hiding this comment

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

Seems reasonable, but @ecraig12345 might be able to spot something better here.

@layershifter
Copy link
Member Author

This allows to speed up build:component-info without caching it takes around 100-110 seconds on machine.

This is definitely better, but it still awful 😨 I don't have the explanation why it slow downs on some files. @ecraig12345 any ideas?

File Time in ms
Accordion\Accordion.tsx 3376.5990000367165
Accordion\AccordionContent.tsx 1234.237399995327
Accordion\AccordionTitle.tsx 39.98910003900528
Alert\Alert.tsx 1233.830999970436
Alert\AlertDismissAction.tsx 1197.1260999441147
Attachment\Attachment.tsx 1207.950500011444
Attachment\AttachmentAction.tsx 1249.627600967884
Attachment\AttachmentBody.tsx 44.709100008010864
Attachment\AttachmentDescription.tsx 30.8121999502182
Attachment\AttachmentHeader.tsx 29.475099980831146
Attachment\AttachmentIcon.tsx 28.09469997882843
Animation\Animation.tsx 778.9541000127792

@msft-github-bot
Copy link
Contributor

msft-github-bot commented Aug 18, 2020

Perf Analysis

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
BaseButton mount 899 908 5000
ButtonNext mount 592 576 5000
Checkbox mount 1588 1543 5000
CheckboxBase mount 1329 1299 5000
CheckboxNext mount 1720 1730 5000
ChoiceGroup mount 5066 4958 5000
ChoiceGroupNext mount 5110 5055 5000
ComboBox mount 943 906 1000
CommandBar mount 7702 7659 1000
ContextualMenu mount 14078 13817 1000
DefaultButton mount 1146 1114 5000
DetailsRow mount 3544 3631 5000
DetailsRowFast mount 3636 3633 5000
DetailsRowNoStyles mount 3364 3431 5000
Dialog mount 1484 1518 1000
DocumentCardTitle mount 1883 1874 1000
Dropdown mount 2707 2606 5000
FocusZone mount 1862 1815 5000
IconButton mount 1735 1742 5000
Label mount 351 343 5000
Link mount 443 445 5000
LinkNext mount 501 469 5000
MenuButton mount 1443 1456 5000
Nav mount 3227 3218 1000
OverflowSet mount 1435 1380 5000
OverflowSetNext mount 1061 1056 5000
Panel mount 1467 1459 1000
Persona mount 858 842 1000
Pivot mount 1420 1433 1000
PivotNext mount 1391 1425 1000
PrimaryButton mount 1275 1306 5000
SearchBox mount 1296 1333 5000
SearchBoxNext mount 1353 1354 5000
Slider mount 1518 1511 5000
SliderNext mount 1936 1963 5000
SpinButton mount 4991 4980 5000
SpinButtonNext mount 5049 4989 5000
Spinner mount 431 424 5000
SplitButton mount 3147 3129 5000
Stack mount 540 514 5000
StackWithIntrinsicChildren mount 2100 2027 5000
StackWithTextChildren mount 4980 4952 5000
TagPicker mount 2710 2751 5000
Text mount 438 429 5000
TextField mount 1409 1396 5000
ThemeProvider mount 3807 3981 5000
ThemeProvider virtual-rerender 461 465 5000
Toggle mount 846 851 5000
ToggleNext mount 828 840 5000
button mount 127 129 5000

Perf Analysis (Fluent)

⚠️ 3 potential perf regressions detected

Potential regressions comparing to master

Scenario Current PR Ticks Baseline Ticks Ratio Regression Analysis
ButtonOverridesMissPerf.default 113 45 2.51:1 analysis
ListCommonPerf.default 660 948 0.7:1 analysis
ListNestedPerf.default 597 874 0.68:1 analysis
Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🎯 Avatar.Fluent 0.44 0.49 0.9:1 2000 881
🦄 Button.Fluent 0.11 0.19 0.58:1 5000 537
🔧 Checkbox.Fluent 0.67 0.33 2.03:1 1000 668
🦄 Dialog.Fluent 0.15 0.23 0.65:1 5000 771
🔧 Dropdown.Fluent 3.02 0.47 6.43:1 1000 3023
🔧 Icon.Fluent 0.14 0.05 2.8:1 5000 705
🦄 Image.Fluent 0.07 0.11 0.64:1 5000 344
🔧 Slider.Fluent 1.63 0.36 4.53:1 1000 1630
🔧 Text.Fluent 0.07 0.03 2.33:1 5000 350
🦄 Tooltip.Fluent 0.11 16.56 0.01:1 5000 538

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
ButtonUseCssNestingPerf.default 60 44 1.36:1
ButtonUseCssPerf.default 55 42 1.31:1
AccordionMinimalPerf.default 156 140 1.11:1
AttachmentMinimalPerf.default 168 152 1.11:1
FlexMinimalPerf.default 285 258 1.1:1
AlertMinimalPerf.default 314 287 1.09:1
AvatarMinimalPerf.default 493 458 1.08:1
ProviderMinimalPerf.default 981 911 1.08:1
SegmentMinimalPerf.default 357 332 1.08:1
BoxMinimalPerf.default 351 329 1.07:1
CarouselMinimalPerf.default 472 441 1.07:1
GridMinimalPerf.default 348 324 1.07:1
Text.Fluent 350 327 1.07:1
LayoutMinimalPerf.default 398 377 1.06:1
IconMinimalPerf.default 675 636 1.06:1
Checkbox.Fluent 668 629 1.06:1
ChatWithPopoverPerf.default 481 460 1.05:1
PortalMinimalPerf.default 126 120 1.05:1
ReactionMinimalPerf.default 387 369 1.05:1
Icon.Fluent 705 670 1.05:1
AnimationMinimalPerf.default 399 384 1.04:1
ButtonSlotsPerf.default 608 582 1.04:1
ChatDuplicateMessagesPerf.default 439 421 1.04:1
HeaderMinimalPerf.default 357 344 1.04:1
MenuMinimalPerf.default 853 821 1.04:1
ButtonMinimalPerf.default 175 170 1.03:1
CardMinimalPerf.default 551 535 1.03:1
DialogMinimalPerf.default 782 760 1.03:1
PopupMinimalPerf.default 694 675 1.03:1
ProviderMergeThemesPerf.default 2015 1959 1.03:1
StatusMinimalPerf.default 680 658 1.03:1
CustomToolbarPrototype.default 3877 3756 1.03:1
Avatar.Fluent 881 859 1.03:1
EmbedMinimalPerf.default 1926 1895 1.02:1
FormMinimalPerf.default 390 381 1.02:1
LabelMinimalPerf.default 399 393 1.02:1
MenuButtonMinimalPerf.default 1545 1518 1.02:1
RefMinimalPerf.default 215 211 1.02:1
TextAreaMinimalPerf.default 443 435 1.02:1
ToolbarMinimalPerf.default 941 920 1.02:1
VideoMinimalPerf.default 625 610 1.02:1
Button.Fluent 537 528 1.02:1
Tooltip.Fluent 538 529 1.02:1
ChatMinimalPerf.default 605 599 1.01:1
DropdownManyItemsPerf.default 752 743 1.01:1
InputMinimalPerf.default 1322 1312 1.01:1
RadioGroupMinimalPerf.default 402 399 1.01:1
SliderMinimalPerf.default 1628 1607 1.01:1
SplitButtonMinimalPerf.default 3805 3761 1.01:1
TableManyItemsPerf.default 2185 2163 1.01:1
Dropdown.Fluent 3023 3003 1.01:1
Slider.Fluent 1630 1616 1.01:1
CheckboxMinimalPerf.default 2870 2856 1:1
ItemLayoutMinimalPerf.default 1278 1277 1:1
ListMinimalPerf.default 479 478 1:1
LoaderMinimalPerf.default 736 737 1:1
TextMinimalPerf.default 331 332 1:1
Dialog.Fluent 771 770 1:1
AttachmentSlotsPerf.default 1157 1163 0.99:1
DividerMinimalPerf.default 345 350 0.99:1
HeaderSlotsPerf.default 760 767 0.99:1
SkeletonMinimalPerf.default 398 403 0.99:1
TableMinimalPerf.default 396 398 0.99:1
TreeWith60ListItems.default 215 217 0.99:1
ImageMinimalPerf.default 351 360 0.98:1
TooltipMinimalPerf.default 771 789 0.98:1
TreeMinimalPerf.default 860 882 0.98:1
Image.Fluent 344 350 0.98:1
DropdownMinimalPerf.default 2982 3130 0.95:1
ListWith60ListItems.default 952 1082 0.88:1

@size-auditor
Copy link

size-auditor bot commented Aug 18, 2020

Asset size changes

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

Baseline commit: a4a4ea6b7c60bdf605bbc884b37120590050f79c (build)

@codesandbox-ci
Copy link

codesandbox-ci bot commented Aug 18, 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 9262503:

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

@layershifter
Copy link
Member Author

Another change is the lazy evaluation for @babel/plugin-transform-modules-commonjs. This improves initial load time of modules because dependencies will be evaluated based on their usage.

This change was reverted as we have circular references in our code 😭

@layershifter layershifter merged commit f2ac16e into master Aug 20, 2020
@layershifter layershifter changed the title chore: improve docgen perf & use lazy mode to load imports chore: improve docgen perf Aug 20, 2020
@layershifter layershifter deleted the chore/docgen-perf branch August 20, 2020 14:14
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants