...
| Tip |
|---|
Production build time for a guest/module MFE is 69.6% of the time of a traditional MFE. |
...
Bundle Sizes
Production
Traditional Build
File | Size | Notes |
|---|---|---|
440b1fd39e91e51e7522b7475338e338.png | 526 | An image I can’t find the source of - maybe a header or footer? |
588.ccafd157cd20348f5d12.js | 1179475 | Dependencies (with Treeshaking) |
95ec738c0b7faac5b5c9126794446bbd.svg | 342 | User menu icon |
app.2733c7b2743ced7571ec.css | 510993 | Our massive stylesheet |
app.2733c7b2743ced7571ec.js | 1279 | Our application code |
index.html | 31299 | Big because it includes New Relic script. |
runtime.e844be7d2206edc6dff5.js | 2070 | Webpack overhead |
Total: 1,725,984 bytes
Guest/Module Build
File | Size | Notes |
|---|---|---|
272.9f559385b83edb423687.js | 66629 | Module federation runtime |
440b1fd39e91e51e7522b7475338e338.png | 526 | Same blank image… unsure why this is here. |
446.88baa1ec0097e5a731bb.css | 1 | Presumably a stub for paragon’s stylesheet somehow, since we’re not importing it. |
446.88baa1ec0097e5a731bb.js | 929360 | Paragon |
483.f8bdb2bc9f890dc5a6d3.js | 123479 | react-dom - singleton, so impossible to use |
810.39346add3075df3c2e86.js | 7123 | react - singleton, so impossible to use |
826.48c8a2cae4305c5e8390.js | 914 | prop-types |
95ec738c0b7faac5b5c9126794446bbd.svg | 342 | A “user” icon. Unclear why this has been bundled. |
__federation_expose_GuestPage.74bf4d7962b592080a4d.css | 115 | Our module CSS! |
__federation_expose_GuestPage.74bf4d7962b592080a4d.js | 2240 | Our module JS! |
app.c2789d2465bb34d2a8e5.js | 168 | Unused |
guest_partial.1a68511e4abda6f1aea1.js | 666 | Overhead |
index.html | 31525 | Unused as a module |
remoteEntry.js | 75855 | Manifest |
runtime.3e9d4ef61501a655f753.js | 7147 | Overhead |
Results
Worst Case Scenario
Worst case bundle size: 1,167,317 bytes
...
The above bundle size number won’t make sense with the sizes in the above table. While running this test, I realized that because my MFE didn’t use our other shared dependencies, they weren’t included in the bundle. Rather than start over, I went back to the Shared Dependencies page, counted up the total size of all the dependencies that we would have to load if our host didn’t have a compatible copy of them, and added that to the base size of our best case scenario. That number was 1,081,960, and includes @openedx/paragon, classnames, prop-types, react-redux, react-router, react-router-dom, and redux. React, react-dom, and @edx/frontend-platform don't count because they are singletons and can’t be loaded more than once.
Best Case Scenario
✨ Best case bundle size: 78,210 bytes
...