Vite client warm up cost too much time #694

KyleRicardo · 2022-11-28T07:01:34Z

Vite is known by its blazing fast startup time and HMR time.

Now Docus usually takes tens of seconds to startup, it's almost unbearable. More suprisingly, no one raised an issue like this. My behemoth Java backend project takes only 10 seconds to start up, while Docus takes amlost 1 minute. Is this even normal?

Perhaps I should keep embracing vitepress(even it's still alpha) rather than this immature framework.

atinux · 2022-11-28T12:20:55Z

Thanks for your kind words @KyleRicardo 🥰

You are free to use any framework you want, this is open source and all the work you use is free to remember.

It starts in 10s on my computer though, but seems that we may have some issues with Windows 🤔

Could you check on https://stackblitz.com/github/nuxt-themes/docus-starter to see how long it starts on your computer?

KyleRicardo · 2022-11-28T12:27:04Z

Amusingly even longer.

Tahul · 2022-11-28T12:32:46Z

@KyleRicardo ;

Could you run npx nuxi info and give us the output?

Also, could you post your lockfile here?

Thanks a lot.

atinux · 2022-11-28T12:44:46Z

Also, can you run with DEBUG=1 npm run dev and spot what lines takes the most time?

We are really sorry about this experience and we will find a fix ASAP

KyleRicardo · 2022-11-28T12:57:05Z

npx nuxi info output:

Nuxi 3.0.0                                                                                                    20:54:48
                                                                                                              20:54:49
RootDir: C:/Users/kyler                                                                                       20:54:49
Nuxt project info:                                                                                            20:54:49

------------------------------
- Operating System: `Windows_NT`
- Node Version:     `v18.12.1`
- Nuxt Version:     `0.0.0`
- Nitro Version:    `-`
- Package Manager:  `[email protected]`
- Builder:          `webpack`
- User Config:      `-`
- Runtime Modules:  `-`
- Build Modules:    `-`
------------------------------

pnpm-lock.zip

Tahul · 2022-11-28T13:00:02Z

DEBUG=1 run would help, yeah.

From the output of your screenshots, Vite build seem to be taking 7000ms, which is fairly normal for Docus project.

Running in debug mode and providing the output would be really helpful as well to find out what is taking so much time.

KyleRicardo · 2022-11-28T13:01:22Z

Tried to run DEBUG=1 npm run dev but this is amusing. I'm using Windows...note that.
In powershell I need to use $env:DEBUG=1;pnpm dev.
I will post the output here:

[nuxt] modules:before: 0.104ms                                                                                20:52:59
[nuxt] kit:compatibility: 2.546ms                                                                             20:52:59
[nuxt] kit:compatibility: 2.686ms                                                                             20:52:59
[nuxt] kit:compatibility: 2.821ms                                                                             20:52:59
[nuxt] kit:compatibility: 3.066ms                                                                             20:52:59
[nuxt] kit:compatibility: 3.193ms                                                                             20:52:59
[nuxt] kit:compatibility: 3.172ms                                                                             20:52:59
[nuxt] kit:compatibility: 3.318ms                                                                             20:52:59
[nuxt] kit:compatibility: 3.411ms                                                                             20:52:59
[nuxt] kit:compatibility: 0.01ms                                                                              20:52:59
[nuxt] kit:compatibility: 0.109ms                                                                             20:52:59
[nuxt] kit:compatibility: 0.227ms                                                                             20:52:59
[nuxt] pinceau:options: 0.079ms                                                                               20:52:59
[nuxt] kit:compatibility: 0.218ms                                                                             20:53:00
[nuxt] kit:compatibility: 0.011ms                                                                             20:53:00
[nuxt] kit:compatibility: 0.146ms                                                                             20:53:00
[nuxt] kit:compatibility: 0.168ms                                                                             20:53:00
[nuxt] component-meta:transformers: 0.008ms                                                                   20:53:00
[nuxt] kit:compatibility: 0.169ms                                                                             20:53:00
[nuxt] kit:compatibility: 17.391ms                                                                            20:53:00
[nuxt] kit:compatibility: 5.011ms                                                                             20:53:00
[nuxt] content:context: 0.327ms                                                                               20:53:00
[nuxt] kit:compatibility: 0.009ms                                                                             20:53:00

 ERROR  (node:30220) ExperimentalWarning: The Fetch API is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)

