slow auto import with svelte-google-materialdesign-icons

[jasonlyu123]

In my case the cause of the slow IntelliSense was the addition of "svelte-google-materialdesign-icons": "^0.8.3" this exports all of its components for the icons and makes autocomplete very slow to load. I am also using svelte-fa for fontawesome icons that we are using. I guess for now I will settle on one of these which is the more sensible choice anyway.

I have included a CPU profile of how long it takes to load with this package added: CPU-20240101T203600.cpuprofile

Here is the profiler with svelte-google-materialdesign-icons removed: CPU-20240101T204056-after.cpuprofile

Profiles were taken on 108.1.0 of the extension and the following vscode version:

 code-insiders --version
1.86.0-insider
9621add46007f7a1ab37d1fce9bcdcecca62aeb0
arm64

Originally posted by @MiraiSubject in https://github.com/sveltejs/language-tools/issues/1984#issuecomment-1873453712

[jasonlyu123]

The reason for this is because of this monster package.json exports:

https://github.com/shinokada/svelte-google-materialdesign-icons/blob/8f434623c724c1d57d4ee0e2edd0be6d70e81b88/package.json#L85

It's over 8000 lines. TypeScript spends a ton of time comparing the path of the dts files to the subpath export. Even though a single comparison is cheap, it is looped n x n times. Although TypeScript can definitely optimize to reduce the loop count. But this feels like an edge case. Normally, the exports field should be really small and the optimization isn't worthy for the majority of the time.

With auto-import cache (#2237 or #2242), this should be at least usable. But it'll still take a huge amount of time for the first time and after the cache has been invalidated.

Another thing is during the parser error stage. All completion is global completion with no token to filter auto-import. So the time it takes is usually way higher than in the ts file.

[m4nh]

Save issue here with Tabler Icons Svelte, maybe for the same reason: big export in package.json file of that library.

I can't figure out how to solve it browsing linked issue. Can you provide the fix here? Thanks a lot

[jasonlyu123]

I am closing this since there is not much we can do. This needs to be fixed in TypeScript. Or the libraries should remove the thousands of lines of export map. I still haven't heard a reason as to why this is needed so I also don't know how to explain it when opening an upstream issue. If library authors have Svelte-specific reasons why this is required, feel free to comment here. Otherwise, please file an issue in TypeScript.

[dummdidumm]

A solution to these monster export maps is using star imports:

"./*.svelte": {
  "types": "./dist/*.svelte.d.ts",
  "svelte": "./dist/*.svelte.ts"
}

[TheEisbaer]

A solution to these monster export maps is using star imports:

"./*.svelte": {
  "types": "./dist/*.svelte.d.ts",
  "svelte": "./dist/*.svelte.ts"
}

can you further elaborate this? for what did you make that work?

[dummdidumm]

This is something the library itself needs to do, so it's not under your control as a consumer.