feat: Updated Xpert component to be lazy loaded

[rijuma]

Related issues: #1482

To improve bundle size we are lazy loading Xpert from frontend-lib-learning-assistant.

Bundlewatch before

PASS dist/108.js: 1.57KB < 1.27MB (gzip)
PASS dist/15.js: 995B < 1.27MB (gzip)
PASS dist/2.js: 772B < 1.27MB (gzip)
PASS dist/312.js: 1.25MB < 1.27MB (gzip)
PASS dist/329.js: 1.99KB < 1.27MB (gzip)
PASS dist/35.js: 1.01KB < 1.27MB (gzip)
PASS dist/550.js: 628B < 1.27MB (gzip)
PASS dist/750.js: 1.1KB < 1.27MB (gzip)
PASS dist/775.js: 858B < 1.27MB (gzip)
PASS dist/824.js: 1.65KB < 1.27MB (gzip)
PASS dist/885.js: 1.21KB < 1.27MB (gzip)
PASS dist/938.js: 663B < 1.27MB (gzip)
PASS dist/app.js: 94.3KB < 1.27MB (gzip)
PASS dist/runtime.js: 1.93KB < 1.27MB (gzip)

bundlewatch PASS
Everything is in check (+1.35MB, -0B)

Result breakdown at: https://ja2r7.app.goo.gl/5iYm4CybudWXSUSF6

Bundlewatch after

PASS dist/108.js: 1.57KB < 1.27MB (gzip)
PASS dist/15.js: 995B < 1.27MB (gzip)
PASS dist/2.js: 770B < 1.27MB (gzip)
PASS dist/312.js: 1.25MB < 1.27MB (gzip)
PASS dist/329.js: 1.99KB < 1.27MB (gzip)
PASS dist/35.js: 1.01KB < 1.27MB (gzip)
PASS dist/550.js: 627B < 1.27MB (gzip)
PASS dist/750.js: 1.11KB < 1.27MB (gzip)
PASS dist/775.js: 859B < 1.27MB (gzip)
PASS dist/824.js: 1.65KB < 1.27MB (gzip)
PASS dist/885.js: 1.21KB < 1.27MB (gzip)
PASS dist/938.js: 662B < 1.27MB (gzip)
PASS dist/app.js: 94.39KB < 1.27MB (gzip)
PASS dist/runtime.js: 1.93KB < 1.27MB (gzip)

bundlewatch PASS
Everything is in check (+1.35MB, -0B)

Result breakdown at: https://ja2r7.app.goo.gl/TXEwuYtUvirAdYFL8

There seem to be no evident improvement on the bundle size according to Bundlewatch.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 88.69%. Comparing base (2a58ad2) to head (a01e19d).

Additional details and impacted files

@@           Coverage Diff           @@
##           master    #1498   +/-   ##
=======================================
  Coverage   88.69%   88.69%           
=======================================
  Files         312      312           
  Lines        5501     5502    +1     
  Branches     1365     1365           
=======================================
+ Hits         4879     4880    +1     
+ Misses        605      604    -1     
- Partials       17       18    +1     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[farhaanbukhsh]

@rijuma There doesn't seem to be any changes in bundle size, am I missing something?

[bradenmacdonald]

@rijuma Thanks for this PR! I believe the problem (with the bundle size not changing) is that @edx/frontend-lib-learning-assistant is still imported in store.js.

If you can give @edx/frontend-lib-learning-assistant its own separate Redux store or refactor it to not use Redux at all, it will solve the issue. Obviously the former is much simpler to achieve but the latter is the new best practice.

[rijuma]

@rijuma Thanks for this PR! I believe the problem (with the bundle size not changing) is that @edx/frontend-lib-learning-assistant is still imported in store.js.

If you can give @edx/frontend-lib-learning-assistant its own separate Redux store or refactor it to not use Redux at all, it will solve the issue. Obviously the former is much simpler to achieve but the latter is the new best practice.

It is. We have a ticket in our scope to move the learning assistant into its own plugin and remove all dependencies. The way it works right now unfortunately is by using the Redux store. I can put a hold on this PR until we move the assistant as a plugin (we have a ticket for that in our backlog).

My thoughts for that ticket are to remove the redux store for its own store within a context or use another global state strategy. It will be picked up eventually.