Vite dev hangs indefinitely without errors on page with many components and imports
Problem
Describe the bug I use SvelteKit. I have a somewhat complex page that contains quite a lot of components and imported functions. I had sporadic problems with this page hanging in the browser (both Firefox and Chrome). However, no error or notification in the vite cli. I was usually able to fix this by restarting the dev server several times whether or not in combination with restarting the browser. Other, simpler pages, always just kept working. Restarting my computer always works. In recent days, I have been adding extra functionality, and the more I added, the more often the page kept hanging and the harder I got it to work again. When I get the page online (after frequently restarting everything I get restarted), everything just works. Until I make an adjustment in the code and because of the HMR the thing hangs again. I don't see any other pattern to it. The problem does not occur when I build and preview the page, the production code always works. It's driving me crazy, I can hardly get anything developed. Reproduction I can't build a reproduction, there is no pattern. Steps to reproduce It happens only on the dev server. I can find no pattern, cannot pinpoint a cause and thus cannot foresee any reproduction. There is nothing wrong with the code itself, the production build works perfectly. The debug logs below are what I get when browsing to /leerlijn/54159. It starts doing it's thing, and then just randomly stops at some point. System Info [code block] Us
Error Output
error or notification in the vite cli. I was usually able to fix this by restarting the dev server several times whether or not in combination with restarting the browser. Other, simpler pages, always just
Unverified for your environment
Select your OS to check compatibility.
1 Fix
Optimize Vite Dev Server Configuration for Complex SvelteKit Pages
The Vite dev server may hang due to excessive file watching or hot module replacement (HMR) issues when dealing with a large number of components and imports. This can lead to performance bottlenecks, especially in development mode, where the server attempts to keep track of many changes in real-time, causing it to become unresponsive.
Awaiting Verification
Be the first to verify this fix
- 1
Increase Vite's HMR Timeout
Modify the Vite configuration to increase the HMR timeout, allowing more time for the server to process changes before timing out.
javascriptexport default defineConfig({ server: { hmr: { timeout: 30000 // Increase timeout to 30 seconds } } }); - 2
Limit File Watching
Adjust the Vite configuration to limit the number of files being watched. This can help reduce the load on the dev server when dealing with many components.
javascriptexport default defineConfig({ server: { watch: { ignored: ['**/node_modules/**', '**/dist/**'] // Ignore unnecessary directories } } }); - 3
Enable Vite's Optimized Dependencies
Enable the optimization of dependencies in the Vite configuration. This can help improve performance by pre-bundling dependencies, reducing the load during development.
javascriptexport default defineConfig({ optimizeDeps: { include: ['your-large-dependency'] // Add any large dependencies here } }); - 4
Use Dynamic Imports for Components
Refactor your code to use dynamic imports for components that are not immediately needed. This will reduce the initial load and improve performance during development.
javascriptconst MyComponent = () => import('./MyComponent.svelte'); - 5
Monitor Resource Usage
Use browser developer tools to monitor CPU and memory usage while the dev server is running. Identify any components or imports that may be causing excessive resource consumption.
N/AN/A
Validation
Confirm the fix by running the Vite dev server and observing if the hanging issue persists. Monitor the console for any errors and check if the page loads without hanging after making changes. Performance should improve with the adjustments made.
Sign in to verify this fix
Environment
Submitted by
Alex Chen
2450 rep