Load middleware async

[unDemian]

Changes proposed in this Pull Request

We are adding redux-dyamic-middlewares package, which would allow us to have a very light "placeholder" like middleware which can be used to add/remove middlewares based on our needs, in this case we would want to only load the lasagna middleware if the reader section is loaded.

More context #40396

Testing instructions

• ICFY should only add about 500B (which would result in removing about 11KB that were added with the lasagna middleware) to the main entry point, that would be the 3rd party dependency that allows us to lazy load middlewares
• Enable localStorage.debug="lasagna:*"
• Go to reader -> in console we should see lasagna logs about connecting to the socket
• Realtime comments should still work in full post view

Fixes https://github.com/Automattic/wp-for-teams/issues/90

[matticbot]

Test live: https://calypso.live/?branch=try/realtime-comments-async

[matticbot]

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

Webpack Runtime (~238 bytes added 📈 [gzipped])

name      parsed_size           gzip_size
manifest      +1352 B  (+0.8%)     +238 B  (+0.7%)

Webpack runtime for loading modules. It is included in the HTML page as an inline script. Is downloaded and parsed every time the app is loaded.

App Entrypoints (~13098 bytes removed 📉 [gzipped])

name                   parsed_size           gzip_size
entry-main                -52666 B  (-3.5%)   -12457 B  (-3.3%)
entry-gutenboarding          +49 B  (+0.0%)     -632 B  (-0.1%)
entry-domains-landing        -40 B  (-0.0%)       -9 B  (-0.0%)

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

Sections (~32993 bytes added 📈 [gzipped])

name                    parsed_size            gzip_size
reader                     +53115 B  (+12.7%)   +13114 B  (+12.0%)
comments                   +26759 B   (+5.6%)    +6855 B   (+6.2%)
site-blocks                +25948 B  (+10.1%)    +6658 B   (+9.8%)
gutenberg-editor            +3892 B   (+0.5%)     +493 B   (+0.2%)
checkout                    +3725 B   (+0.3%)     +334 B   (+0.1%)
lasagnaMiddleware           +3475 B     (new)    +1235 B     (new)
stats                       +2681 B   (+0.3%)     -120 B   (-0.1%)
post-editor                 +1870 B   (+0.1%)     +486 B   (+0.1%)
media                       +1740 B   (+0.5%)     +333 B   (+0.4%)
activity                    +1662 B   (+0.4%)     -360 B   (-0.3%)
woocommerce                 +1566 B   (+0.1%)     +326 B   (+0.1%)
pages                       +1517 B   (+0.7%)     +315 B   (+0.5%)
plugins                     +1465 B   (+0.4%)     +336 B   (+0.3%)
help                        +1221 B   (+0.3%)     -270 B   (-0.2%)
posts-custom                +1217 B   (+0.4%)     +272 B   (+0.3%)
posts                       +1217 B   (+0.4%)     +272 B   (+0.3%)
themes                      +1150 B   (+0.4%)     +240 B   (+0.3%)
theme                       +1150 B   (+0.5%)     +240 B   (+0.4%)
settings-security           +1150 B   (+0.5%)     +231 B   (+0.4%)
settings-performance        +1150 B   (+0.5%)     +245 B   (+0.4%)
purchases                   +1113 B   (+0.1%)     +193 B   (+0.1%)
marketing                   +1113 B   (+0.3%)     +218 B   (+0.2%)
zoninator                   +1050 B   (+0.4%)     +250 B   (+0.3%)
domains                     +1030 B   (+0.1%)     -475 B   (-0.2%)
jetpack-connect              +980 B   (+0.2%)     +139 B   (+0.1%)
settings                     +954 B   (+0.2%)     +230 B   (+0.2%)
plans                        +943 B   (+0.2%)     +113 B   (+0.1%)
account                      +850 B   (+0.3%)     +203 B   (+0.2%)
earn                         +831 B   (+0.3%)     +162 B   (+0.2%)
hosting                      +813 B   (+0.4%)     +153 B   (+0.3%)
home                         +750 B   (+0.3%)     +178 B   (+0.3%)
scan                         +646 B   (+0.3%)     +166 B   (+0.3%)
people                       +646 B   (+0.2%)     +144 B   (+0.2%)
export                       +646 B   (+0.4%)     +127 B   (+0.2%)
customize                    +646 B   (+0.4%)     +116 B   (+0.3%)
backups                      +646 B   (+0.2%)     +116 B   (+0.1%)
settings-writing             +617 B   (+0.1%)     +142 B   (+0.1%)
email                        +526 B   (+0.2%)     -682 B   (-0.9%)
notification-settings        +504 B   (+0.2%)     +122 B   (+0.1%)
sites                        +346 B   (+0.5%)      +66 B   (+0.3%)
settings-discussion          +346 B   (+0.2%)      +55 B   (+0.1%)
sensei                       +346 B   (+0.4%)      +65 B   (+0.3%)
preview                      +346 B   (+0.5%)      +65 B   (+0.3%)
migrate                      +346 B   (+0.3%)      +60 B   (+0.2%)
jetpack-cloud-settings       +346 B   (+0.3%)      +65 B   (+0.2%)
import                       +346 B   (+0.2%)      +66 B   (+0.1%)
hello-dolly                  +346 B   (+0.4%)      +62 B   (+0.2%)
google-my-business           +346 B   (+0.1%)      +59 B   (+0.1%)
feature-upsell               +346 B   (+0.3%)      +63 B   (+0.2%)
wp-super-cache               +309 B   (+0.1%)      +35 B   (+0.1%)
signup                       +300 B   (+0.2%)      +62 B   (+0.1%)
account-close                +300 B   (+0.1%)      +90 B   (+0.1%)
accept-invite                +300 B   (+0.1%)      +63 B   (+0.1%)
concierge                    +233 B   (+0.1%)     -715 B   (-1.0%)
devdocs                       -65 B   (-0.0%)       +5 B   (+0.0%)
security                      -37 B   (-0.0%)      -23 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 (~39491 bytes added 📈 [gzipped])

