GluuFederation / GluuFederation/flex

chore(admin-ui): eager bundle ships Bootstrap twice plus unreferenced CSS and CDN stylesheets

Open
#3,032 0 comments 0 reactions 1 assignee Claimed by @faisalsiddique4400 View on GitHub
comp-admin-ui enhancement kind-dependencies
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.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.