Description:
When developing a Vue app using the frappeui() Vite plugin, the initial page load in the development server takes a significantly long time (sometimes 5-10+ seconds) and downloads over 55+ MB of unbundled JavaScript files.
Steps to Reproduce:
Create a standard Vue/Vite project with frappe-ui and the frappeui Vite plugin configured.
Start the development server (yarn dev or npm run dev).
Open the app in Chrome with "Disable cache" checked in the Network tab (simulating a first-time start or DevContainer reload).
Observe the Network tab: Vite serves hundreds/thousands of individual
.vue
and
.js
file requests for every component used and their deep dependencies (like feather-icons, floating-ui, etc.), totaling 55MB+.
The Root Cause:
The issue stems from how the FrappeUIResolver inside the Vite plugin handles auto-imports. Since the resolver rewrites component tags (e.g., ) to point directly to the raw, unbundled source files (frappe-ui/src/components/Button/Button.vue), it bypasses Vite's optimizeDeps pre-bundling mechanism.
Because Vite is forced to serve the deep, unbundled source files instead of a single cached chunk, the browser is overwhelmed by the sheer number of sequential HTTP requests needed to resolve the entire dependency tree of those UI components.
Proposed Solution / Feature Request:
While browser disk caching mitigates this on subsequent reloads, the initial cold start (especially in Docker/DevContainers where filesystem performance is constrained) is painfully slow.
Could the auto-import resolver be updated, or a mechanism be introduced that allows Vite to properly pre-bundle frappe-ui via optimizeDeps during development so it only serves a single chunk?
Description:
When developing a Vue app using the frappeui() Vite plugin, the initial page load in the development server takes a significantly long time (sometimes 5-10+ seconds) and downloads over 55+ MB of unbundled JavaScript files.
Steps to Reproduce:
Create a standard Vue/Vite project with frappe-ui and the frappeui Vite plugin configured.
Start the development server (yarn dev or npm run dev).
Open the app in Chrome with "Disable cache" checked in the Network tab (simulating a first-time start or DevContainer reload).
Observe the Network tab: Vite serves hundreds/thousands of individual
.vue
and
.js
file requests for every component used and their deep dependencies (like feather-icons, floating-ui, etc.), totaling 55MB+.
The Root Cause:
The issue stems from how the FrappeUIResolver inside the Vite plugin handles auto-imports. Since the resolver rewrites component tags (e.g., ) to point directly to the raw, unbundled source files (frappe-ui/src/components/Button/Button.vue), it bypasses Vite's optimizeDeps pre-bundling mechanism.
Because Vite is forced to serve the deep, unbundled source files instead of a single cached chunk, the browser is overwhelmed by the sheer number of sequential HTTP requests needed to resolve the entire dependency tree of those UI components.
Proposed Solution / Feature Request:
While browser disk caching mitigates this on subsequent reloads, the initial cold start (especially in Docker/DevContainers where filesystem performance is constrained) is painfully slow.
Could the auto-import resolver be updated, or a mechanism be introduced that allows Vite to properly pre-bundle frappe-ui via optimizeDeps during development so it only serves a single chunk?