[nuxt] kit:compatibility: 0.007ms                                                                             20:53:00
[nuxt] kit:compatibility: 0.006ms                                                                             20:53:00
[nuxt] kit:compatibility: 0.01ms                                                                              20:53:00
[nuxt] kit:compatibility: 0.542ms                                                                             20:53:00
[nuxt] kit:compatibility: 0.632ms                                                                             20:53:00
[nuxt] kit:compatibility: 0.804ms                                                                             20:53:00
[nuxt] kit:compatibility: 0.896ms                                                                             20:53:00
[nuxt] kit:compatibility: 0.986ms                                                                             20:53:00
[nuxt] kit:compatibility: 1.077ms                                                                             20:53:00
[nuxt] kit:compatibility: 1.165ms                                                                             20:53:00
[nuxt] kit:compatibility: 1.25ms                                                                              20:53:00
[nuxt] kit:compatibility: 1.337ms                                                                             20:53:00
[nuxt] imports:sources: 5.521ms                                                                               20:53:00
[nuxt] imports:dirs: 0.048ms                                                                                  20:53:00
[nuxt] imports:extend: 0.074ms                                                                                20:53:00
[nuxt] modules:done: 0.007ms                                                                                  20:53:00
[nuxt] nitro:config: 30.221ms                                                                                 20:53:00
[nuxt] nitro:init: 52.467ms                                                                                   20:53:00
[nuxt] ready: 0.006ms                                                                                         20:53:00
[nuxt] listen: 0.005ms                                                                                        20:53:00
[nuxt] prepare:types: 1.853ms                                                                                 20:53:00
[nuxt] components:dirs: 1.301ms                                                                               20:53:00
[nuxt] app:resolve: 3.776ms                                                                                   20:53:00
[nuxt] components:extend: 0.222ms                                                                             20:53:00
[nuxt] app:templates: 17.401ms                                                                                20:53:00
[nuxt] pages:extend: 3.905ms                                                                                  20:53:00
[nuxt] app:templatesGenerated: 0.007ms                                                                        20:53:00
[nuxt] build:before: 0.007ms                                                                                  20:53:00
[nuxt] vite:extend: 32.691s                                                                                   20:53:34
[nuxt] vite:extendConfig: 0.273ms                                                                             20:53:34
[nuxt] vite:serverCreated: 3.029ms                                                                            20:53:34
[nuxt] server:devHandler: 2.059ms                                                                             20:53:34
[nuxt] vite:extendConfig: 0.97ms                                                                              20:53:34
[nuxt] pages:extend: 4.288ms                                                                                  20:53:34
[nuxt] build:manifest: 8.947ms                                                                                20:53:34

 WARN  Sourcemap for "F:/Blog/blog/node_modules/.pnpm/@[email protected][email protected]/node_modules/@nuxt-themes/docus/plugins/menu.ts" points to missing source files


 WARN  Sourcemap for "F:/Blog/blog/node_modules/.pnpm/@[email protected][email protected]/node_modules/@nuxt-themes/docus/plugins/scrollbars.client.ts" points to missing source files

[nuxt] vite:serverCreated: 0.016ms                                                                            20:53:38

 WARN  Sourcemap for "F:/Blog/blog/node_modules/.pnpm/@[email protected]/node_modules/@nuxt-themes/elements/app.config.ts" points to missing source files


 WARN  Sourcemap for "F:/Blog/blog/node_modules/.pnpm/@[email protected][email protected]/node_modules/@nuxt-themes/docus/app.config.ts" points to missing source files


 WARN  Sourcemap for "F:/Blog/blog/node_modules/.pnpm/@[email protected][email protected]/node_modules/@nuxt-themes/docus/composables/useMenu.ts" points to missing source files


 WARN  Sourcemap for "F:/Blog/blog/node_modules/.pnpm/@[email protected][email protected]/node_modules/@nuxt-themes/docus/composables/useScrollspy.ts" points to missing source files


 WARN  Sourcemap for "F:/Blog/blog/node_modules/.pnpm/@[email protected][email protected]/node_modules/@nuxt-themes/docus/composables/useDocus.ts" points to missing source files


 WARN  Sourcemap for "F:/Blog/blog/node_modules/.pnpm/@[email protected][email protected]/node_modules/@nuxt-themes/docus/composables/useDocSearch.ts" points to missing source files


 WARN  Sourcemap for "F:/Blog/blog/node_modules/.pnpm/@[email protected][email protected]/node_modules/@nuxt-themes/docus/composables/useCurrentNavigation.ts" points to missing source files

