The shell
The platform is a React shell built on Module Federation. Each product module is built and released on its own, and the shell loads it at runtime.
- Runtime URL resolution: the shell works out where each module lives when the app loads, instead of fixing it at build time, so a module can be released without rebuilding the shell.
- Health checks: the shell checks a module is available before mounting it.
- Dynamic overrides: a module's location can be changed at runtime.
Under 5 KB before sign-in
I wrote a custom Vite plugin so the first thing the browser downloads is a tiny loader. The React bundles are held back until Keycloak confirms the user's sign-in, so nothing heavy is downloaded for users who aren't authenticated.
- < 5 KB loader
- Keycloak SSO check
- Load React shell
- Resolve module URLs + health check
- Mount module
Simplified load sequence.
Other performance work
- Deferred the ~387 KB UserPilot SDK by 3 seconds to improve Largest Contentful Paint.
- Prefetched modules with
requestIdleCallback, so they download when the browser is otherwise idle. - Split Vite and Rollup chunks to reduce the initial bundle.
Security
Keycloak single sign-on with role-based access control decides what each user can see and which modules they can open.
Results
- Zero downtimeindependent module releases
- < 5 KBloaded before sign-in
- ~387 KBSDK moved off the critical path
This was client work under NDA. Diagrams are simplified redraws, and no client data or screenshots are shown.