search

microsoft / fluent-ui-react

An ecosystem for building highly customizable enterprise class user interfaces.
https://aka.ms/fluent-ui
MIT License
433 stars 54 forks source link

perf: disable "sanitize-css" for production #2340

Closed layershifter closed 4 years ago

layershifter commented 4 years ago

BREAKING CHANGES

This PR:

To keep previous behavior please force enable enableSanitizeCssPlugin setting:

<Provider performance={{ enableSanitizeCssPlugin: true }} />

See #65 for more details.

Performance 🏎

As this plugin is disabled for production we can get 3-5% (depends on styles complication) improvement with its removal.

image

Before

Example min avg median max
ChatWithPopover.perf.tsx 364.32 379.09 375.81 416.76
ChatWithPopover.perf.tsx 364.69 379.35 376.37 425.93
379.22

After

Example min avg median max
ChatWithPopover.perf.tsx 357.39 367.77 366.42 397.19
ChatWithPopover.perf.tsx 357.6 367.61 365.51 406.38
ChatWithPopover.perf.tsx 359.33 367.48 365.96 401.37
367.62
DustyTheBot commented 4 years ago
Warnings
:warning: 1 perf regressions detected

Perf comparison

Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🔧 Avatar.Fluent 0.53 0.51 1.04:1 2000 1064
🦄 Button.Fluent 0.12 0.19 0.63:1 1000 122
🔧 Checkbox.Fluent 0.83 0.29 2.86:1 1000 826
🔧 Dialog.Fluent 0.39 0.22 1.77:1 5000 1949
🔧 Dropdown.Fluent 4.32 0.51 8.47:1 1000 4322
🔧 Icon.Fluent 0.16 0.04 4:1 5000 810
🎯 Image.Fluent 0.05 0.07 0.71:1 5000 231
🔧 Slider.Fluent 1.88 0.36 5.22:1 1000 1875
🔧 Text.Fluent 0.07 0.03 2.33:1 5000 370
🦄 Tooltip.Fluent 0.1 19.52 0.01:1 5000 493

🔧 Needs work     🎯 On target     🦄 Amazing

Potential regressions comparing to master

