search

logue / vite-vuetify-ts-starter

@vitejs + @vuejs 3+@Vuetifyjs 3
MIT License
170 stars 37 forks source link

Running on Windows and node 18.12.1 is very slow #14

Open alstelmach opened 1 year ago

alstelmach commented 1 year ago

Hello 👋 I've been trying to run it on Windows, with node.js 18.12.1, but it's so slow, could we somehow speed it up or find the reason for this?

image

I've found out that some people were already struggling with similar problems: https://stackoverflow.com/questions/73204586/speed-up-vitejs-dev-mode-vue-3

I am not very into frontend programming, but I think those problems could be related to vite.config.js. Could we look into this?? 😄 Thanks in advance

AvinoamSebbah commented 1 year ago

Have the same problem..

logue commented 1 year ago

This issue is due to the implementation of treeshaeking even in dev mode. https://vuetifyjs.com/en/features/treeshaking/

I'm thinking of a workaround now.

logue commented 1 year ago

I figured out the cause. It was a Sass customization process.

https://vuetifyjs.com/en/features/sass-variables/

In order to use pictograms in this template, the default Roboto font is loaded with Noto Color Emoji, and the monospaced font is Roboto Mono font.

There is nothing that can be done on the template side because of the specification of the sass loading process on the Vuetify side.

By commenting out styles: { configFile: 'src/styles/settings.scss' } in vite.config.ts, it is possible to deal with it for the time being.

ramseyfeng commented 1 year ago

On mac it's also very slow... Even after commenting out styles: { configFile: 'src/styles/settings.scss' } in vite.config.ts, the First contentful paint is still very slow

image
ramseyfeng commented 1 year ago

On mac it's also very slow... Even after commenting out styles: { configFile: 'src/styles/settings.scss' } in vite.config.ts, the First contentful paint is still very slow image

For ths issue on my PC, commenting out the webfont loader and everything works fine.

logue commented 1 year ago

This template allows you to override all Vuetify settings in advance, so that may be the reason. As with the CSS issue earlier, please try playing around with the settings in src/plugin/vuetify.ts.(e.g. leave the contents of createVuetify blank)