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: update Webpack to latest #18919

Merged
merged 3 commits into from
Jul 14, 2021
Merged

chore: update Webpack to latest #18919

merged 3 commits into from
Jul 14, 2021

Conversation

layershifter
Copy link
Member

Pull request checklist

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

Description of changes

This PR bumps Webpack to latest across monorepo, this is a blocker for #18918. Without this we will not have type-safety for Webpack's API.

References

@@ -19,8 +19,7 @@
},
"dependencies": {
"just-scripts": "1.3.1",
"querystring": "^0.2.0",
"webpack": "5.21.2"
Copy link
Member Author

Choose a reason for hiding this comment

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

This looks redundant as we have the same version on root...

Copy link
Member

Choose a reason for hiding this comment

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

It might be there because digest was intended to be published at some point? Though looks like it's not published now, so agreed it's not needed.

@DustyTheBot
Copy link

DustyTheBot commented Jul 13, 2021

Warnings
⚠️ There are no updates provided to CHANGELOG. Ensure there are no publicly visible changes introduced by this PR.

Generated by 🚫 dangerJS against 154c569

@size-auditor
Copy link

size-auditor bot commented Jul 13, 2021

Asset size changes

⚠️ Insufficient baseline data to detect size changes

Unable to find bundle size details for Baseline commit: a84e635

Possible causes

  • The baseline build a84e635 is broken
  • The Size Auditor run for the baseline build a84e635 was not triggered

Recommendations

  • Please merge your branch for this Pull request with the latest master build and commit your changes once again

@codesandbox-ci
Copy link

codesandbox-ci bot commented Jul 13, 2021

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 154c569:

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

@fabricteam
Copy link
Collaborator

fabricteam commented Jul 13, 2021

Perf Analysis (@fluentui/react)

Scenario Render type Master Ticks PR Ticks Iterations Status
Panel mount 1994 1308 1000 Possible regression
All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 743 779 5000
BaseButton mount 890 832 5000
Breadcrumb mount 2503 2492 1000
ButtonNext mount 485 503 5000
Checkbox mount 1453 1423 5000
CheckboxBase mount 1222 1248 5000
ChoiceGroup mount 4554 4477 5000
ComboBox mount 926 934 1000
CommandBar mount 9776 9659 1000
ContextualMenu mount 5978 6002 1000
DefaultButton mount 1087 1077 5000
DetailsRow mount 3551 3528 5000
DetailsRowFast mount 3500 3551 5000
DetailsRowNoStyles mount 3355 3402 5000
Dialog mount 2070 2060 1000
DocumentCardTitle mount 137 141 1000
Dropdown mount 3065 3123 5000
FluentProviderNext mount 7014 7059 5000
FocusTrapZone mount 1663 1722 5000
FocusZone mount 1705 1694 5000
IconButton mount 1666 1668 5000
Label mount 325 323 5000
Layer mount 1710 1684 5000
Link mount 441 431 5000
MakeStyles mount 1746 1758 50000
MenuButton mount 1412 1369 5000
MessageBar mount 1931 1957 5000
Nav mount 3177 3157 1000
OverflowSet mount 976 988 5000
Panel mount 1994 1308 1000 Possible regression
Persona mount 788 789 1000
Pivot mount 1323 1363 1000
PrimaryButton mount 1197 1256 5000
Rating mount 7316 7346 5000
SearchBox mount 1263 1231 5000
Shimmer mount 2425 2366 5000
Slider mount 1876 1900 5000
SpinButton mount 4783 4808 5000
Spinner mount 395 413 5000
SplitButton mount 3036 2986 5000
Stack mount 466 467 5000
StackWithIntrinsicChildren mount 1422 1463 5000
StackWithTextChildren mount 4288 4311 5000
SwatchColorPicker mount 9772 9740 5000
Tabs mount 1355 1343 1000
TagPicker mount 2277 2322 5000
TeachingBubble mount 11523 11394 5000
Text mount 402 412 5000
TextField mount 1314 1375 5000
ThemeProvider mount 1143 1144 5000
ThemeProvider virtual-rerender 574 574 5000
Toggle mount 766 783 5000
buttonNative mount 110 120 5000

Perf Analysis (@fluentui/react-northstar)

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
AvatarMinimalPerf.default 190 175 1.09:1
ButtonSlotsPerf.default 542 509 1.06:1
VideoMinimalPerf.default 620 587 1.06:1
ListCommonPerf.default 599 573 1.05:1
GridMinimalPerf.default 331 317 1.04:1
AttachmentMinimalPerf.default 148 143 1.03:1
ChatMinimalPerf.default 624 606 1.03:1
DropdownManyItemsPerf.default 652 635 1.03:1
FormMinimalPerf.default 385 375 1.03:1
ListWith60ListItems.default 616 599 1.03:1
TableManyItemsPerf.default 1868 1805 1.03:1
LoaderMinimalPerf.default 660 645 1.02:1
ReactionMinimalPerf.default 351 343 1.02:1
SegmentMinimalPerf.default 348 340 1.02:1
StatusMinimalPerf.default 656 645 1.02:1
IconMinimalPerf.default 605 591 1.02:1
TableMinimalPerf.default 383 375 1.02:1
TooltipMinimalPerf.default 961 940 1.02:1
TreeWith60ListItems.default 164 160 1.02:1
AnimationMinimalPerf.default 382 380 1.01:1
AttachmentSlotsPerf.default 1020 1013 1.01:1
ButtonMinimalPerf.default 164 163 1.01:1
CarouselMinimalPerf.default 442 439 1.01:1
DropdownMinimalPerf.default 3011 2996 1.01:1
FlexMinimalPerf.default 261 259 1.01:1
ItemLayoutMinimalPerf.default 1154 1138 1.01:1
LabelMinimalPerf.default 366 363 1.01:1
ListNestedPerf.default 524 520 1.01:1
MenuButtonMinimalPerf.default 1572 1560 1.01:1
PopupMinimalPerf.default 574 569 1.01:1
SliderMinimalPerf.default 1507 1492 1.01:1
ButtonOverridesMissPerf.default 1614 1613 1:1
CardMinimalPerf.default 509 511 1:1
ChatWithPopoverPerf.default 342 341 1:1
HeaderMinimalPerf.default 348 349 1:1
HeaderSlotsPerf.default 719 722 1:1
SkeletonMinimalPerf.default 339 338 1:1
TextMinimalPerf.default 325 324 1:1
CustomToolbarPrototype.default 3661 3679 1:1
ToolbarMinimalPerf.default 890 893 1:1
CheckboxMinimalPerf.default 2653 2672 0.99:1
DatepickerMinimalPerf.default 5165 5216 0.99:1
EmbedMinimalPerf.default 3935 3959 0.99:1
InputMinimalPerf.default 1197 1209 0.99:1
MenuMinimalPerf.default 810 816 0.99:1
ProviderMinimalPerf.default 935 944 0.99:1
RefMinimalPerf.default 225 227 0.99:1
SplitButtonMinimalPerf.default 3628 3650 0.99:1
TreeMinimalPerf.default 744 751 0.99:1
DialogMinimalPerf.default 712 725 0.98:1
ProviderMergeThemesPerf.default 1597 1630 0.98:1
AccordionMinimalPerf.default 138 142 0.97:1
DividerMinimalPerf.default 333 344 0.97:1
ListMinimalPerf.default 476 492 0.97:1
PortalMinimalPerf.default 165 170 0.97:1
ImageMinimalPerf.default 347 361 0.96:1
LayoutMinimalPerf.default 340 355 0.96:1
RadioGroupMinimalPerf.default 418 437 0.96:1
TextAreaMinimalPerf.default 469 488 0.96:1
ChatDuplicateMessagesPerf.default 267 280 0.95:1
AlertMinimalPerf.default 241 257 0.94:1
RosterPerf.default 1098 1174 0.94:1
BoxMinimalPerf.default 306 330 0.93:1

@@ -40,7 +40,7 @@ const webpackConfig: webpack.Configuration = {
],
},
plugins: [
new webpack.DefinePlugin(getDefaultEnvironmentVars()),
new webpack.DefinePlugin(getDefaultEnvironmentVars(true)),
Copy link
Member Author

Choose a reason for hiding this comment

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

As we run this build only in production this override is required, otherwise it's causing:

verb @fluentui/e2e test |  WARNING in DefinePlugin
verb @fluentui/e2e test |  Conflicting values for 'process.env.NODE_ENV'
verb @fluentui/e2e test |  '"development"' !== '"production"'
verb @fluentui/e2e test | 

yarn.lock Outdated
@@ -25259,6 +25295,18 @@ terser-webpack-plugin@^3.0.0:
terser "^4.8.0"
webpack-sources "^1.4.3"

terser-webpack-plugin@^5.1.3:
Copy link
Member

Choose a reason for hiding this comment

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

Looks like you need to update our specified version of terser-webpack-plugin at the root to 5.1.3 as well.

Copy link
Member Author

Choose a reason for hiding this comment

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

I deduped terser, terser-webpack-plugin, acorn & enhanced-resolve 👍

yarn.lock Outdated
@@ -25277,6 +25325,15 @@ terser@^4.1.2, terser@^4.3.9, terser@^4.6.12, terser@^4.6.2, terser@^4.6.3, ters
source-map "~0.6.1"
source-map-support "~0.5.12"

terser@^5.7.0:
Copy link
Member

Choose a reason for hiding this comment

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

Similar, you should update our version of terser to 5.7.1

Copy link
Member

@ecraig12345 ecraig12345 left a comment

Choose a reason for hiding this comment

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

LGTM once terser and terser-webpack-plugin duplicate issues are addressed. (Kind of surprised the upgrade appears to be so easy this time!)

One more thing to check: about 2 hours after this is merged and published (CDN cache expiration), please take a look at https://developer.microsoft.com/en-us/fluentui and verify it's still rendering properly. We've occasionally seen webpack issues only show up on the production version of the website.

@layershifter
Copy link
Member Author

LGTM once terser and terser-webpack-plugin duplicate issues are addressed. (Kind of surprised the upgrade appears to be so easy this time!)

I would expect it, it's a minor bump 😅

@ecraig12345
Copy link
Member

LGTM once terser and terser-webpack-plugin duplicate issues are addressed. (Kind of surprised the upgrade appears to be so easy this time!)

I would expect it, it's a minor bump 😅

I've seen even minor bumps of webpack be rather nightmarish sometimes. Or sometimes they seem to be fine and then cause extremely hard-to-debug issues in production builds only...hence the request to check the website. 😬

@layershifter layershifter merged commit 96ee2ca into master Jul 14, 2021
@layershifter layershifter deleted the chore/update-webpack branch July 14, 2021 10:05
@Hotell Hotell added this to the July Project Cycle Q2 2021 milestone Jul 14, 2021
@layershifter
Copy link
Member Author

@ecraig12345 website still loads 😅

@ecraig12345
Copy link
Member

@layershifter Great, thanks for checking! :)

PeterDraex pushed a commit to PeterDraex/fluentui that referenced this pull request Aug 6, 2021
* chore: update Webpack to latest

* tweak env variable

* dedupe terser, terser-webpack-plugin, acorn & enhanced-resolve
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.

6 participants