feat: add resourcePriorityPlugin for enhanced resource loading; update chunking strategy in Vite config

webapp/vite.config.ts

@@ -1,11 +1,11 @@
 import { fileURLToPath } from 'node:url';
 import path from 'node:path';
 import preact from '@preact/preset-vite';
-import { defineConfig } from 'vite';
+import { defineConfig, type Plugin } from 'vite';
 
 const rootDir = fileURLToPath(new URL('.', import.meta.url));
 
-function searchIndexPolicyPlugin(isDemo: boolean) {
+function searchIndexPolicyPlugin(isDemo: boolean): Plugin {
   return {
     name: 'nodewarden-search-index-policy',
     transformIndexHtml(html: string) {
@@ -27,12 +27,39 @@ function searchIndexPolicyPlugin(isDemo: boolean) {
   };
 }
 
+function resourcePriorityPlugin(isDemo: boolean): Plugin {
+  return {
+    name: 'nodewarden-resource-priority',
+    enforce: 'post' as const,
+    transformIndexHtml(html: string) {
+      if (isDemo || !html.includes('/assets/app-suite-')) return html;
+
+      const scriptMatch = html.match(/^\s*<script type="module" crossorigin src="\/assets\/index-[^"]+\.js"><\/script>\s*$/m);
+      const appSuiteMatch = html.match(/^\s*<link rel="modulepreload" crossorigin href="\/assets\/app-suite-[^"]+\.js">\s*$/m);
+      const stylesheetMatch = html.match(/^\s*<link rel="stylesheet" crossorigin href="\/assets\/index-[^"]+\.css">\s*$/m);
+
+      if (!scriptMatch || !appSuiteMatch || !stylesheetMatch) return html;
+
+      const prioritizedTags = [
+        stylesheetMatch[0].replace('rel="stylesheet"', 'rel="stylesheet" fetchpriority="high"'),
+        appSuiteMatch[0].replace('rel="modulepreload"', 'rel="modulepreload" fetchpriority="high"'),
+        scriptMatch[0].replace('type="module"', 'type="module" fetchpriority="high"'),
+      ].join('\n');
+
+      return html
+        .replace(scriptMatch[0], '')
+        .replace(appSuiteMatch[0], '')
+        .replace(stylesheetMatch[0], prioritizedTags);
+    },
+  };
+}
+
 export default defineConfig(({ mode }) => {
   const isDemo = mode === 'demo';
 
   return {
     root: rootDir,
-    plugins: [preact(), searchIndexPolicyPlugin(isDemo)],
+    plugins: [preact(), searchIndexPolicyPlugin(isDemo), resourcePriorityPlugin(isDemo)],
     define: {
       __NODEWARDEN_DEMO__: JSON.stringify(isDemo),
     },
@@ -52,13 +79,13 @@ export default defineConfig(({ mode }) => {
       emptyOutDir: true,
       sourcemap: false,
       target: 'esnext',
+      chunkSizeWarningLimit: 800,
       rollupOptions: {
+        treeshake: {
+          preset: 'smallest',
+        },
         output: {
           manualChunks(id) {
-            if (id.includes('/node_modules/')) {
-              return 'vendor';
-            }
-
             const normalized = id.replace(/\\/g, '/');
 
             const localeMatch = normalized.match(/\/src\/lib\/i18n\/locales\/(.+)\.ts$/);
@@ -67,28 +94,16 @@ export default defineConfig(({ mode }) => {
               return `i18n-${localeMatch[1]}`;
             }
 
-            if (normalized.includes('/src/lib/i18n.ts')) {
-              return 'i18n-core';
-            }
-
-            if (
-              normalized.includes('/src/components/AuthViews.tsx') ||
-              normalized.includes('/src/components/PublicSendPage.tsx') ||
-              normalized.includes('/src/components/RecoverTwoFactorPage.tsx') ||
-              normalized.includes('/src/components/JwtWarningPage.tsx') ||
-              normalized.includes('/src/lib/app-auth.ts')
-            ) {
-              return 'auth-suite';
-            }
-
             if (
               !isDemo &&
               (
+                normalized.includes('/src/components/VaultPage.tsx') ||
                 normalized.includes('/src/components/ImportPage.tsx') ||
                 normalized.includes('/src/lib/import-') ||
                 normalized.includes('/src/lib/export-formats.ts') ||
                 normalized.includes('/src/components/SendsPage.tsx') ||
                 normalized.includes('/src/components/TotpCodesPage.tsx') ||
+                normalized.includes('/src/components/DomainRulesPage.tsx') ||
                 normalized.includes('/src/components/BackupCenterPage.tsx') ||
                 normalized.includes('/src/components/backup-center/') ||
                 normalized.includes('/src/components/SettingsPage.tsx') ||
@@ -96,7 +111,7 @@ export default defineConfig(({ mode }) => {
                 normalized.includes('/src/components/AdminPage.tsx')
               )
             ) {
-              return 'workspace-suite';
+              return 'app-suite';
             }
 
             return undefined;