docs: update build pattern conversion plan with consistent naming and mode handling

- Change build:* naming from hyphen to colon (build:web-dev → build:web:dev) - Add missing build:web:test and build:web:prod scripts - Update build:electron:dev to include electron startup (build + start) - Remove hardcoded --mode electron to allow proper mode override - Add comprehensive mode override behavior documentation - Fix mode conflicts between hardcoded and passed --mode arguments The plan now properly supports: - Development builds with default --mode development - Testing builds with explicit --mode test override - Production builds with explicit --mode production override - Consistent naming across all platforms (web, capacitor, electron)
2025-07-09 13:13:44 +00:00
parent 95b038c717
commit b35c1d693f
11 changed files with 4209 additions and 0 deletions
--- a/vite.config.optimized.mts
+++ b/vite.config.optimized.mts
@@ -0,0 +1,151 @@
+import { defineConfig, UserConfig } from "vite";
+import vue from "@vitejs/plugin-vue";
+import dotenv from "dotenv";
+import { loadAppConfig } from "./vite.config.utils.mts";
+import path from "path";
+import { fileURLToPath } from 'url';
+
+// Load environment variables
+dotenv.config();
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+/**
+ * Optimized Vite configuration for Vue 3 + vue-facing-decorator
+ * with enhanced code splitting and lazy loading capabilities
+ * 
+ * @author Matthew Raymer
+ * @version 1.0.0
+ */
+export async function createOptimizedBuildConfig(mode: string): Promise<UserConfig> {
+  const appConfig = await loadAppConfig();
+  const isCapacitor = mode === "capacitor";
+  const isElectron = mode === "electron";
+  const isNative = isCapacitor || isElectron;
+
+  // Set platform and disable PWA for native platforms
+  process.env.VITE_PLATFORM = mode;
+  process.env.VITE_PWA_ENABLED = isNative ? 'false' : 'true';
+  process.env.VITE_DISABLE_PWA = isNative ? 'true' : 'false';
+
+  if (isNative) {
+    process.env.VITE_PWA_ENABLED = 'false';
+  }
+
+  return {
+    base: "/",
+    plugins: [vue()],
+    server: {
+      port: parseInt(process.env.VITE_PORT || "8080"),
+      fs: { strict: false },
+      // CORS headers disabled to allow images from any domain
+      // This means SharedArrayBuffer is unavailable, but absurd-sql
+      // will automatically fall back to IndexedDB mode which still works
+    },
+    build: {
+      outDir: "dist",
+      assetsDir: 'assets',
+      chunkSizeWarningLimit: 1000,
+      rollupOptions: {
+        external: isNative 
+          ? ['@capacitor/app'] 
+          : [],
+        output: {
+          format: 'esm',
+          generatedCode: {
+            preset: 'es2015'
+          },
+          // Enhanced manual chunks for better code splitting
+          manualChunks: {
+            // Vendor chunks for better caching
+            'vue-vendor': ['vue', 'vue-router', 'pinia'],
+            'ui-vendor': ['@fortawesome/fontawesome-svg-core', '@fortawesome/vue-fontawesome'],
+            'crypto-vendor': ['@ethersproject/wallet', '@ethersproject/hdnode', 'ethereum-cryptography'],
+            'sql-vendor': ['@jlongster/sql.js', 'absurd-sql', 'dexie'],
+            'qr-vendor': ['qrcode', 'jsqr', 'vue-qrcode-reader'],
+            'three-vendor': ['three', '@tweenjs/tween.js'],
+            'utils-vendor': ['luxon', 'ramda', 'zod', 'axios'],
+            // Platform-specific chunks
+            ...(isCapacitor && {
+              'capacitor-vendor': ['@capacitor/core', '@capacitor/app', '@capacitor/camera']
+            }),
+            ...(isElectron && {
+              'electron-vendor': ['electron']
+            })
+          }
+        }
+      },
+      // Optimize chunk loading
+      target: 'es2015',
+      minify: 'terser',
+      terserOptions: {
+        compress: {
+          drop_console: process.env.NODE_ENV === 'production',
+          drop_debugger: true
+        }
+      }
+    },
+    worker: {
+      format: 'es',
+      plugins: () => []
+    },
+    define: {
+      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
+      'process.env.VITE_PLATFORM': JSON.stringify(mode),
+      'process.env.VITE_PWA_ENABLED': JSON.stringify(!isNative),
+      'process.env.VITE_DISABLE_PWA': JSON.stringify(isNative),
+      __dirname: JSON.stringify(process.cwd()),
+      __IS_MOBILE__: JSON.stringify(isCapacitor),
+      __IS_ELECTRON__: JSON.stringify(isElectron),
+      __USE_QR_READER__: JSON.stringify(!isCapacitor),
+      'process.platform': JSON.stringify('browser'),
+      'process.version': JSON.stringify('v16.0.0'),
+      'process.env.NODE_DEBUG': JSON.stringify(false),
+      'global.process': JSON.stringify({
+        platform: 'browser',
+        version: 'v16.0.0',
+        env: { NODE_DEBUG: false }
+      })
+    },
+    resolve: {
+      alias: {
+        '@': path.resolve(__dirname, 'src'),
+        '@nostr/tools': path.resolve(__dirname, 'node_modules/@nostr/tools'),
+        '@nostr/tools/nip06': path.resolve(__dirname, 'node_modules/@nostr/tools/nip06'),
+        ...appConfig.aliasConfig,
+        'path': path.resolve(__dirname, './src/utils/node-modules/path.js'),
+        'fs': path.resolve(__dirname, './src/utils/node-modules/fs.js'),
+        'crypto': path.resolve(__dirname, './src/utils/node-modules/crypto.js'),
+        'dexie-export-import': path.resolve(__dirname, 'node_modules/dexie-export-import')
+      }
+    },
+    optimizeDeps: {
+      include: [
+        '@nostr/tools',
+        '@nostr/tools/nip06',
+        'vue',
+        'vue-router',
+        'pinia',
+        'vue-facing-decorator'
+      ],
+      exclude: isNative ? [
+        'register-service-worker',
+        'workbox-window',
+        'web-push',
+        'serviceworker-webpack-plugin',
+        'vite-plugin-pwa',
+        '@vite-pwa/vue'
+      ] : []
+    },
+    // Enhanced performance optimizations
+    esbuild: {
+      target: 'es2015',
+      supported: {
+        'bigint': true
+      }
+    }
+  };
+}
+
+export default defineConfig(async () => createOptimizedBuildConfig('web'));