From 504aabd097a75e37d0c3e878adebacdfbb4b7034 Mon Sep 17 00:00:00 2001
From: Christian Byrne <cbyrne@comfy.org>
Date: Thu, 18 Sep 2025 15:13:29 -0700
Subject: [PATCH] Disable import map on cloud (#5642)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary

Disabled ImportMap generation for Vue/PrimeVue dependencies to optimize
cloud deployment performance by reducing 600+ HTTP requests to 8 bundled
files.

## Changes

- **What**: Commented out [ImportMap
entries](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type/importmap)
for Vue, PrimeVue, and related packages in [Vite
configuration](https://vitejs.dev/config/)
- **Performance**: Reduced from 600+ individual files to ~8 bundled
chunks with proper compression
- **Deployment**: Improved cloud load times by eliminating excessive
HTTP requests to `static/assets/lib/` directory

## Review Focus

Temporary optimization approach and extension ecosystem compatibility.
Verify that core extensions remain functional without ImportMap-based
Vue/PrimeVue imports. Long-term solution should implement CDN cache
headers and etag for frontend version rather than disabling ImportMap
entirely.

## Context

The ImportMap plugin with `recursiveDependence: true` generates
individual files for every PrimeVue component, creating performance
bottlenecks in cloud deployment. This selective approach maintains the
ImportMap system for future extension API imports while bundling
framework dependencies normally.

## Restoration Path

To restore full ImportMap functionality, uncomment the entries in
`vite.config.mts` and verify extension compatibility before production
deployment.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-5642-Disable-import-map-on-cloud-2726d73d36508116acdff66756c98473)
by [Unito](https://www.unito.io)
---
 vite.config.mts | 91 +++++++++++++++++++++++++++++++------------------
 1 file changed, 58 insertions(+), 33 deletions(-)

diff --git a/vite.config.mts b/vite.config.mts
index 36c1fa7cc..42bb10cbb 100644
--- a/vite.config.mts
+++ b/vite.config.mts
@@ -19,6 +19,9 @@ const VITE_REMOTE_DEV = process.env.VITE_REMOTE_DEV === 'true'
 const DISABLE_TEMPLATES_PROXY = process.env.DISABLE_TEMPLATES_PROXY === 'true'
 const DISABLE_VUE_PLUGINS = false // Always enable Vue DevTools for development
 
+// CLOUD PERFORMANCE: ImportMap entries for Vue/PrimeVue temporarily disabled (see generateImportMapPlugin below)
+// This reduces 600+ HTTP requests to ~8 bundled files for better cloud deployment performance
+
 // Hardcoded to staging cloud for testing frontend changes against cloud backend
 const DEV_SERVER_COMFYUI_URL =
   process.env.DEV_SERVER_COMFYUI_URL || 'https://stagingcloud.comfy.org'
@@ -122,39 +125,61 @@ export default defineConfig({
       : [vue()]),
     comfyAPIPlugin(IS_DEV),
     generateImportMapPlugin([
-      {
-        name: 'vue',
-        pattern: 'vue',
-        entry: './dist/vue.esm-browser.prod.js'
-      },
-      {
-        name: 'vue-i18n',
-        pattern: 'vue-i18n',
-        entry: './dist/vue-i18n.esm-browser.prod.js'
-      },
-      {
-        name: 'primevue',
-        pattern: /^primevue\/?.*/,
-        entry: './index.mjs',
-        recursiveDependence: true
-      },
-      {
-        name: '@primevue/themes',
-        pattern: /^@primevue\/themes\/?.*/,
-        entry: './index.mjs',
-        recursiveDependence: true
-      },
-      {
-        name: '@primevue/forms',
-        pattern: /^@primevue\/forms\/?.*/,
-        entry: './index.mjs',
-        recursiveDependence: true,
-        override: {
-          '@primeuix/forms': {
-            entry: ''
-          }
-        }
-      }
+      // TEMPORARY CLOUD OPTIMIZATION: Vue/PrimeVue entries commented out for better performance
+      //
+      // CONTEXT: ImportMap generates 600+ individual files (recursiveDependence: true) which
+      // causes poor performance in cloud deployment due to lack of CDN cache headers.
+      // This selective approach bundles Vue/PrimeVue normally (~3-5 chunks) while preserving
+      // the ImportMap system for future extension API imports.
+      //
+      // PERFORMANCE IMPACT:
+      // - Before: 600+ HTTP requests to dist/assets/lib/ directory
+      // - After: ~8 bundled JS files with proper compression
+      // - Cloud load time improvement: significant reduction in initial requests
+      //
+      // LONG-TERM CONSIDERATIONS:
+      // 1. Extension ecosystem: Core extensions don't import PrimeVue directly,
+      //    so this change doesn't break existing extensions
+      // 2. Future extensions: May need ImportMap for dynamic Vue component imports
+      // 3. Deployment optimization: Implement proper CDN cache headers as permanent solution
+      // 4. Hybrid approach: Could selectively enable ImportMap for specific packages only
+      //
+      // TO RESTORE FULL IMPORTMAP: Uncomment entries below and rebuild
+      // NOTE: Verify extension compatibility before restoring in production
+      //
+      // {
+      //   name: 'vue',
+      //   pattern: 'vue',
+      //   entry: './dist/vue.esm-browser.prod.js'
+      // },
+      // {
+      //   name: 'vue-i18n',
+      //   pattern: 'vue-i18n',
+      //   entry: './dist/vue-i18n.esm-browser.prod.js'
+      // },
+      // {
+      //   name: 'primevue',
+      //   pattern: /^primevue\/?.*/,
+      //   entry: './index.mjs',
+      //   recursiveDependence: true  // This generates 600+ files
+      // },
+      // {
+      //   name: '@primevue/themes',
+      //   pattern: /^@primevue\/themes\/?.*/,
+      //   entry: './index.mjs',
+      //   recursiveDependence: true
+      // },
+      // {
+      //   name: '@primevue/forms',
+      //   pattern: /^@primevue\/forms\/?.*/,
+      //   entry: './index.mjs',
+      //   recursiveDependence: true,
+      //   override: {
+      //     '@primeuix/forms': {
+      //       entry: ''
+      //     }
+      //   }
+      // }
     ]),
 
     Icons({