i Vite client warmed up in 4032ms                                                                             20:53:38
[nuxt] nitro:build:before: 0.006ms                                                                            20:53:38
[nitro] rollup:before: 0.012ms                                                                                20:53:38
√ Nitro built in 1490 ms                                                                                nitro 20:53:39
[nitro] compiled: 0.428ms                                                                                     20:53:39
[nuxt] build:done: 1.537s                                                                                     20:53:39
[nitro] dev:reload: 603.01ms                                                                                  20:53:40
[nuxt] builder:watch: 0.343ms                                                                                 20:56:53
[nuxt] builder:watch: 0.033ms

Apparently vite:extend took 32s to complete. Maybe this is the problem.

KyleRicardo · 2022-11-28T13:07:46Z

My bad, I divided the milliseconds number by 100 to get seconds. But the result is just the time I need to get it to run(like, 50s or so).🤣

Tahul · 2022-11-28T14:33:37Z

I'll dig into this on my Windows setup soon.

Thanks for reporting.

I suspect some path issue or loop somewhere.

I don't have much knowledge over Windows file system, but I can tell that my boot time was less that 10 seconds the last time I successfully booted it with Git Bash on Windows.

KyleRicardo · 2022-11-28T14:41:11Z

Understandable. I used to use Git Bash too but since Microsoft has released Windows Terminal, I embraced it, with Oh My Posh.

Git Bash is basically built on MinGW, its filesystem is more like linux rather than Windows.

Thanks for your efforts. Hope you guys can work it out.

atinux · 2022-11-28T15:48:13Z

Do we have a way to trace/debug vite:extend hook @danielroe ?

danielroe · 2022-11-29T10:04:13Z

We can see how long nuxt hooks (vite:extend, etc.) take by running DEBUG=true npx nuxi dev. For inspecting vite plugins transform times we should be able to use https://github.com/antfu/vite-plugin-inspect - will need to confirm whether that works with Nuxt out-of-the-box.

Tahul · 2022-11-29T12:05:05Z

Not sure about it, but this might be related:
nuxt/icon#30

atinux · 2022-11-29T12:06:36Z

Not sure for Nuxt Icon since it is not related to vite:extend hook

danielroe · 2022-11-29T12:09:42Z

Oh, I see the logs already (missed that first time round). Will see if I can replicate on windows.

harlan-zw · 2022-11-29T12:44:50Z

I'm working on a theme that uses some of Docus, I have a boot time of around 1 minute as well for Linux.

There are many logs, so I won't post it all at this stage, can make a minimal reproduction later.

The main 'pause' seems to be between build:before and vite:extend (45 seconds). Not sure if this is just because the vite:extend isn't called until the build is finished?

I have debugged previously that the nuxt/content transformations are pretty slow, but not this slow.

------------------------------
- Operating System: `Linux`
- Node Version:     `v16.16.0`
- Nuxt Version:     `3.0.0`
- Nitro Version:    `1.0.0`
- Package Manager:  `[email protected]`
- Builder:          `vite`
- User Config:      `extends`, `modules`, `css`, `colorMode`
- Runtime Modules:  `[email protected]`
- Build Modules:    `-`
------------------------------

