Lazy-load 4 modals behind Show gates to slim index bundle further

This commit is contained in:
rcourtman
2026-05-12 09:16:00 +01:00
parent da7969fb48
commit 4ccbbf4267
2 changed files with 57 additions and 46 deletions
+23 -23
View File
@@ -1,38 +1,38 @@
{
"$comment": "Frontend bundle size baseline. Run 'npm run check:bundlesize' to validate. To update: run 'node scripts/check-bundle-size.mjs --update-baseline' after vite build.",
"version": 1,
"generated": "2026-05-11",
"generated": "2026-05-12",
"defaultThresholdPercent": 15,
"chunks": {
"index": {
"baselineGzip": 117548
"baselineGzip": 111746
},
"Alerts": {
"baselineGzip": 84724
"baselineGzip": 84756
},
"Settings": {
"baselineGzip": 84570
"baselineGzip": 84628
},
"InfrastructureWorkspace": {
"baselineGzip": 72487
"baselineGzip": 72510
},
"AIIntelligence": {
"baselineGzip": 63997
"baselineGzip": 64020
},
"Infrastructure": {
"baselineGzip": 61725
"baselineGzip": 61769
},
"Workloads": {
"baselineGzip": 48573
"baselineGzip": 48657
},
"Storage": {
"baselineGzip": 39286
"baselineGzip": 39332
},
"Recovery": {
"baselineGzip": 30393
"baselineGzip": 30434
},
"ScrollToTopButton": {
"baselineGzip": 24621
"baselineGzip": 24678
},
"vendor-ai": {
"baselineGzip": 20801
@@ -41,10 +41,10 @@
"baselineGzip": 17298
},
"searchParams": {
"baselineGzip": 13393
"baselineGzip": 13392
},
"APIAccessPanel": {
"baselineGzip": 10767
"baselineGzip": 10792
},
"vendor": {
"baselineGzip": 9853
@@ -53,39 +53,39 @@
"baselineGzip": 9595
},
"ReportingPanel": {
"baselineGzip": 8803
"baselineGzip": 8831
},
"AuditLogPanel": {
"baselineGzip": 8357
"baselineGzip": 8392
},
"routeStateNavigation": {
"baselineGzip": 7709
"baselineGzip": 7724
},
"UpdatesSettingsPanel": {
"baselineGzip": 6663
"baselineGzip": 6699
},
"Ceph": {
"baselineGzip": 6345
"baselineGzip": 6379
},
"SecurityAuthPanel": {
"baselineGzip": 5948
"baselineGzip": 5959
},
"DiagnosticsPanel": {
"baselineGzip": 5723
"baselineGzip": 5738
},
"HelpIcon": {
"baselineGzip": 5382
"baselineGzip": 5381
},
"useUnifiedResources": {
"baselineGzip": 5261
},
"OrganizationSharingPanel": {
"baselineGzip": 5214
"baselineGzip": 5244
}
},
"totals": {
"js": {
"baselineGzip": 883834
"baselineGzip": 889432
},
"css": {
"baselineGzip": 24654
+34 -23
View File
@@ -9,12 +9,15 @@ import { logger } from './utils/logger';
import { UpdateBanner } from './components/UpdateBanner';
import { DemoBanner } from './components/DemoBanner';
import { GitHubStarBanner } from './components/GitHubStarBanner';
import { KeyboardShortcutsModal } from './components/shared/KeyboardShortcutsModal';
import { CommandPaletteModal } from './components/shared/CommandPaletteModal';
// Modals are only mounted when opened, so their code can stay out of the
// entry bundle until first use (same pattern as AIChat below).
const KeyboardShortcutsModal = lazy(() => import('./components/shared/KeyboardShortcutsModal').then((m) => ({ default: m.KeyboardShortcutsModal })));
const CommandPaletteModal = lazy(() => import('./components/shared/CommandPaletteModal').then((m) => ({ default: m.CommandPaletteModal })));
import { dialogStackHasBlockingDialog } from './components/shared/useDialogState';
import { createTooltipSystem } from './components/shared/Tooltip';
import { TokenRevealDialog } from './components/TokenRevealDialog';
import { UpdateProgressModal } from './components/UpdateProgressModal';
const TokenRevealDialog = lazy(() => import('./components/TokenRevealDialog').then((m) => ({ default: m.TokenRevealDialog })));
import { tokenRevealStore } from './stores/tokenReveal';
const UpdateProgressModal = lazy(() => import('./components/UpdateProgressModal').then((m) => ({ default: m.UpdateProgressModal })));
import { UpdatesAPI, type UpdateStatus } from './api/updates';
// AIChat is the side-panel chat UI plus its store deps (markdown rendering,
// tool-call formatting, prompt scaffolding). Lazy-load behind aiChatStore.isOpen
@@ -162,16 +165,18 @@ function GlobalUpdateProgressWatcher() {
});
return (
<UpdateProgressModal
isOpen={showProgressModal()}
onClose={() => setShowProgressModal(false)}
onViewHistory={() => {
setShowProgressModal(false);
navigate('/settings/system-updates');
}}
connected={wsContext?.connected}
reconnecting={wsContext?.reconnecting}
/>
<Show when={showProgressModal()}>
<UpdateProgressModal
isOpen={showProgressModal()}
onClose={() => setShowProgressModal(false)}
onViewHistory={() => {
setShowProgressModal(false);
navigate('/settings/system-updates');
}}
connected={wsContext?.connected}
reconnecting={wsContext?.reconnecting}
/>
</Show>
);
}
@@ -416,15 +421,21 @@ function App() {
<AIChat onClose={() => aiChatStore.close()} />
</Show>
</div>
<KeyboardShortcutsModal
isOpen={shortcutsOpen()}
onClose={() => setShortcutsOpen(false)}
/>
<CommandPaletteModal
isOpen={commandPaletteOpen()}
onClose={() => setCommandPaletteOpen(false)}
/>
<TokenRevealDialog />
<Show when={shortcutsOpen()}>
<KeyboardShortcutsModal
isOpen={shortcutsOpen()}
onClose={() => setShortcutsOpen(false)}
/>
</Show>
<Show when={commandPaletteOpen()}>
<CommandPaletteModal
isOpen={commandPaletteOpen()}
onClose={() => setCommandPaletteOpen(false)}
/>
</Show>
<Show when={tokenRevealStore.state() !== null}>
<TokenRevealDialog />
</Show>
{/* AI Assistant Button moved to AppLayout to access kioskMode state */}
<TooltipRoot />
</DarkModeContext.Provider>