For this test, we’re going to measure the time it takes to build dev and production bundles of the frontend-app-mf-guest repository. We’ll measure the build time in two different app configurations:
A traditional MFE which bundles all of its dependencies and includes the header, footer, and all of the shared dependencies.
A new “guest” MFE with a ModuleFederationPlugin configuration that shares dependencies, and with only the shared dependencies it now needs to be loaded as a runtime module into a “host” MFE. That means the header, footer, core-js, regenerator-runtime, and brand are no longer included at all.
Results
Development Builds
Test Run | Traditional (ms) | Guest/Module (ms) |
|---|---|---|
1 | 9133 | |
2 | 5582 | |
3 | 5510 | |
4 | 5610 | |
5 | 5634 | |
6 | 5671 | |
7 | 5693 | |
8 | 5640 | |
9 | 5623 | |
10 | 5580 | |
Average | 5967.6 |
Production Builds
Test Run | Traditional (ms) | Guest/Module (ms) |
|---|---|---|
1 | 14896 | |
2 | 14982 | |
3 | 14844 | |
4 | 14840 | |
5 | 14776 | |
6 | 15003 | |
7 | 15161 | |
8 | 15170 | |
9 | 14982 | |
10 | 15309 | |
Average | 14996.3 |
Production Bundle Sizes
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 | 179475 | 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: 725,984 bytes
Guest/Module Build
File | Size | Notes |
|---|---|---|