[nuxt] build:before: 5.785ms                                                                                                                                                                    23:37:39
[nuxt] vite:extend: 45.684s                                                                                                                                                                     23:38:25
[nuxt] vite:extendConfig: 0.273ms                                                                                                                                                               23:38:25
vite:config no config file found. +0ms                                                                                                                                                          23:38:25
vite:esbuild init tsconfck (root: /home/harlan/sites/harlanzw.com) +0ms                                                                                                                         23:38:25
vite:esbuild init tsconfck (root: /home/harlan/sites/harlanzw.com) +1ms                                                                                                                         23:38:25
vite:esbuild init tsconfck end +589ms                                                                                                                                                           23:38:26
vite:esbuild init tsconfck end +0ms                                                                                                                                                             23:38:26
vite:config using resolved config: {                                                                                                                                                            23:38:26

Last time I tried vite-plugin-inspect with prior RC's it seemed to work, can give it a spin tomorrow if you haven't made any progress.

danielroe · 2022-11-29T16:20:54Z

The thing that's taking the most time is this plugin: https://github.com/nuxtlabs/nuxt-component-meta/blob/main/src/unplugin.ts.

It's difficult to make comments about time as I'm testing in an underpowered windows virtual machine, but:

starting the component checker takes 23 seconds
fetching/checking each component takes well over another minute (lots of the components take over 4s individually)

atinux · 2022-11-29T17:48:03Z

Releasing a new version of Docus (1.0.2) with the fix:

Before (22s):
http://volta.s3.fr-par.scw.cloud/Clean_Shot_2022_11_29_at_18_45_12_bf60702dab.mp4

After (6s):
https://volta.s3.fr-par.scw.cloud/Clean_Shot_2022_11_29_at_18_45_46_c5b81b4ad9.mp4

harlan-zw · 2022-11-30T02:30:21Z

Confirming that the bootup time is a lot quicker now, thanks guys!

productdevbook · 2022-11-30T04:19:52Z

Thank you, How exactly did this event fixed? Which library is it from ?

KyleRicardo · 2022-11-30T06:43:03Z

Thanks for your effort. It's much quicker now.

atinux · 2022-11-30T10:12:11Z

It came from nuxt-component-meta that is used in order to document the props of the components, but it is not yet used, so we disabled it in dev for now.

danielroe self-assigned this Nov 29, 2022

atinux closed this as completed in 8e29ee0 Nov 29, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Vite client warm up cost too much time #694

Vite client warm up cost too much time #694

KyleRicardo commented Nov 28, 2022

atinux commented Nov 28, 2022

KyleRicardo commented Nov 28, 2022

Tahul commented Nov 28, 2022

atinux commented Nov 28, 2022

KyleRicardo commented Nov 28, 2022

Tahul commented Nov 28, 2022

KyleRicardo commented Nov 28, 2022

KyleRicardo commented Nov 28, 2022

Tahul commented Nov 28, 2022

KyleRicardo commented Nov 28, 2022

atinux commented Nov 28, 2022

danielroe commented Nov 29, 2022 •

edited

Loading

Tahul commented Nov 29, 2022

atinux commented Nov 29, 2022

danielroe commented Nov 29, 2022

harlan-zw commented Nov 29, 2022 •

edited

Loading

danielroe commented Nov 29, 2022 •

edited

Loading

atinux commented Nov 29, 2022

harlan-zw commented Nov 30, 2022

productdevbook commented Nov 30, 2022

KyleRicardo commented Nov 30, 2022

atinux commented Nov 30, 2022

Vite client warm up cost too much time #694

Vite client warm up cost too much time #694

Comments

KyleRicardo commented Nov 28, 2022

atinux commented Nov 28, 2022

KyleRicardo commented Nov 28, 2022

Tahul commented Nov 28, 2022

atinux commented Nov 28, 2022

KyleRicardo commented Nov 28, 2022

Tahul commented Nov 28, 2022

KyleRicardo commented Nov 28, 2022

KyleRicardo commented Nov 28, 2022

Tahul commented Nov 28, 2022

KyleRicardo commented Nov 28, 2022

atinux commented Nov 28, 2022

danielroe commented Nov 29, 2022 • edited Loading

Tahul commented Nov 29, 2022

atinux commented Nov 29, 2022

danielroe commented Nov 29, 2022

harlan-zw commented Nov 29, 2022 • edited Loading

danielroe commented Nov 29, 2022 • edited Loading

atinux commented Nov 29, 2022

harlan-zw commented Nov 30, 2022

productdevbook commented Nov 30, 2022

KyleRicardo commented Nov 30, 2022

atinux commented Nov 30, 2022

danielroe commented Nov 29, 2022 •

edited

Loading

harlan-zw commented Nov 29, 2022 •

edited

Loading

danielroe commented Nov 29, 2022 •

edited

Loading