d123eda869
7 page-specific controllers were eager-loaded in index.html on every cold
visit, even when the user lands on /dashboard and never opens /backup,
/admin, etc. Moved them to lazy-load via spa.js's existing loadScript()
helper, fired from each route's handler on first navigation:
/js/components/backup/backup-page.js — handleBackup()
/js/components/backup/backup-app-card.js — handleBackup()
/js/components/ssh/ssh-page.js — config-manager ssh-access
/js/components/peers/peers-page.js — config-manager peers
/js/components/admin/admin-overview.js — config-manager overview
/js/components/admin/charts.js — config-manager overview
/js/components/admin/admin-system.js — config-manager system
config-manager.js gets a tiny `lazyLoad` helper that delegates to
window.spaClean.loadScript with a graceful fallback when the SPA hasn't
booted (legacy paths). loadScript is idempotent — subsequent visits to
the same route are no-ops, so we don't re-fetch after the first nav.
Cold-load impact on /dashboard (the most common landing):
Before: 25 sync <script> tags loading ~1.7 MB raw / ~430 KB gzipped
After: 18 sync <script> tags loading ~1.5 MB raw / ~380 KB gzipped
+ corresponding parse-cost reduction on the client (no longer parsing
backup-page.js + apps-related JS just to render the dashboard)
Page-specific JS still loads cleanly when the user navigates there — a
single extra network round-trip per route on first visit, then cached
for 1h (per Phase A's cache headers). Compression (Phase A) means the
deferred JS is ~75 % smaller on the wire than it would have been
pre-Phase-A.
Sister update to .../Scripts/update.sh: rsync now uses --delete so
file removals in the source tree (this commit deletes 7 script tags;
earlier commits deleted config-manager-old.js) propagate to the live
install. Excludes still protect frontend/data/.
Signed-off-by: librelad <librelad@digitalangels.vip>
111 lines
4.8 KiB
HTML
Executable File
111 lines
4.8 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>LibrePortal - Modern Docker Management</title>
|
|
|
|
<link rel="icon" type="image/svg+xml" href="/icons/libreportal.svg">
|
|
<link rel="icon" type="image/x-icon" href="/icons/favicon.ico" sizes="any">
|
|
<link rel="apple-touch-icon" href="/icons/libreportal.svg">
|
|
|
|
<!-- Styles -->
|
|
<link rel="stylesheet" href="/css/themes.css">
|
|
<link rel="stylesheet" href="/css/loading-screen.css">
|
|
<link rel="stylesheet" href="/css/setup-wizard.css">
|
|
<link rel="stylesheet" href="/css/style.css">
|
|
<link rel="stylesheet" href="/css/ip-whitelist.css">
|
|
<link rel="stylesheet" href="/css/port-manager.css">
|
|
<link rel="stylesheet" href="/css/backup.css">
|
|
<link rel="stylesheet" href="/css/ssh.css">
|
|
<link rel="stylesheet" href="/css/admin.css">
|
|
<link rel="stylesheet" href="/css/services.css">
|
|
<link rel="stylesheet" href="/css/modal.css">
|
|
<link rel="stylesheet" href="/css/tools.css">
|
|
<link rel="stylesheet" href="/css/routing.css">
|
|
<link rel="stylesheet" href="/css/login.css">
|
|
<link rel="stylesheet" href="/css/aurora-background.css">
|
|
<link rel="stylesheet" href="/css/topbar.css">
|
|
<link rel="stylesheet" href="/css/sidebar.css">
|
|
<link rel="stylesheet" href="/css/apps-layout.css">
|
|
<link rel="stylesheet" href="/css/apps.css">
|
|
<link rel="stylesheet" href="/css/forms.css">
|
|
<link rel="stylesheet" href="/css/config.css">
|
|
<link rel="stylesheet" href="/css/service-buttons.css">
|
|
<link rel="stylesheet" href="/css/dashboard.css">
|
|
<link rel="stylesheet" href="/css/tasks.css">
|
|
<link rel="stylesheet" href="/css/update-notifier.css">
|
|
<script>
|
|
// Inline data-theme bootstrap — runs before any rendering so the right
|
|
// palette tokens resolve on first paint. Synchronously injects a
|
|
// <link> to the saved theme's CSS (which lives at
|
|
// /themes/<name>/theme.css) so even the very first frame paints with
|
|
// the correct palette. ThemeRegistry below additionally <link>s every
|
|
// discovered theme so the dropdown can switch between them without
|
|
// another fetch.
|
|
(function () {
|
|
var legacy = localStorage.getItem('selectedTheme');
|
|
if (legacy && !localStorage.getItem('theme')) localStorage.setItem('theme', legacy);
|
|
if (legacy) localStorage.removeItem('selectedTheme');
|
|
var theme = localStorage.getItem('theme');
|
|
if (theme === 'dark' || theme === 'blue') theme = 'dark-blue';
|
|
if (!theme) theme = 'nebula';
|
|
localStorage.setItem('theme', theme);
|
|
document.documentElement.setAttribute('data-theme', theme);
|
|
|
|
// Synchronous <link> injection. Inserted via document.write so the
|
|
// parser blocks on this stylesheet — guarantees first paint has
|
|
// the palette tokens defined. Marked with data-theme-css="<name>"
|
|
// so ThemeRegistry can detect and skip duplicates.
|
|
document.write(
|
|
'<link rel="stylesheet" href="/themes/' + theme +
|
|
'/theme.css" data-theme-css="' + theme + '">'
|
|
);
|
|
})();
|
|
</script>
|
|
<script src="/js/system/theme-registry.js"></script>
|
|
<script src="/js/system/custom-select.js"></script>
|
|
<script src="/js/system/custom-number.js"></script>
|
|
</head>
|
|
<body>
|
|
<!-- Topbar Container -->
|
|
<div id="topbar-container">
|
|
<!-- Topbar will be loaded here -->
|
|
</div>
|
|
|
|
<!-- Main Content Container -->
|
|
<main id="main-content" class="main">
|
|
<div id="app-content">
|
|
<!-- App content will be loaded here -->
|
|
</div>
|
|
</main>
|
|
|
|
<!-- Scripts -->
|
|
<!-- Auth must load first — gates all other initialization -->
|
|
<script src="/js/system/auth-manager.js"></script>
|
|
<!-- Essential Bootstrap -->
|
|
<script src="/js/utils/dom-helpers.js"></script>
|
|
<script src="/js/utils/ui-helpers.js"></script>
|
|
<script src="/js/utils/router.js"></script>
|
|
<script src="/js/utils/data-loader.js"></script>
|
|
<script src="/js/utils/dismissible.js"></script>
|
|
<script src="/js/components/eo-modal.js"></script>
|
|
<script src="/js/components/dashboard.js"></script>
|
|
<script src="/js/system/system-loader.js"></script>
|
|
<script src="/js/system/loading-ui.js"></script>
|
|
<script src="/js/system/setup-detector.js"></script>
|
|
<script src="/js/system/setup-wizard.js"></script>
|
|
<script src="/js/system/setup-completion-watcher.js"></script>
|
|
<script src="/js/system/system-orchestrator.js"></script>
|
|
<!--
|
|
Page-specific controllers are loaded on demand by spa.js / config-manager.js
|
|
when the user navigates to the relevant route. Keeping them out of the
|
|
initial <script> block trims ~200 KB raw (~50 KB gzipped) off the cold-load
|
|
cost AND avoids parsing them up front on the dashboard, which most users
|
|
land on. Each handler's loadScript() call is idempotent — subsequent
|
|
navigations to the same route are free.
|
|
-->
|
|
<script src="/js/spa.js"></script>
|
|
</body>
|
|
</html>
|