Optimize MFE Performance

[ghassanmas]

Area of improvment in MFEs can be:

The what

• Reudcing the file sizes:
  • Elmenate unused CSS (The size of css file is around 1MB, for the learning)
  • Reduce app.hash.js file size (its around 0.5MB)
  • The requried depencs chunk is around 2.5MB (For example checking the learning build, it seems that all users are going JS code realted the frontend-lib-speica-exams, no matter if or not they gonna use it)
  • Can we use preact It's a light weight alternative to react.js
  • Check for unsued JS code
  • Reduce CSS file (An example openedx/frontend-build/pull/266 Still need futher testing though)
  • Check for unsued Assets
    • Do paragon icons have all to be preloaded, checking bundle analyzer (its around 0.5MB)
    • Are Paragon componenets being Tree Chaked

The How (Not an exlusive list,)

• Do you utilize Code Splitting/Dynamic Import when is an opportunity for, this can be ensuring code logic for uncommon use cases is only loaded when it needs to, Here are some examples which might be already taken account of
  • The account mfe, should not load the code realted tensorflow image, when user are in the typical user settings page
  • The learning MFE, should not load JS code realated special-exam when user are in courseware
  • For i18n: can we load strings/polyfills only when needed relate to openedx/platform-roadmap/issues/205
• Use Webpack plugins to reduce code size
• Serve encoded/zipped version of assets file (This has be done with tutor form the latest release)
• Can we have a common assets than loads from CDN from common depends:
  • This solution might be optimize perforamce when going to one MFE but rather when user browse between them (Which somehting very common I assume_)
  • This might go in line with #126, since in theoray we shouldn't need to compile the commons aseets for every MFE
  • Another way of doing this can be Module Fedeartion

How to test

• Check the dist/repot.html file
• Run audit on Google Lighthouse (Browser devtools)
• Run Audit on https://web.dev/measure/
• Check file sizes by ls -lh dist
• Automated Tests (Could be run per PR, version, corn..etc) This would be realted to #135
  • https://github.com/marketplace/actions/web-performance-audits-with-lighthouse
  • https://github.com/marketplace/actions/lighthouse-compare
  • https://github.com/marketplace?type=actions&query=lighthouse+

Other Notes

• This issue might relate to #126, i.e. It would be great if we take this into considration.
  • Core web vitals are becoming the industry standard for measuring the app/site performace, those can be automatically tested for hence the automated tests above. https://web.dev/learn-core-web-vitals/ , https://github.com/GoogleChrome/web-vitals

[arbrandes]

Closing in favor of https://github.com/openedx/wg-frontend/issues/173.