[npm] completion hangs when fetching package information

[jasonwilliams]

Does this issue occur when all extensions are disabled?: Yes/No

• VS Code Version: 1.63.2
• OS Version: Mac OS 11.6.1
• Extension location: https://github.com/microsoft/vscode/tree/main/extensions/npm/src

Steps to Reproduce:

1. Clone https://github.com/tc39/tc39.github.io
2. Navigate to package.json and add a line for a new package (or copy the gif below)
3. In the string for version trigger auto suggest (ctrl + space)

It will hang, this doesn't appear to be a network issue because I can talk to NPM directly using postman and get a response in 730ms. So the issue appears to be in VSCode itself.

https://user-images.githubusercontent.com/936006/150558467-535ea784-19c6-4d1d-8f00-161ef7d40458.mp4

At first i thought this must be npm, but when i reproduce https://github.com/microsoft/vscode/blob/main/extensions/npm/src/features/packageJSONContribution.ts#L96 manually I get this:

So there's a deeper issue here.

Sometimes it does eventually complete but after like a minute or something. So either there's a huge request happening or its failing somewhere and trying again after a while. It's not a proxy issue because I have the same experience both on proxy and off.

There don't seem to be any logs or output to inspect to see what is going on.

[aeschli]

I can't reproduce.

    "devDependencies": {
        "@babel/core": "7.12.3",
        "@babel/eslint-parser": "7.12.1",
        "@babel/plugin-syntax-top-level-await": "7.12.1",
        "@babel/preset-env": "7.12.1",
        "eslint": "7.12.0",
        "eslint-config-prettier": "6.14.0",
        "eslint-plugin-compat": "3.8.0",
        "eslint-plugin-prettier": "3.1.4",
        "prettier": "^1.17.1",
        "stylelint": "^10.0.1",
        "stylelint-config-prettier": "^5.2.0",
        "stylelint-config-standard": "^18.3.0",
        "stylelint-order": "^3.0.0",
        "vnu-jar": "20.6.30",
        "@11ty/eleventy": ""
    }

Code completion on the last value is instant.

[jasonwilliams]

I did some more research on this and it looks like the bulk of it is npm's large payload responses which are noticable on a slow network. It has been raised before in their feedback https://github.com/npm/feedback/discussions/831#discussioncomment-4484048

There are headers which can reduce the payload from 7MB down to 1.5MB (see top comment) but you lose homepage information. It’s overkill to get a 7-10MB response when all you want is the latest version of a package, but this can't really be fixed on Code's side.

A query for typescript yields back an 17.5MB response. It then has to JSON.parse() that too.

I know this issue is now closed but adding some steps that can be done for this to be (more) instant.

1. npm can provide a much smaller response that is cached and Gzipped (link above).
2. Check keep-alive is being used on xhr to reuse connections as a user hovers over different packages.
3. Prefetching if possible but this would be a nice to have. Maybe from when the file is opened for the first time during that session. If npm returns cache headers make use of those in Code’s storage to reduce round trips.