Fix CSS duplication from the Help Center chunk

[alshakero]

In one of the least intuitive issues I faced probably ever, it seems importing the Help Center asynchronously in Stepper broke things in the client app. Yes, the act of importing a package, that also happens to be imported in another app, can hurt this other app.

The reason, explained by @jsnajdr, is that Webpack considers both importers and then decides how standalone the chunk can be. If a chunk depends on A, B, C, D libs, imported into an app that has A, B, C, it only needs to bundle D and its own code. But if you then import that chunk into another app, that only has A in it, the chunk will have to include B, C, and D. The issue is that the chunk is shared between both apps. Forcing the bigger app to have two copies of A, B, C. This is especially problematic with CSS. As the copies mess up the specificity because the second copy acts like a reset for all the customizations the app added over the library, and reverts the elements to their default styles in the library

Proposed Changes

• Add a fake query param to the Help Center import to make two separate chunks for the Help Center. One meant for Stepper, which can be larger without involving others. And one for the main client app that can be leaner.

Why are these changes being made?

To prevent CSS issues.

Testing Instructions

0. This PR has to be tested in Fix Stepper performance bug - Take II #97451.

[github-actions]

Calypso Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-127601

Jetpack Cloud live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-127601&env=jetpack

Automattic for Agencies live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-127601&env=a8c-for-agencies

[matticbot]

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

App Entrypoints (~847 bytes added 📈 [gzipped])

name                   parsed_size           gzip_size
entry-stepper              +5030 B  (+0.2%)     +832 B  (+0.1%)
entry-main                 +4921 B  (+0.2%)     +820 B  (+0.1%)
entry-subscriptions        +1974 B  (+0.1%)     +587 B  (+0.1%)
entry-login                +1871 B  (+0.1%)     +571 B  (+0.1%)
entry-domains-landing      +1871 B  (+0.3%)     +572 B  (+0.3%)
entry-browsehappy          +1871 B  (+0.9%)     +572 B  (+0.9%)

Common code that is always downloaded and parsed every time the app is loaded, no matter which route is used.

Sections (~107773 bytes added 📈 [gzipped])

