Skip to content

fix: update bundle-size call in pipeline #18876

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.

Sign up for GitHub

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

Jump to bottom
Merged
merged 1 commit into from
Jul 9, 2021
Merged

fix: update bundle-size call in pipeline #18876

merged 1 commit into from
Jul 9, 2021

Conversation

@layershifter
Copy link
Member

@layershifter layershifter commented Jul 9, 2021 •
edited by Hotell
Loading

Pull request checklist

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

Problem

Currently we are running bundle & bundle-size (without sinceArg, oops) commands separately. That causes build failures for N* builds as it builds packages only for affected packages:

list of built packages (example) 
verb @fluentui/ability-attributes build completed, took 17.00s
verb @fluentui/react-northstar build:info completed, took 2m 14.29s
verb @fluentui/scripts build completed, took 0.24s
verb @fluentui/a11y-testing build completed, took 6.38s
verb @fluentui/react-conformance build completed, took 15.88s
verb @fluentui/accessibility build completed, took 21.55s
verb @fluentui/react-component-event-listener build completed, took 17.00s
verb @fluentui/react-component-nesting-registry build completed, took 16.90s
verb @fluentui/react-component-ref build completed, took 27.65s
verb @fluentui/react-proptypes build completed, took 19.37s
verb @fluentui/state build completed, took 14.47s
verb @fluentui/styles build completed, took 18.26s
verb @fluentui/docs-components build completed, took 19.57s
verb @fluentui/set-version build completed, took 8.39s
verb @fluentui/example-data build completed, took 12.85s
verb @fluentui/test-utilities build completed, took 11.56s
verb @fluentui/webpack-utilities build completed, took 8.93s
verb @fluentui/keyboard-key build completed, took 12.68s
verb @fluentui/dom-utilities build completed, took 12.30s
verb @fluentui/date-time-utilities build completed, took 11.34s
verb @fluentui/merge-styles build completed, took 13.80s
verb @fluentui/react-northstar-styles-renderer build completed, took 17.79s
verb @fluentui/react-window-provider build completed, took 15.28s
verb @fluentui/jest-serializer-merge-styles build completed, took 4.53s
verb @fluentui/react-northstar-emotion-renderer build completed, took 15.61s
verb @fluentui/react-northstar-fela-renderer build completed, took 14.21s
verb @fluentui/utilities build completed, took 12.45s
verb @fluentui/react-hooks build completed, took 14.20s
verb @fluentui/theme build completed, took 13.31s
verb @fluentui/react-bindings build completed, took 42.27s
verb @fluentui/style-utilities build completed, took 10.63s
verb @fluentui/common-styles build completed, took 2.01s
verb @fluentui/font-icons-mdl2 build completed, took 9.42s
verb @fluentui/foundation-legacy build completed, took 16.52s
verb @fluentui/react-focus build completed, took 16.72s
verb @fluentui/react build completed, took 43.33s
verb @fluentui/react-icons-northstar build completed, took 31.85s

But then we will run bundle-size without scoping and will not have required artifacts:

$ /mnt/work/1/s/node_modules/.bin/lage bundle-size --no-cache
info Lage task runner - let's make it
info @fluentui/react-theme bundle-size ▶️ start 
info @fluentui/react-theme bundle-size ❌ fail
  • on master it passes because it builds everything
  • on original PR it passed because we built everything (a change *.yml invalidates --since):

fluentui/lage.config.js

Lines 41 to 43 in 2b6f9b6

// These are relative to the git root, and affects the hash of the cache
// Any of these file changes will invalidate cache
environmentGlob: ['.devops/**/*', '*.js', '*.json', '*.yml', 'apps/pr-deploy-site'],

Description of changes

This PR backports a change from #18256.

Another option is to add sinceArg to bundle-size command:

      - script: |
-         yarn lage bundle-size --no-cache
+         yarn lage bundle-size --no-cache $(sinceArg)
        displayName: create reports for packages

But current solution should give us better concurrency as lage will run bundle-size once all required builds are completed.

@layershifter layershifter requested a review from a team as a code owner July 9, 2021 09:34
@layershifter layershifter mentioned this pull request Jul 9, 2021
Merged
2 tasks
@size-auditor
Copy link

size-auditor bot commented Jul 9, 2021

Asset size changes

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

Baseline commit: 2b6f9b68a6d4ba683ccb10b462b1e2a897b20cc5 (build)

@fabricteam
Copy link
Collaborator

fabricteam commented Jul 9, 2021

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 879 932 5000
BaseButton mount 1078 1047 5000
Breadcrumb mount 2782 2865 1000
ButtonNext mount 591 583 5000
Checkbox mount 1759 1750 5000
CheckboxBase mount 1509 1484 5000
ChoiceGroup mount 5321 5443 5000
ComboBox mount 1075 1048 1000
CommandBar mount 11030 11038 1000
ContextualMenu mount 6812 6782 1000
DefaultButton mount 1304 1291 5000
DetailsRow mount 4112 4124 5000
DetailsRowFast mount 4157 4152 5000
DetailsRowNoStyles mount 4004 3940 5000
Dialog mount 2239 2424 1000
DocumentCardTitle mount 146 157 1000
Dropdown mount 3567 3569 5000
FluentProviderNext mount 7295 7194 5000
FocusTrapZone mount 1879 1918 5000
FocusZone mount 1901 1858 5000
IconButton mount 2104 1873 5000
Label mount 339 353 5000
Layer mount 1919 1984 5000
Link mount 495 533 5000
MakeStyles mount 1861 1807 50000
MenuButton mount 1589 1587 5000
MessageBar mount 2070 2098 5000
Nav mount 3497 3496 1000
OverflowSet mount 1084 1054 5000
Panel mount 2125 2180 1000
Persona mount 855 863 1000
Pivot mount 1500 1481 1000
PrimaryButton mount 1374 1376 5000
Rating mount 8390 8305 5000
SearchBox mount 1543 1577 5000
Shimmer mount 2885 2884 5000
Slider mount 2254 2163 5000
SpinButton mount 5681 5421 5000
Spinner mount 451 468 5000
SplitButton mount 3545 3553 5000
Stack mount 579 559 5000
StackWithIntrinsicChildren mount 1723 1770 5000
StackWithTextChildren mount 5131 5246 5000
SwatchColorPicker mount 11316 11322 5000
Tabs mount 1607 1565 1000
TagPicker mount 2734 2750 5000
TeachingBubble mount 12853 12911 5000
Text mount 486 486 5000
TextField mount 1568 1559 5000
ThemeProvider mount 1333 1314 5000
ThemeProvider virtual-rerender 666 644 5000
Toggle mount 916 883 5000
buttonNative mount 126 131 5000

