perf(bundle): lazy-load rarely-visited pages + split vendor chunks (#249)

Cold-start bundle was a single 1.88 MB / 577 KB-gzipped chunk that
parsed every page in the app before first paint, including pages a
typical session never opens.

Two-part fix:

1. Lazy-load 10 rarely-visited pages via React.lazy() — each becomes
   its own chunk that only downloads when the route is hit:
     Settings, Statistics, Help, WhatsNew, DeviceSync, OfflineLibrary,
     LabelAlbums, AdvancedSearch, FolderBrowser, InternetRadio.
   Whole <Routes> tree is wrapped in <Suspense fallback={null}> — no
   visible loading state, the browser cache hits on subsequent visits.

2. Vite manualChunks splits dependencies that change rarely from app
   code: react/react-dom/react-router, the @tauri-apps/* family, and
   i18next. Tauri auto-updater pulls smaller deltas when only app
   code changed (vendor chunks stay byte-identical and cached).

Build output:
  Before: 1.88 MB / 577 KB gz monolithic
  After cold start: ~450 KB gz (index 370 + react 54 + tauri 6 + i18n 20)
                    = 22% smaller initial download
  Plus 11 lazy chunks. Notably WhatsNew's bundled CHANGELOG (215 KB /
  76 KB gz) is now off the cold-start path entirely.

Co-authored-by: Psychotoxical <dev@psysonic.app>
Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Frank Stellmacher
2026-04-21 21:38:07 +02:00
committed by GitHub
parent 88cd09c0be
commit aa0776e811
2 changed files with 66 additions and 40 deletions
+20
View File
@@ -27,5 +27,25 @@ export default defineConfig({
target: process.env.TAURI_ENV_PLATFORM === "windows" ? "chrome105" : "safari13",
minify: !process.env.TAURI_ENV_DEBUG ? "esbuild" : false,
sourcemap: !!process.env.TAURI_ENV_DEBUG,
rollupOptions: {
output: {
// Vendor chunks isolate dependencies that change rarely from app code,
// so a normal app update doesn't invalidate the cached vendor bundles
// (helps especially with the Tauri updater pulling deltas).
manualChunks: {
react: ["react", "react-dom", "react-router-dom"],
tauri: [
"@tauri-apps/api",
"@tauri-apps/plugin-shell",
"@tauri-apps/plugin-dialog",
"@tauri-apps/plugin-fs",
"@tauri-apps/plugin-process",
"@tauri-apps/plugin-store",
"@tauri-apps/plugin-updater",
],
i18n: ["i18next", "react-i18next"],
},
},
},
},
});