name                             parsed_size           gzip_size
a8c-for-agencies-client               +975 B  (+0.1%)     +479 B  (+0.1%)
site-performance                      +803 B  (+0.1%)     -612 B  (-0.1%)
staging-site                          +753 B  (+0.0%)     +519 B  (+0.1%)
site-monitoring                       +649 B  (+0.0%)     +129 B  (+0.0%)
site-logs                             +648 B  (+0.0%)     +215 B  (+0.1%)
site-marketing                        +599 B  (+0.0%)     +758 B  (+0.2%)
site-tools                            +391 B  (+0.0%)     +655 B  (+0.1%)
site-settings                         +391 B  (+0.0%)     +515 B  (+0.1%)
stats                                 -384 B  (-0.0%)    +1100 B  (+0.3%)
people                                +375 B  (+0.1%)     +685 B  (+0.4%)
sites-dashboard                       +327 B  (+0.0%)     +561 B  (+0.2%)
hosting-features                      +326 B  (+0.0%)     +567 B  (+0.2%)
a8c-for-agencies-referrals            +312 B  (+0.0%)     +852 B  (+0.3%)
a8c-for-agencies-overview             +312 B  (+0.0%)     +755 B  (+0.3%)
a8c-for-agencies-migrations           +312 B  (+0.0%)     +852 B  (+0.3%)
domains                               +260 B  (+0.0%)    +1042 B  (+0.2%)
woocommerce                           +216 B  (+0.1%)      +36 B  (+0.0%)
github-deployments                    +210 B  (+0.0%)     +630 B  (+0.2%)
reader                                +209 B  (+0.0%)     +629 B  (+0.1%)
plugins                               +209 B  (+0.0%)     +616 B  (+0.1%)
jetpack-cloud-plugin-management       +209 B  (+0.0%)     +616 B  (+0.1%)
with-theme-assembler-flow             -208 B  (-0.3%)       -7 B  (-0.1%)
update-options-flow                   -208 B  (-0.4%)       -6 B  (-0.1%)
update-design-flow                    -208 B  (-0.0%)       -9 B  (-0.0%)
trial-wooexpress-flow                 -208 B  (-0.3%)       -6 B  (-0.1%)
tailored-ecommerce-flow               -208 B  (-0.3%)       -3 B  (-0.0%)
site-setup-wg                         -208 B  (-0.2%)       -7 B  (-0.0%)
site-setup-flow                       -208 B  (-0.2%)       -7 B  (-0.0%)
site-migration-flow                   -208 B  (-0.2%)       -6 B  (-0.0%)
readymade-template-flow               -208 B  (-0.1%)       -6 B  (-0.0%)
onboarding-flow                       -208 B  (-0.3%)       -1 B  (-0.0%)
migration-signup                      -208 B  (-0.3%)       -6 B  (-0.1%)
migration-flow                        -208 B  (-0.3%)       -6 B  (-0.0%)
import-flow                           -208 B  (-0.3%)       -6 B  (-0.1%)
hosted-site-migration-flow            -208 B  (-0.2%)       -6 B  (-0.0%)
free-post-setup-flow                  -208 B  (-0.4%)       -4 B  (-0.1%)
entrepreneur-flow                     -208 B  (-0.2%)       -9 B  (-0.0%)
assembler-first-flow                  -208 B  (-0.2%)       -5 B  (-0.0%)
ai-assembler-flow                     -208 B  (-0.2%)       -4 B  (-0.0%)
site-purchases                        +207 B  (+0.0%)     -514 B  (-0.1%)
settings-security                     +207 B  (+0.0%)     +198 B  (+0.1%)
site-profiler                         +206 B  (+0.1%)      +25 B  (+0.0%)
marketing                             -206 B  (-0.0%)     +428 B  (+0.2%)
a8c-for-agencies-settings             +206 B  (+0.1%)      +22 B  (+0.0%)
a8c-for-agencies-plugins              +206 B  (+0.1%)      +22 B  (+0.0%)
a8c-for-agencies-landing              +206 B  (+0.1%)      +22 B  (+0.1%)
a8c-for-agencies-agency-tier          +206 B  (+0.1%)      +22 B  (+0.0%)
write-flow                            +196 B  (+0.0%)     +446 B  (+0.2%)
jetpack-connect                       +196 B  (+0.0%)     +701 B  (+0.2%)
checkout                              -196 B  (-0.0%)    -1061 B  (-0.2%)
build-flow                            +196 B  (+0.0%)     +446 B  (+0.2%)
backup                                -196 B  (-0.0%)     -940 B  (-0.3%)
activity                              -196 B  (-0.0%)    -1040 B  (-0.5%)
jetpack-cloud-settings                -190 B  (-0.0%)     +105 B  (+0.1%)
promote-post-i2                       +183 B  (+0.0%)     +906 B  (+0.4%)
pages                                 +183 B  (+0.0%)      +95 B  (+0.1%)
settings-jetpack                      +168 B  (+0.0%)      -35 B  (-0.0%)
patterns                              +168 B  (+0.0%)      -64 B  (-0.0%)
link-in-bio-tld-flow                  +168 B  (+0.0%)      -33 B  (-0.0%)
purchases                             +156 B  (+0.0%)      -56 B  (-0.0%)
import                                +144 B  (+0.0%)    -1254 B  (-0.5%)
settings-discussion                   +142 B  (+0.0%)     +356 B  (+0.3%)
plans                                 +142 B  (+0.0%)     -395 B  (-0.1%)
site-overview                         +130 B  (+0.0%)     -956 B  (-0.2%)
hosting                               +130 B  (+0.0%)     -115 B  (-0.0%)
a8c-for-agencies-team                 +116 B  (+0.0%)     +419 B  (+0.2%)
start-writing-flow                    +108 B  (+0.4%)      +21 B  (+0.4%)
newsletter-flow                       +108 B  (+0.5%)      +22 B  (+0.4%)
design-first-flow                     +108 B  (+0.4%)      +18 B  (+0.3%)
security                              +103 B  (+0.0%)      +12 B  (+0.0%)
jetpack-social                        +103 B  (+0.0%)       +8 B  (+0.0%)
jetpack-cloud-partner-portal          +103 B  (+0.0%)      +13 B  (+0.0%)
jetpack-cloud-overview                +103 B  (+0.0%)      +13 B  (+0.0%)
import-hosted-site-flow               +103 B  (+0.0%)    +1419 B  (+0.6%)
earn                                  -103 B  (-0.0%)     -382 B  (-0.2%)
comments                              +103 B  (+0.0%)      +23 B  (+0.0%)
account                               +103 B  (+0.0%)      +12 B  (+0.0%)
a8c-for-agencies-purchases            +103 B  (+0.0%)      +14 B  (+0.0%)
a8c-for-agencies-marketplace          +103 B  (+0.0%)      +13 B  (+0.0%)
home                                   +83 B  (+0.0%)     +383 B  (+0.1%)
subscribers                            -70 B  (-0.0%)     -107 B  (-0.0%)
settings-reading                       -40 B  (-0.0%)     +328 B  (+0.3%)
themes                                 +39 B  (+0.0%)      -14 B  (-0.0%)
gutenberg-editor                       +39 B  (+0.0%)      +41 B  (+0.0%)
settings-writing                       +26 B  (+0.0%)     +222 B  (+0.1%)
settings-newsletter                    +26 B  (+0.0%)     +228 B  (+0.1%)
marketplace                            -26 B  (-0.0%)      +81 B  (+0.0%)
devdocs                                +20 B  (+0.0%)      +12 B  (+0.0%)
settings                               -18 B  (-0.0%)     +720 B  (+0.2%)
switch-site                            +13 B  (+0.0%)       -2 B  (-0.0%)
settings-podcast                       -13 B  (-0.0%)     +346 B  (+0.2%)
jetpack-cloud-agency-sites-v2          +13 B  (+0.0%)     -318 B  (-0.1%)
a8c-for-agencies-sites                 +13 B  (+0.0%)     -276 B  (-0.0%)

Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to.

