Slow initial page load with Vite dev server - is Vuetify to blame?

[MetRonnie]

I have recently switched from vue-cli-service to vite. I'm using vite-plugin-vuetify. With vue-cli-service and webpack, the dev server used to take a minute to start as webpack did its thing, but then the page was ready at that point. But with vite, the dev server starts very quickly and then the initial page load takes a while. When I say initial I mean the first page load each time I start the dev server, even if it's already optimized the dependencies and no files have changed so things ought to be cached.

I am not convinced this slow initial load is supposed to be the case. Searching online does not get many recent results for "vite dev server slow initial page load", other than some suggestions to use optimizeDeps.include in vite.config.js which does not make any difference if I add vuetify.

Looking at the network panel of devtools the main bottleneck seems to be serving individual component CSS files

Part of the output of vite -d:

vite:import-analysis 0.08ms [0 imports rewritten] node_modules/vuetify/lib/components/VLayout/VLayoutItem.css
vite:transform 9430.35ms /node_modules/vuetify/lib/components/VLayout/VLayoutItem.css
vite:hmr [self-accepts] node_modules/vuetify/lib/components/VSlideGroup/VSlideGroup.css
vite:import-analysis 0.09ms [0 imports rewritten] node_modules/vuetify/lib/components/VSlideGroup/VSlideGroup.css
vite:transform 9427.82ms /node_modules/vuetify/lib/components/VSlideGroup/VSlideGroup.css
vite:hmr [self-accepts] node_modules/vuetify/lib/labs/VDataTable/VDataTableFooter.css
vite:import-analysis 0.08ms [0 imports rewritten] node_modules/vuetify/lib/labs/VDataTable/VDataTableFooter.css
vite:transform 9424.57ms /node_modules/vuetify/lib/labs/VDataTable/VDataTableFooter.css
vite:time 8049.98ms /node_modules/vuetify/lib/labs/VDataTable/VDataTableFooter.css

(And btw I don't know why it would load the styles for VTimeline as I'm not using that in my app.)

Click to show vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vuetify from 'vite-plugin-vuetify'
const path = require('path')

export default defineConfig({
  base: '',
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
      vue: '@vue/compat',
      react: 'preact/compat',
      'react-dom': 'preact/compat'
    }
  },
  plugins: [
    vue(),
    vuetify()
  ]
})

Click to show src/plugins/vuetify.js

import { createVuetify } from 'vuetify'
import { aliases, mdi } from 'vuetify/iconsets/mdi-svg'
import { VDataTable, VDataTableFooter } from 'vuetify/labs/VDataTable'
import colors from 'vuetify/lib/util/colors'

export default createVuetify({
  theme: {
    defaultTheme: 'light',
    themes: {
      light: {
        dark: false,
        colors: {
          primary: colors.lightBlue.accent4,
          'primary-darken-1': colors.lightBlue.darken4,
        }
      }
    }
  },
  icons: {
    defaultSet: 'mdi',
    aliases,
    sets: {
      mdi
    }
  },
  components: {
    VDataTable,
    VDataTableFooter
  }
})

[KaelWD]

vuetifyjs.com uses vite and is ready in under 6 seconds even though we import sass instead which should be slower.
I don't know why you have VTimeline loaded if you aren't using it, make sure you don't have any imports from vuetify/lib or vuetify/components

[MetRonnie]

Ah thanks, good to know I'm not going insane! One possibility I hadn't thought of is that it's simply due to our network file system at work, I'll have to test the project on my personal laptop at some point.

And yes I had a few instances of importing components from vuetify/components, changing those to vuetify/components/VWhatever got rid of the unneeded CSS loading in the dev serve but didn't really speed it up at all.

[KaelWD]

Yeah running straight off NFS could definitely impact performance, there's lots of tiny random reads.