Perf Analysis (@fluentui/react-northstar)

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
AttachmentMinimalPerf.default 197 165 1.19:1
AlertMinimalPerf.default 344 295 1.17:1
AvatarMinimalPerf.default 221 204 1.08:1
ButtonMinimalPerf.default 205 189 1.08:1
FlexMinimalPerf.default 331 307 1.08:1
SkeletonMinimalPerf.default 425 392 1.08:1
PortalMinimalPerf.default 186 174 1.07:1
RadioGroupMinimalPerf.default 529 494 1.07:1
FormMinimalPerf.default 466 445 1.05:1
ItemLayoutMinimalPerf.default 1371 1306 1.05:1
MenuMinimalPerf.default 963 921 1.05:1
TableMinimalPerf.default 492 468 1.05:1
ToolbarMinimalPerf.default 1140 1083 1.05:1
AnimationMinimalPerf.default 492 471 1.04:1
LabelMinimalPerf.default 433 418 1.04:1
LoaderMinimalPerf.default 756 728 1.04:1
ButtonOverridesMissPerf.default 1858 1804 1.03:1
ChatDuplicateMessagesPerf.default 330 321 1.03:1
HeaderSlotsPerf.default 873 851 1.03:1
InputMinimalPerf.default 1344 1309 1.03:1
RefMinimalPerf.default 247 239 1.03:1
SegmentMinimalPerf.default 388 378 1.03:1
IconMinimalPerf.default 747 728 1.03:1
AttachmentSlotsPerf.default 1181 1162 1.02:1
ButtonSlotsPerf.default 595 585 1.02:1
CardMinimalPerf.default 618 605 1.02:1
CheckboxMinimalPerf.default 2902 2859 1.02:1
HeaderMinimalPerf.default 412 405 1.02:1
TreeWith60ListItems.default 191 188 1.02:1
BoxMinimalPerf.default 380 375 1.01:1
ChatMinimalPerf.default 720 715 1.01:1
DialogMinimalPerf.default 832 825 1.01:1
DividerMinimalPerf.default 409 403 1.01:1
DropdownManyItemsPerf.default 780 774 1.01:1
DropdownMinimalPerf.default 3226 3201 1.01:1
ImageMinimalPerf.default 434 428 1.01:1
ListWith60ListItems.default 723 717 1.01:1
ReactionMinimalPerf.default 426 421 1.01:1
TableManyItemsPerf.default 2384 2363 1.01:1
TextMinimalPerf.default 413 410 1.01:1
ChatWithPopoverPerf.default 392 392 1:1
DatepickerMinimalPerf.default 5780 5804 1:1
ListNestedPerf.default 626 629 1:1
CustomToolbarPrototype.default 4294 4303 1:1
TreeMinimalPerf.default 908 906 1:1
CarouselMinimalPerf.default 499 504 0.99:1
EmbedMinimalPerf.default 4403 4428 0.99:1
LayoutMinimalPerf.default 414 417 0.99:1
ListCommonPerf.default 686 691 0.99:1
MenuButtonMinimalPerf.default 1712 1724 0.99:1
ProviderMergeThemesPerf.default 1695 1720 0.99:1
TooltipMinimalPerf.default 1136 1144 0.99:1
GridMinimalPerf.default 370 376 0.98:1
RosterPerf.default 1291 1315 0.98:1
PopupMinimalPerf.default 591 604 0.98:1
ProviderMinimalPerf.default 1055 1077 0.98:1
SliderMinimalPerf.default 1675 1711 0.98:1
SplitButtonMinimalPerf.default 4131 4261 0.97:1
VideoMinimalPerf.default 753 779 0.97:1
AccordionMinimalPerf.default 174 181 0.96:1
ListMinimalPerf.default 550 572 0.96:1
TextAreaMinimalPerf.default 600 633 0.95:1
StatusMinimalPerf.default 799 849 0.94:1

@layershifter layershifter merged commit f856f75 into master Jul 9, 2021
@layershifter layershifter deleted the chore/fix-bundlesize-pipeline branch July 9, 2021 10:06
@Hotell Hotell added this to the July Project Cycle Q2 2021 milestone Jul 13, 2021
PeterDraex pushed a commit to PeterDraex/fluentui that referenced this pull request Aug 6, 2021
@layershifter @PeterDraex
fix: update bundle-size call in pipeline (microsoft#18876)
409e77c
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

1 more reviewer

@ling1726 ling1726 ling1726 approved these changes

Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

Area: Build System

Projects

None yet

Milestone

July Project Cycle Q3 2021

Development

Successfully merging this pull request may close these issues.

5 participants

@layershifter @fabricteam @ling1726 @Hotell