This is the results of analyzing the dependencies in the 22 micro-frontends in the Open edX GitHub organization.
Approach
Opening the package.json of each of the 22 repos.
Copying out the dependencies and dev dependencies into one big text file.
Sort the lines alphabetically.
Adjusted for any “@edx” to “@openedx” inconsistencies as we migrate orgs.
Scan the list (800 lines or so) for dependencies used by all or nearly all of the MFEs.
Write them down.
Augment that raw data with domain knowledge about:
Packages that contain/expose others (
@edx/frontend-platformprovideshistory,react-intl,@reduxjs/toolkitexposes bothreduxandreselect,paragonhas icons now, etc.)Packages we want to move away from (i.e., please no more
redux-saga,@fortawesome/*, etc.)Packages we want to move toward (i.e., all MFEs should have
@edx/frontend-component-headerand@edx/frontend-component-footerdependencies even if they don't for some reason)
Use bundlephobia.com to get bundle sizes for the dependencies to add more context.
Findings
Common Dependencies
The following packages are used by all or nearly all Open edX micro-frontends. This is only including dependencies - the assumption is that devDependencies are likely necessary for an MFE to build itself, and therefore less interesting for this exercise since they can’t be meaningfully ‘combined’ in most cases. If they were, they’re generally already part of @edx/frontend-build.
Package | Size (un-gzipped) | Notes |
|---|---|---|
@edx/brand | Variable | |
@edx/frontend-component-footer | 88.1k | |
@edx/frontend-component-header | 156.9k | |
@edx/frontend-platform | 355.3k | |
@openedx/paragon (or @edx/paragon) | Big | bundlephobia.com choked on the paragon build, but we expect it’s the largest thing here. That said, today, Paragon components are dropped during treeshaking |
classnames | 0.8k | |
core-js | 241.1k | |
prop-types | 0.9k | |
react | 6.4k | |
react-dom | 130.2k | |
react-redux | 11.2k | |
react-router | 58.9k | |
react-router-dom | 77.1k | |
redux | 3.7k | |
regenerator-runtime | 6.6k |
Total: 892.2k
Recommendation
All of the above packages should be shared by the shell application.
Third-Party Dependencies
The third party dependencies in particular - i.e., the packages that aren’t part of @edx or @openedx, are all used by all or nearly all MFEs in existence, and are nearly all required for all MFEs to function.
Open edX Dependencies
The Open edX packages (brand, frontend-component-footer, frontend-component-header, frontend-platform, and paragon) are a bit more interesting, each for their own reason, mostly around customization.
@edx/brand
It’s worth noting that this is a stand-in for a real brand package, which will be operator-specific. It should obviously be shared.
...