Skip to content

Commit 504aabd

Browse files
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)
1 parent c7bbab5 commit 504aabd

File tree

1 file changed

+58
-33
lines changed

1 file changed

+58
-33
lines changed

vite.config.mts

Lines changed: 58 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,9 @@ const VITE_REMOTE_DEV = process.env.VITE_REMOTE_DEV === 'true'
1919
const DISABLE_TEMPLATES_PROXY = process.env.DISABLE_TEMPLATES_PROXY === 'true'
2020
const DISABLE_VUE_PLUGINS = false // Always enable Vue DevTools for development
2121

22+
// CLOUD PERFORMANCE: ImportMap entries for Vue/PrimeVue temporarily disabled (see generateImportMapPlugin below)
23+
// This reduces 600+ HTTP requests to ~8 bundled files for better cloud deployment performance
24+
2225
// Hardcoded to staging cloud for testing frontend changes against cloud backend
2326
const DEV_SERVER_COMFYUI_URL =
2427
process.env.DEV_SERVER_COMFYUI_URL || 'https://stagingcloud.comfy.org'
@@ -122,39 +125,61 @@ export default defineConfig({
122125
: [vue()]),
123126
comfyAPIPlugin(IS_DEV),
124127
generateImportMapPlugin([
125-
{
126-
name: 'vue',
127-
pattern: 'vue',
128-
entry: './dist/vue.esm-browser.prod.js'
129-
},
130-
{
131-
name: 'vue-i18n',
132-
pattern: 'vue-i18n',
133-
entry: './dist/vue-i18n.esm-browser.prod.js'
134-
},
135-
{
136-
name: 'primevue',
137-
pattern: /^primevue\/?.*/,
138-
entry: './index.mjs',
139-
recursiveDependence: true
140-
},
141-
{
142-
name: '@primevue/themes',
143-
pattern: /^@primevue\/themes\/?.*/,
144-
entry: './index.mjs',
145-
recursiveDependence: true
146-
},
147-
{
148-
name: '@primevue/forms',
149-
pattern: /^@primevue\/forms\/?.*/,
150-
entry: './index.mjs',
151-
recursiveDependence: true,
152-
override: {
153-
'@primeuix/forms': {
154-
entry: ''
155-
}
156-
}
157-
}
128+
// TEMPORARY CLOUD OPTIMIZATION: Vue/PrimeVue entries commented out for better performance
129+
//
130+
// CONTEXT: ImportMap generates 600+ individual files (recursiveDependence: true) which
131+
// causes poor performance in cloud deployment due to lack of CDN cache headers.
132+
// This selective approach bundles Vue/PrimeVue normally (~3-5 chunks) while preserving
133+
// the ImportMap system for future extension API imports.
134+
//
135+
// PERFORMANCE IMPACT:
136+
// - Before: 600+ HTTP requests to dist/assets/lib/ directory
137+
// - After: ~8 bundled JS files with proper compression
138+
// - Cloud load time improvement: significant reduction in initial requests
139+
//
140+
// LONG-TERM CONSIDERATIONS:
141+
// 1. Extension ecosystem: Core extensions don't import PrimeVue directly,
142+
// so this change doesn't break existing extensions
143+
// 2. Future extensions: May need ImportMap for dynamic Vue component imports
144+
// 3. Deployment optimization: Implement proper CDN cache headers as permanent solution
145+
// 4. Hybrid approach: Could selectively enable ImportMap for specific packages only
146+
//
147+
// TO RESTORE FULL IMPORTMAP: Uncomment entries below and rebuild
148+
// NOTE: Verify extension compatibility before restoring in production
149+
//
150+
// {
151+
// name: 'vue',
152+
// pattern: 'vue',
153+
// entry: './dist/vue.esm-browser.prod.js'
154+
// },
155+
// {
156+
// name: 'vue-i18n',
157+
// pattern: 'vue-i18n',
158+
// entry: './dist/vue-i18n.esm-browser.prod.js'
159+
// },
160+
// {
161+
// name: 'primevue',
162+
// pattern: /^primevue\/?.*/,
163+
// entry: './index.mjs',
164+
// recursiveDependence: true // This generates 600+ files
165+
// },
166+
// {
167+
// name: '@primevue/themes',
168+
// pattern: /^@primevue\/themes\/?.*/,
169+
// entry: './index.mjs',
170+
// recursiveDependence: true
171+
// },
172+
// {
173+
// name: '@primevue/forms',
174+
// pattern: /^@primevue\/forms\/?.*/,
175+
// entry: './index.mjs',
176+
// recursiveDependence: true,
177+
// override: {
178+
// '@primeuix/forms': {
179+
// entry: ''
180+
// }
181+
// }
182+
// }
158183
]),
159184

160185
Icons({

0 commit comments

Comments
 (0)