Async-loaded Components (~3798 bytes added 📈 [gzipped])

name                                                                         parsed_size           gzip_size
async-load-automattic-help-center-v-2                                          +611432 B    (new)  +182121 B    (new)
async-load-automattic-help-center                                               +12048 B  (+1.9%)     +285 B  (+0.1%)
async-load-design                                                                 -597 B  (-0.0%)     +141 B  (+0.0%)
async-load-publish                                                                +246 B  (+2.6%)      +41 B  (+1.2%)
async-load-calypso-layout-popup-search                                            -196 B  (-1.2%)     -392 B  (-7.6%)
async-load-calypso-layout-masterbar-drafts-popover                                +196 B  (+0.6%)     +626 B  (+6.5%)
async-load-calypso-blocks-support-article-dialog-dialog                           -196 B  (-0.2%)     -554 B  (-1.9%)
async-load-design-wordpress-components-gallery                                    +181 B  (+0.0%)     -121 B  (-0.1%)
async-load-comment-block-editor                                                   +168 B  (+0.0%)      -64 B  (-0.0%)
async-load-automattic-global-styles-src-components-global-styles-variations       +168 B  (+0.0%)      -61 B  (-0.0%)
async-load-automattic-design-preview                                              +168 B  (+0.0%)      -62 B  (-0.0%)
async-load-calypso-blocks-support-article-dialog                                  -108 B  (-5.6%)      -55 B  (-6.3%)
async-load-design-blocks                                                           +30 B  (+0.0%)     -381 B  (-0.1%)
async-load-design-playground                                                       +26 B  (+0.0%)     +242 B  (+0.1%)
async-load-store-app-store-stats-listview                                          +13 B  (+0.0%)      -16 B  (-0.0%)
async-load-calypso-layout-command-palette                                          +13 B  (+0.0%)       -2 B  (-0.0%)

React components that are loaded lazily, when a certain part of UI is displayed for the first time.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

[matticbot]

This PR modifies the release build for the following Calypso Apps:

For info about this notification, see here: PCYsg-OT6-p2

• notifications
• wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug fix/help-center-dupe-css on your sandbox.