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_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({