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

Differential serving using module/nomodule scripts #9584

Merged
merged 54 commits into from
Dec 6, 2021

Conversation

jroebu14
Copy link
Contributor

@jroebu14 jroebu14 commented Oct 25, 2021

Resolves #7155

Overall change:
Simorgh now builds 2 client side JavaScript bundles. A slimmer modern bundle for modern browsers and a (currently live) bloated bundle for legacy browsers.

The modern bundle is transpiled to ES2017 syntax and legacy bundle is transpiled to ES5.

More info in the docs

Code changes:

  • Updates webpack and babel config to handle building 2 different client-side bundles - legacy and modern
  • Updates the server side Document component to render both legacy and modern bundles and conditionally load them using module/nomodule.

  • I have assigned myself to this PR and the corresponding issues
  • I have added the cross-team label to this PR if it requires visibility across World Service teams
  • I have assigned this PR to the Simorgh project
  • (BBC contributors only) This PR follows the repository use guidelines

Testing:

Requires full cross-browser regression testing.

To test please run yarn build && yarn start

  • Automated (jest and/or cypress) tests added (for new features) or updated (for existing features)
  • If necessary, I have run the local E2E non-smoke tests relevant to my changes (CYPRESS_APP_ENV=local CYPRESS_SMOKE=false yarn test:e2e:interactive)
  • This PR requires manual testing

@jroebu14 jroebu14 force-pushed the modern-legacy-bundles branch 3 times, most recently from 27532c4 to 8532228 Compare November 2, 2021 15:57
@jroebu14 jroebu14 changed the title run webpack twice to output modern & legacy js bundles Differential serving using module/nomodule scripts Nov 3, 2021
Copy link
Contributor

@amoore108 amoore108 left a comment

Choose a reason for hiding this comment

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

This looks great 👍🏼 It'll be interesting to see the effect this will have on our performance metrics. Is it worth capturing or referencing benchmarks before these changes are implemented and then capturing some afterwards?

Copy link
Contributor

@DarioR01 DarioR01 left a comment

Choose a reason for hiding this comment

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

LGTM

@jroebu14
Copy link
Contributor Author

@amoore108 we have a couple of tools for monitoring performance. We have both real user measurements and synthetic tests running daily. I was planning on looking at this data. Is there any other method of measuring performance you think would be useful?

@amoore108
Copy link
Contributor

@amoore108 we have a couple of tools for monitoring performance. We have both real user measurements and synthetic tests running daily. I was planning on looking at this data. Is there any other method of measuring performance you think would be useful?

That sounds good to me! Just wanted to check if we were capturing any comparison data before merge 😄

@jroebu14 jroebu14 merged commit 26d2291 into latest Dec 6, 2021
@jroebu14 jroebu14 deleted the modern-legacy-bundles branch December 6, 2021 13:23
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
cross-team For visibility for both World Service teams (Engage & Media) performance
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Investigate use of module/nomodule pattern to reduce js downloaded and parsed in modern browsers
3 participants