CODEWITHSUNDEEP
javascripttypescriptvue.jsvuejs3vite
JDev
JDev

Reputation: 2541

How to speed up ViteJs development mode

The problem is that in development mode, the server is mega slow.

I start the server, then start the page in the browser and wait 3–6 minutes for the page to load! Initially, ViteJs downloads a few kilobytes of resources, then the request is in the "pending" state for 2–3 minutes.

Then, the loading of all resources starts every time. Although I also specified in the config that all CSS should be local.

Page reloading is also very slow.

I start the project like this:

vite

Here is my config:

import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import {resolve} from 'path'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      "@": resolve(__dirname, "./src"),
    },
  },
  publicDir: 'public',
  server: {
    port: 8080,
    watch: {
      usePolling: true,
      ignored: ['!**/bundle/**', '!**/lib/**']
    }
  },
  css: {
    modules: {
      scopeBehaviour: "local"
    }
  },
  preview: {
    port: 8080,
  }
})

Upvotes: 5

Views: 10062

Answers (2)

JDev
JDev

Reputation: 2541

The problem is in WSL2.

I tried to start Vite from Windows, and start page loaded in 1 second!

Upvotes: 8

NOname
NOname

Reputation: 55

Vite is not a suitable tool for large projects (with 1000+ source files), because it does not bundle the source code for you during development, and in order to reload, your browser needs to make thousands of requests.

Upvotes: 2

Related Questions