Frontend: bundle vendor-split (221 KB gz, ~29 KB headroom) + fill unit-test gaps #67

New Issue

2026-06-08T13:42:27Z

logaritmisk commented

2026-06-08 13:42:27 +00:00

Severity: Medium. From a frontend deep audit, 2026-06-08. Performance headroom + a few targeted test gaps. The suite is otherwise healthy (175 tests, 0 skipped, strong selectors, parity test).

Problems

[Med] Single ~221 KB gz main chunk, only ~29 KB under the 250 KB budget, and vite build already prints the >500 KB raw warning. vite.config.ts has no build.rollupOptions.output.manualChunks. The chunk is framework code (react-dom + react-router 7 + @tanstack/react-query + @base-ui/react + i18next + both locales) that rarely changes but invalidates on every app edit.
[Med] components/delete-confirm-dialog.tsx — the delete-in-use flow is untested at the UI layer. InUseError → t("actions.inUse", {count}) (:40) is only covered at the query layer (api/queries.test.ts); the dialog's rendering of the in-use message + blocked-delete branch has no .test.tsx.
[Med] objects/prune-fields.ts — non-trivial pure transform tested only indirectly via object-form.test.tsx (localized single-lang filtering, empty/null pruning, nested maps). Ideal direct-unit-test candidate.
[Low] lib/labels.ts + lib/format-date.ts — widely-used pure functions (label-fallback resolution, locale-aware date formatting) with no direct test.
[Low] Story gaps — combobox (composed interactive primitive) lacks a visual/a11y story; also alert-dialog, drawer, label, skeleton, card.

Suggested fix

Add a manualChunks vendor split (e.g. react/react-dom/router together, @base-ui separately) — buys budget headroom + long-term cache stability for the cheapest effort.
Add delete-confirm-dialog.test.tsx (InUseError path), prune-fields.test.ts, and direct tests for labels/format-date.
Add a combobox story.

Source: frontend deep audit (perf/testing dimension), 2026-06-08. Verified-good (no action): tree-shakeable lucide-react, heavy object-form already code-split, native Intl (no heavy date lib).

**Severity: Medium.** _From a frontend deep audit, 2026-06-08. Performance headroom + a few targeted test gaps. The suite is otherwise healthy (175 tests, 0 skipped, strong selectors, parity test)._ ## Problems - **[Med] Single ~221 KB gz main chunk, only ~29 KB under the 250 KB budget**, and `vite build` already prints the >500 KB raw warning. `vite.config.ts` has no `build.rollupOptions.output.manualChunks`. The chunk is framework code (react-dom + react-router 7 + @tanstack/react-query + @base-ui/react + i18next + both locales) that rarely changes but invalidates on every app edit. - **[Med] `components/delete-confirm-dialog.tsx` — the delete-in-use flow is untested at the UI layer.** `InUseError → t("actions.inUse", {count})` (`:40`) is only covered at the query layer (`api/queries.test.ts`); the dialog's rendering of the in-use message + blocked-delete branch has no `.test.tsx`. - **[Med] `objects/prune-fields.ts` — non-trivial pure transform tested only indirectly** via `object-form.test.tsx` (localized single-lang filtering, empty/null pruning, nested maps). Ideal direct-unit-test candidate. - **[Low] `lib/labels.ts` + `lib/format-date.ts`** — widely-used pure functions (label-fallback resolution, locale-aware date formatting) with no direct test. - **[Low] Story gaps** — `combobox` (composed interactive primitive) lacks a visual/a11y story; also `alert-dialog`, `drawer`, `label`, `skeleton`, `card`. ## Suggested fix - Add a `manualChunks` vendor split (e.g. react/react-dom/router together, @base-ui separately) — buys budget headroom + long-term cache stability for the cheapest effort. - Add `delete-confirm-dialog.test.tsx` (InUseError path), `prune-fields.test.ts`, and direct tests for `labels`/`format-date`. - Add a `combobox` story. _Source: frontend deep audit (perf/testing dimension), 2026-06-08. Verified-good (no action): tree-shakeable lucide-react, heavy object-form already code-split, native Intl (no heavy date lib)._