name                                                      parsed_size            gzip_size
async-load-components-web-preview-component                  +52723 B  (+13.6%)   +12984 B  (+12.7%)
async-load-design-blocks                                     +52368 B   (+1.8%)   +12038 B   (+1.8%)
async-load-blocks-support-article-dialog-dialog              +27321 B  (+45.1%)    +7121 B  (+38.7%)
async-load-signup-steps-domains                               +1119 B   (+0.5%)     +269 B   (+0.5%)
async-load-post-editor-media-modal                             +987 B   (+0.4%)     -164 B   (-0.2%)
async-load-signup-steps-site-picker                            +961 B   (+2.2%)     +221 B   (+1.8%)
async-load-signup-steps-plans-atomic-store                     +949 B   (+0.8%)     +200 B   (+0.7%)
async-load-signup-steps-plans                                  +949 B   (+0.6%)     +221 B   (+0.5%)
async-load-signup-steps-wp-for-teams-site                      +615 B   (+2.5%)     +154 B   (+2.5%)
async-load-signup-steps-user                                   +615 B   (+0.5%)     +152 B   (+0.5%)
async-load-signup-steps-theme-selection                        +615 B   (+1.0%)     +134 B   (+0.8%)
async-load-signup-steps-test-step                              +615 B   (+8.4%)     +168 B   (+7.8%)
async-load-signup-steps-survey                                 +615 B   (+3.9%)     +144 B   (+3.4%)
async-load-signup-steps-site-type                              +615 B   (+5.8%)     +166 B   (+5.5%)
async-load-signup-steps-site-topic                             +615 B   (+2.2%)     +146 B   (+1.8%)
async-load-signup-steps-site-title                             +615 B   (+5.9%)     +161 B   (+5.5%)
async-load-signup-steps-site-style                             +615 B   (+2.1%)     +176 B   (+1.8%)
async-load-signup-steps-site-or-domain                         +615 B   (+3.3%)     +157 B   (+3.0%)
async-load-signup-steps-site                                   +615 B   (+2.6%)     +154 B   (+2.5%)
async-load-signup-steps-rewind-were-backing                    +615 B   (+7.6%)     +167 B   (+6.9%)
async-load-signup-steps-rewind-migrate                         +615 B   (+2.6%)     +167 B   (+2.5%)
async-load-signup-steps-rewind-form-creds                      +615 B   (+1.6%)     +167 B   (+1.7%)
async-load-signup-steps-rebrand-cities-welcome                 +615 B   (+5.0%)     +167 B   (+4.8%)
async-load-signup-steps-reader-landing                         +615 B   (+5.7%)     +168 B   (+5.7%)
async-load-signup-steps-passwordless                           +615 B   (+2.6%)     +157 B   (+2.6%)
async-load-signup-steps-import-url-onboarding                  +615 B   (+1.8%)     +150 B   (+1.6%)
async-load-signup-steps-import-url                             +615 B   (+2.9%)     +149 B   (+2.5%)
async-load-signup-steps-import-preview                         +615 B   (+2.5%)     +160 B   (+2.2%)
async-load-signup-steps-creds-permission                       +615 B   (+2.8%)     +155 B   (+2.5%)
async-load-signup-steps-creds-confirm                          +615 B   (+2.8%)     +156 B   (+2.5%)
async-load-signup-steps-creds-complete                         +615 B   (+7.7%)     +167 B   (+6.9%)
async-load-signup-steps-clone-start                            +615 B   (+4.6%)     +169 B   (+4.3%)
async-load-signup-steps-clone-ready                            +615 B   (+2.3%)     +169 B   (+2.3%)
async-load-signup-steps-clone-point                            +615 B   (+0.4%)     +141 B   (+0.4%)
async-load-signup-steps-clone-jetpack                          +615 B   (+6.3%)     +168 B   (+6.3%)
async-load-signup-steps-clone-destination                      +615 B   (+3.2%)     +163 B   (+3.2%)
async-load-signup-steps-clone-credentials                      +615 B   (+1.1%)     +150 B   (+1.0%)
async-load-signup-steps-clone-cloning                          +615 B   (+4.7%)     +170 B   (+4.5%)
async-load-signup-steps-about                                  +615 B   (+1.1%)     +146 B   (+0.9%)
async-load-layout-guided-tours                                 +615 B   (+4.2%)     +146 B   (+3.9%)
async-load-docs-selectors                                      +615 B  (+12.4%)     +171 B  (+10.7%)
async-load-design                                              +595 B   (+0.0%)     +829 B   (+0.2%)
async-load-design-playground                                   +537 B   (+0.0%)     +123 B   (+0.0%)
async-load-blocks-inline-help-popover                          +533 B   (+0.2%)     -616 B   (-1.1%)
async-load-my-sites-current-site-notice                        +504 B   (+1.0%)     +111 B   (+0.9%)
async-load-blocks-jitm-templates-sidebar-banner                +504 B   (+3.1%)     +143 B   (+3.1%)
async-load-blocks-jitm-templates-notice                        +504 B   (+3.1%)     +148 B   (+3.2%)
async-load-blocks-jitm-templates-default                       +504 B   (+4.9%)     +145 B   (+4.6%)
async-load-blocks-inline-help                                  +495 B   (+0.8%)     +144 B   (+1.0%)
async-load-layout-masterbar-drafts-popover                     +404 B   (+1.4%)     +115 B   (+1.4%)
async-load-components-sites-popover                            +346 B   (+0.7%)      +66 B   (+0.5%)
async-load-my-sites-current-site-stale-cart-items-notice       +300 B   (+0.7%)      +61 B   (+0.4%)
async-load-apps-notifications-index-jsx                        +300 B   (+0.3%)      +66 B   (+0.2%)
async-load-blocks-support-article-dialog                       +180 B  (+21.4%)      +26 B   (+6.2%)
async-load-blocks-reader-full-post                             +179 B   (+0.4%)      +27 B   (+0.2%)
async-load-my-sites-current-site-domain-warnings                -37 B   (-0.1%)      -22 B   (-0.2%)

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.

