mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-02-03 06:47:33 +00:00
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:
@@ -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({
|
||||
|
||||
Reference in New Issue
Block a user