GluuFederation / GluuFederation/flex
chore(admin-ui): eager bundle ships Bootstrap twice plus unreferenced CSS and CDN stylesheets
- Dominant language
- TypeScript
- Stars
- 31
- Forks
- 21
- Avg merge
- 2d 4h
- Merged PRs (30d)
- 29
Description
## Problem
The admin-ui eager critical path is **748.4 kB gzip / 2933.8 kB raw across 17 assets**, downloaded on every page load before anything renders. `index.css` alone is 483.3 kB and `app-shared.css` is 101.4 kB.
All figures measured at `80cbd3113` via `npm run preview:prod:analyze`.
### 1. Bootstrap is compiled and shipped twice
`app/index.tsx` imports `bootstrap/dist/css/bootstrap.css` while `app/styles/miltonbo/scss/bootstrap/bootstrap.scss` builds Bootstrap from SCSS. Both end up in the eager CSS.
### 2. Three CDN stylesheets, none referenced
`index.html` links react-block-ui, font-awesome 6.4 and Google Material Icons; `app/styles/index.css` adds a Material Icons `@font-face` pointing at `fonts.gstatic.com`.
Nothing uses them — no `fa-` classes, no `material-icons` class, no MUI ``, no `BlockUi` component anywhere in the source. Every icon is an `@mui/icons-material` SVG component.
These also make the app reach out to `cdnjs.cloudflare.com`, `fonts.googleapis.com` and `fonts.gstatic.com` at runtime, which breaks air-gapped deployments.
### 3. Dead SCSS generating unreachable class combinations
- `Card.module.scss` / `CardHeader.module.scss` generate `custom-card--color-*` for every `$dashboard-colors` entry, but no call site passes `color` to ``.
- `_theme-variants.scss` generates theme variants for colours `ThemeProvider` can never produce — `initialColor` is hardcoded to `"primary"` in `app/layout/default.tsx` and no setter exists.
### 4. `react-ace` is on the eager path
The editor bundle loads on first paint, though only Custom Scripts and Webhooks use it.
### 5. Dead code-splitting groups
Three `FEATURE_GROUPS` entries in `vite.config.ts` match no modules.
## How to reproduce
npm run preview:prod:analyze
Then open `dist/sonda-report.html`, or sum the `modulepreload` and `stylesheet` entries in `dist/index.html` to get the eager critical path.
## Acceptance criteria
- [ ] Bootstrap compiled once
- [ ] Zero external hosts in the built output (verify with `performance.getEntriesByType('resource')` after a hard reload)
- [ ] No generated CSS for class combinations the app cannot produce
- [ ] `react-ace` off the eager path, with no layout shift when the editor mounts
- [ ] No visual regressions in light or dark theme
- [ ] `tsc`, test suite and `build:prod` clean
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.