[griffbrad]

👍🏻Overall, I like the approach.

However, this particular case is making the separate lazyLoadDependencies export feel a bit awkward to me. Notice how the section's default export is essentially a no-op when config.isEnabled( 'reader' ) is falsy. We don't do the same check in lazyLoadDependencies, so we could theoretically get Lasagna middleware but no Reader routes.
Rather than invoking lazyLoadDependencies in sections-middleware, what if we kept the contract to just the default export? With this being the only section using this opportunity to load dependencies (as far as I'm aware, anyway), we can perhaps just leave it up to the section itself to clearly delineate between route registration and dependency loading in its default exported function.

[unDemian]

However, this particular case is making the separate lazyLoadDependencies export feel a bit awkward to me. Notice how the section's default export is essentially a no-op when config.isEnabled( 'reader' ) is falsy. We don't do the same check in lazyLoadDependencies, so we could theoretically get Lasagna middleware but no Reader routes.

Not all routes fall under the feature flag check, if reader is not enabled it will fallback to /read/a8c

wp-calypso/client/reader/index.js

Line 105 in b9357d1

page( '/read/a8c', updateLastRoute, sidebar, forceTeamA8C, readA8C, makeLayout, clientRender );

Rather than invoking lazyLoadDependencies in sections-middleware, what if we kept the contract to just the default export? With this being the only section using this opportunity to load dependencies (as far as I'm aware, anyway), we can perhaps just leave it up to the section itself to clearly delineate between route registration and dependency loading in its default exported function.

I added it to the section middleware to make sure it is loaded before a section is activated as some of our code will open a websocket based on SECTION_SET action. If we load the middleware inside the section it will be injected after the SECTION_SET was dispatched. At least that was my assumption.

[unDemian]

I'll try to add the lazy loading to the default export to see if I encounter any SECTION_SET weirdness or racey scenarios.

[unDemian]

Feedback addressed, ready for re-review, thank you very much for taking the time

[griffbrad]

🚢Looks great! Thanks for stepping in and getting this added so quickly.

[sgomes]

Hey folks! Any updates on this PR? Do you need any help getting this to work post-yarn, @unDemian?

[unDemian]

👋 I'll try to rebase and merge this today, I got a bit sidetracked, thanks for the headsup.

[sgomes]

👋 I'll try to rebase and merge this today, I got a bit sidetracked, thanks for the headsup.

No worries, thank you! Let me know if you need a hand! 👍