[Perf issue] Autocomplete is still slow

[vip30]

• I have searched through existing issues
• I have read through docs
• I have read FAQ

Info

• Platform: Win
• Vetur version: 0.19.4
• VS Code version: 1.33.1
• Typescript version: 3.2.4
• Use class style component
• Number of vue files: 71
• Number of ts files: 115
• Number of dependencies in package.json: 50

Problem

Autocomplete is still slow in class style component, I guess my project is just a medium size project.

[Trace - 00:05:00] Received response 'textDocument/documentLink - (163)' in 6970ms.
[Trace - 00:05:00] Received response 'textDocument/documentColor - (164)' in 6971ms.
[Trace - 00:05:00] Sending request 'textDocument/codeAction - (171)'.
[Trace - 00:05:00] Sending notification '$/cancelRequest'.
[Trace - 00:05:01] Received response 'textDocument/codeAction - (165)' in 8395ms.
[Trace - 00:05:01] Received notification 'textDocument/publishDiagnostics'.
[Trace - 00:05:02] Sending request 'textDocument/codeAction - (172)'.
[Trace - 00:05:02] Sending notification '$/cancelRequest'.
[Trace - 00:05:02] Received response 'textDocument/codeAction - (166)' in 7747ms.
[Trace - 00:05:02] Received response 'textDocument/codeAction - (167)' in 7144ms.
[Trace - 00:05:03] Received response 'completionItem/resolve - (168)' in 7358ms.
[Trace - 00:05:03] Received response 'textDocument/codeAction - (169)' in 7086ms.
[Trace - 00:05:04] Received response 'textDocument/codeAction - (170)' in 5819ms.
[Trace - 00:05:04] Received response 'textDocument/codeAction - (171)' in 4366ms.
[Trace - 00:05:05] Received response 'textDocument/codeAction - (172)' in 3401ms.

Here is the profile
CPU-20190503T235912.zip

[tohkinzhu]

me too....If i use typescript in .vue file.
But it's fast in .ts file.
I found that the more ts files, the slower the speed...(200+ .ts files in my project)
There is no such problem with webstorm

[NoahStahl]

I spent some time debugging the extension code today and noticed a few things. I stepped through code while watching performance counters to isolate lines that cause the observed I/O spikes. So far, I think the performance impact is coming from interaction with the TS language server in ways that cause it to scan the entire project for all TS-related files. One example is this line:

vetur/server/src/modes/script/javascript.ts

Line 605 in 7fa2ead

const filePaths = ls.getProgram()!.getRootFileNames();

Every keystroke causes many of these calls, each of which causes a scan of the entire project file system (thousands of reads each time). Caching that result and reusing if possible would reduce the IO, rather than repeating every time.

Another way this seems to happen is any time the TS language server runs its createProgram function, which likewise scans and parses all TS files. This would be any function call into the TS service, like:

vetur/server/src/modes/script/javascript.ts

Line 147 in 7fa2ead

const completions = service.getCompletionsAtPosition(fileFsPath, offset, {

Those calls result in createProgram invocations internally that generate lots of IO.

I came across some discussion that might be related, where caching the TS server instance data somehow is suggested as a workaround:

typescript-eslint/typescript-eslint#243

Hope the helps. It's my first time in the code, so if I'm off I apologize.

[NoahStahl]

A little more digging, it appears the specific expensive call is actually getProgram(). This doesn't just get an instance, but calls synchronizeHostData which scans the project files. It seems the TS Program really needs to be a single instance that is cached at least for the duration of a keystroke processing, not retrieved using getProgram().

TS source:

https://github.com/Microsoft/TypeScript/blob/bb1ac81bb1ddab587e0a4c80c882b308268f7fc0/src/services/services.ts#L1358

[octref]

@NoahStahl Thanks for the analysis! I think you and #1051 (comment) points to the same thing.

I think I have found a good fix. Can you try the VSIX linked here? #1277 (comment)

[petternordholm]

@octref Just tried the version linked above. Code completion/hover/etc. is really fast but not complete. Since the code only includes the current vue file, code completion will only work for imported ts files.

So, if I for instance type A and press ctrl+space, I will only get suggestions on types/etc included from the current edited file. For instance, our AuthenticationService is not included in the suggestions but it should be.

But this is definitely a limitation I can live with (to manually add imports to my vue files)

[octref]

@petternordholm There must be a way to solve that since you can do that in TypeScript...I'll try to fix it for releasing. I also had the problem of Vetur not completing this.$router and this.$store https://travis-ci.org/vuejs/vetur/jobs/528533165#L710 (since it needs to load types from vuex and vue-router).

Thanks for confirming it works for you. In your large project, can you try the command Developer: Open Process Explorer and see how much difference in memory/cpu usage this saved for you?

[petternordholm]

@octref Didn't test completion on this.$router but I think it is missing due to the *.d.ts file for Vue router not being included in getScriptFilenames.

I am writing this on my mobile phone but I will check cpu usage when I am back at work in ten hours.

[octref]

From your profile is seems your issue is #1277, which should be fixed by #1283.

New: (and mostly only fs.stat, not fs.readFile)

Old: