Disable import map on cloud (#5642)

## 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)
This commit is contained in:
Christian Byrne
2025-09-18 15:13:29 -07:00
committed by GitHub
parent c7bbab53a6
commit 504aabd097

View File

@@ -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_TEMPLATES_PROXY = process.env.DISABLE_TEMPLATES_PROXY === 'true'
const DISABLE_VUE_PLUGINS = false // Always enable Vue DevTools for development 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 // Hardcoded to staging cloud for testing frontend changes against cloud backend
const DEV_SERVER_COMFYUI_URL = const DEV_SERVER_COMFYUI_URL =
process.env.DEV_SERVER_COMFYUI_URL || 'https://stagingcloud.comfy.org' process.env.DEV_SERVER_COMFYUI_URL || 'https://stagingcloud.comfy.org'
@@ -122,39 +125,61 @@ export default defineConfig({
: [vue()]), : [vue()]),
comfyAPIPlugin(IS_DEV), comfyAPIPlugin(IS_DEV),
generateImportMapPlugin([ generateImportMapPlugin([
{ // TEMPORARY CLOUD OPTIMIZATION: Vue/PrimeVue entries commented out for better performance
name: 'vue', //
pattern: 'vue', // CONTEXT: ImportMap generates 600+ individual files (recursiveDependence: true) which
entry: './dist/vue.esm-browser.prod.js' // 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.
name: 'vue-i18n', //
pattern: 'vue-i18n', // PERFORMANCE IMPACT:
entry: './dist/vue-i18n.esm-browser.prod.js' // - 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
name: 'primevue', //
pattern: /^primevue\/?.*/, // LONG-TERM CONSIDERATIONS:
entry: './index.mjs', // 1. Extension ecosystem: Core extensions don't import PrimeVue directly,
recursiveDependence: true // 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
name: '@primevue/themes', // 4. Hybrid approach: Could selectively enable ImportMap for specific packages only
pattern: /^@primevue\/themes\/?.*/, //
entry: './index.mjs', // TO RESTORE FULL IMPORTMAP: Uncomment entries below and rebuild
recursiveDependence: true // NOTE: Verify extension compatibility before restoring in production
}, //
{ // {
name: '@primevue/forms', // name: 'vue',
pattern: /^@primevue\/forms\/?.*/, // pattern: 'vue',
entry: './index.mjs', // entry: './dist/vue.esm-browser.prod.js'
recursiveDependence: true, // },
override: { // {
'@primeuix/forms': { // name: 'vue-i18n',
entry: '' // 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({ Icons({