Scenario Current PR Ticks Baseline Ticks Ratio
LoaderMinimalPerf.default 785 2479 0.32:1
Perf tests with no regressions Scenario | Current PR Ticks | Baseline Ticks | Ratio :--- | ---:| ---:| ---: HeaderSlotsPerf.default | [1610](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/HeaderSlotsPerf.default.html) | [1287](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/HeaderSlotsPerf.default_base.html) | 1.25:1 TreeWith60ListItems.default | [317](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/TreeWith60ListItems.default.html) | [255](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/TreeWith60ListItems.default_base.html) | 1.24:1 ListCommonPerf.default | [874](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/ListCommonPerf.default.html) | [733](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/ListCommonPerf.default_base.html) | 1.19:1 ToolbarMinimalPerf.default | [1026](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/ToolbarMinimalPerf.default.html) | [876](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/ToolbarMinimalPerf.default_base.html) | 1.17:1 RadioGroupMinimalPerf.default | [441](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/RadioGroupMinimalPerf.default.html) | [386](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/RadioGroupMinimalPerf.default_base.html) | 1.14:1 IconMinimalPerf.default | [312](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/IconMinimalPerf.default.html) | [277](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/IconMinimalPerf.default_base.html) | 1.13:1 Icon.Fluent | [810](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/Icon.Fluent.html) | [722](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/Icon.Fluent_base.html) | 1.12:1 ListWith60ListItems.default | [207](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/ListWith60ListItems.default.html) | [186](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/ListWith60ListItems.default_base.html) | 1.11:1 StatusMinimalPerf.default | [260](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/StatusMinimalPerf.default.html) | [242](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/StatusMinimalPerf.default_base.html) | 1.07:1 PortalMinimalPerf.default | [226](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/PortalMinimalPerf.default.html) | [215](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/PortalMinimalPerf.default_base.html) | 1.05:1 TreeMinimalPerf.default | [1060](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/TreeMinimalPerf.default.html) | [1012](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/TreeMinimalPerf.default_base.html) | 1.05:1 ChatDuplicateMessagesPerf.default | [356](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/ChatDuplicateMessagesPerf.default.html) | [341](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/ChatDuplicateMessagesPerf.default_base.html) | 1.04:1 HierarchicalTreeMinimalPerf.default | [796](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/HierarchicalTreeMinimalPerf.default.html) | [768](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/HierarchicalTreeMinimalPerf.default_base.html) | 1.04:1 ChatMinimalPerf.default | [410](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/ChatMinimalPerf.default.html) | [398](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/ChatMinimalPerf.default_base.html) | 1.03:1 LabelMinimalPerf.default | [808](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/LabelMinimalPerf.default.html) | [782](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/LabelMinimalPerf.default_base.html) | 1.03:1 Tooltip.Fluent | [493](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/Tooltip.Fluent.html) | [479](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/Tooltip.Fluent_base.html) | 1.03:1 ProviderMergeThemesPerf.default | [1070](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/ProviderMergeThemesPerf.default.html) | [1046](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/ProviderMergeThemesPerf.default_base.html) | 1.02:1 BoxMinimalPerf.default | [233](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/BoxMinimalPerf.default.html) | [231](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/BoxMinimalPerf.default_base.html) | 1.01:1 ButtonMinimalPerf.default | [120](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/ButtonMinimalPerf.default.html) | [119](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/ButtonMinimalPerf.default_base.html) | 1.01:1 HeaderMinimalPerf.default | [430](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/HeaderMinimalPerf.default.html) | [426](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/HeaderMinimalPerf.default_base.html) | 1.01:1 CustomToolbarPrototype.default | [3790](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/CustomToolbarPrototype.default.html) | [3766](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/CustomToolbarPrototype.default_base.html) | 1.01:1 Avatar.Fluent | [1064](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/Avatar.Fluent.html) | [1049](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/Avatar.Fluent_base.html) | 1.01:1 Slider.Fluent | [1875](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/Slider.Fluent.html) | [1849](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/Slider.Fluent_base.html) | 1.01:1 DividerMinimalPerf.default | [833](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/DividerMinimalPerf.default.html) | [835](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/DividerMinimalPerf.default_base.html) | 1:1 ListMinimalPerf.default | [309](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/ListMinimalPerf.default.html) | [308](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/ListMinimalPerf.default_base.html) | 1:1 CarouselMinimalPerf.default | [1837](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/CarouselMinimalPerf.default.html) | [1853](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/CarouselMinimalPerf.default_base.html) | 0.99:1 FlexMinimalPerf.default | [342](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/FlexMinimalPerf.default.html) | [347](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/FlexMinimalPerf.default_base.html) | 0.99:1 MenuButtonMinimalPerf.default | [1609](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/MenuButtonMinimalPerf.default.html) | [1624](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/MenuButtonMinimalPerf.default_base.html) | 0.99:1 PopupMinimalPerf.default | [302](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/PopupMinimalPerf.default.html) | [304](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/PopupMinimalPerf.default_base.html) | 0.99:1 SplitButtonMinimalPerf.default | [13201](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/SplitButtonMinimalPerf.default.html) | [13379](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/SplitButtonMinimalPerf.default_base.html) | 0.99:1 AttachmentMinimalPerf.default | [901](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/AttachmentMinimalPerf.default.html) | [916](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/AttachmentMinimalPerf.default_base.html) | 0.98:1 ImageMinimalPerf.default | [220](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/ImageMinimalPerf.default.html) | [225](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/ImageMinimalPerf.default_base.html) | 0.98:1 RefMinimalPerf.default | [158](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/RefMinimalPerf.default.html) | [161](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/RefMinimalPerf.default_base.html) | 0.98:1 TableMinimalPerf.default | [562](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/TableMinimalPerf.default.html) | [573](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/TableMinimalPerf.default_base.html) | 0.98:1 TextAreaMinimalPerf.default | [2923](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/TextAreaMinimalPerf.default.html) | [2977](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/TextAreaMinimalPerf.default_base.html) | 0.98:1 ButtonSlotsPerf.default | [543](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/ButtonSlotsPerf.default.html) | [559](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/ButtonSlotsPerf.default_base.html) | 0.97:1 FormMinimalPerf.default | [692](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/FormMinimalPerf.default.html) | [713](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/FormMinimalPerf.default_base.html) | 0.97:1 GridMinimalPerf.default | [816](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/GridMinimalPerf.default.html) | [840](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/GridMinimalPerf.default_base.html) | 0.97:1 InputMinimalPerf.default | [913](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/InputMinimalPerf.default.html) | [946](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/InputMinimalPerf.default_base.html) | 0.97:1 Dropdown.Fluent | [4322](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/Dropdown.Fluent.html) | [4461](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/Dropdown.Fluent_base.html) | 0.97:1 DropdownManyItemsPerf.default | [380](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/DropdownManyItemsPerf.default.html) | [396](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/DropdownManyItemsPerf.default_base.html) | 0.96:1 AttachmentSlotsPerf.default | [3040](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/AttachmentSlotsPerf.default.html) | [3216](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/AttachmentSlotsPerf.default_base.html) | 0.95:1 Text.Fluent | [370](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/Text.Fluent.html) | [391](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/Text.Fluent_base.html) | 0.95:1 AlertMinimalPerf.default | [526](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/AlertMinimalPerf.default.html) | [558](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/AlertMinimalPerf.default_base.html) | 0.94:1 AnimationMinimalPerf.default | [454](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/AnimationMinimalPerf.default.html) | [482](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/AnimationMinimalPerf.default_base.html) | 0.94:1 AvatarMinimalPerf.default | [475](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/AvatarMinimalPerf.default.html) | [504](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/AvatarMinimalPerf.default_base.html) | 0.94:1 ChatWithPopoverPerf.default | [488](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/ChatWithPopoverPerf.default.html) | [518](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/ChatWithPopoverPerf.default_base.html) | 0.94:1 CheckboxMinimalPerf.default | [3345](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/CheckboxMinimalPerf.default.html) | [3576](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/CheckboxMinimalPerf.default_base.html) | 0.94:1 DropdownMinimalPerf.default | [3118](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/DropdownMinimalPerf.default.html) | [3330](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/DropdownMinimalPerf.default_base.html) | 0.94:1 MenuMinimalPerf.default | [1792](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/MenuMinimalPerf.default.html) | [1912](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/MenuMinimalPerf.default_base.html) | 0.94:1 AccordionMinimalPerf.default | [176](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/AccordionMinimalPerf.default.html) | [189](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/AccordionMinimalPerf.default_base.html) | 0.93:1 ProviderMinimalPerf.default | [558](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/ProviderMinimalPerf.default.html) | [600](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/ProviderMinimalPerf.default_base.html) | 0.93:1 ReactionMinimalPerf.default | [2221](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/ReactionMinimalPerf.default.html) | [2378](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/ReactionMinimalPerf.default_base.html) | 0.93:1 TextMinimalPerf.default | [254](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/TextMinimalPerf.default.html) | [273](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/TextMinimalPerf.default_base.html) | 0.93:1 DialogMinimalPerf.default | [1441](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/DialogMinimalPerf.default.html) | [1570](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/DialogMinimalPerf.default_base.html) | 0.92:1 EmbedMinimalPerf.default | [5772](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/EmbedMinimalPerf.default.html) | [6259](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/EmbedMinimalPerf.default_base.html) | 0.92:1 ItemLayoutMinimalPerf.default | [1578](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/ItemLayoutMinimalPerf.default.html) | [1719](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/ItemLayoutMinimalPerf.default_base.html) | 0.92:1 Image.Fluent | [231](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/Image.Fluent.html) | [252](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/Image.Fluent_base.html) | 0.92:1 LayoutMinimalPerf.default | [481](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/LayoutMinimalPerf.default.html) | [527](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/LayoutMinimalPerf.default_base.html) | 0.91:1 SliderMinimalPerf.default | [1377](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/SliderMinimalPerf.default.html) | [1510](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/SliderMinimalPerf.default_base.html) | 0.91:1 ListNestedPerf.default | [674](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/ListNestedPerf.default.html) | [750](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/ListNestedPerf.default_base.html) | 0.9:1 SegmentMinimalPerf.default | [1123](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/SegmentMinimalPerf.default.html) | [1272](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/SegmentMinimalPerf.default_base.html) | 0.88:1 VideoMinimalPerf.default | [780](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/VideoMinimalPerf.default.html) | [929](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/VideoMinimalPerf.default_base.html) | 0.84:1 Dialog.Fluent | [1949](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/Dialog.Fluent.html) | [2353](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/Dialog.Fluent_base.html) | 0.83:1 TooltipMinimalPerf.default | [673](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/TooltipMinimalPerf.default.html) | [861](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/TooltipMinimalPerf.default_base.html) | 0.78:1 Checkbox.Fluent | [826](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/Checkbox.Fluent.html) | [1109](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/Checkbox.Fluent_base.html) | 0.74:1 Button.Fluent | [122](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/Button.Fluent.html) | [175](https://23194-141743704-gh.circle-artifacts.com/0/artifacts/perf/Button.Fluent_base.html) | 0.7:1

Generated by :no_entry_sign: dangerJS