File .vsix too big

[ThornDuke]

VSCode 1.86.0, vsce 2.23.0

I'm developing an extension for VSCode.

These are the relevant parts of package.json

{
  ...
  "engines": {
    "vscode": "^1.85.0"
  },
  "activationEvents": [],
  "main": "./out/extension.js",
  "scripts": {
    "vscode:prepublish": "npm run esbuild-base -- --minify",
    "compile": "tsc -p ./",
    "watch": "tsc -watch -p ./",
    "lint": "eslint src --ext ts",
    "pretest": "tsc -p ./",
    "test": "vscode-test",
    "esbuild-base": "esbuild ./src/extension.ts --bundle --outfile=out/main.js --external:vscode --format=cjs --platform=node",
    "esbuild": "npm run esbuild-base -- --sourcemap",
    "esbuild-watch": "npm run esbuild-base -- --sourcemap --watch",
    "test-compile": "tsc -p ./",
    "publish:prerelease": "vsce publish --githubBranch master --pre-release",
    "publish": "vsce publish --githubBranch master",
    "pack:prerelease": "vsce pack --githubBranch master --pre-release",
    "pack": "vsce pack --githubBranch master"
  },
  "devDependencies": {
    "@types/mocha": "^10.0.6",
    "@types/node": "18.x",
    "@types/vscode": "^1.85.0",
    "@typescript-eslint/eslint-plugin": "^6.15.0",
    "@typescript-eslint/parser": "^6.15.0",
    "@vscode/test-cli": "^0.0.4",
    "@vscode/test-electron": "^2.3.8",
    "esbuild": "^0.19.11",
    "eslint": "^8.56.0",
    "typescript": "^5.3.3"
  },
  "dependencies": {
    "crypto-shield": "^1.5.0"
  }
}

The problem is that when I compile the project (npm run pack) the .vsix file is too large, about 6M, while the "real" code contained in the out/main.js file is just under 5Kb.

I renamed the .vsix file to .zip and opened it and saw that in the .node_modules folder there is also the typescrypt folder, which alone weighs (uncompressed) about 20M.

What could be the problem? Why is the typescript package bundled into the extension file even though it is part of the devDependencies section in package.json?

[joaomoreno]

Is your extension open-source? Do you have a repo that I can test against?

[ThornDuke]

Is your extension open-source? Do you have a repo that I can test against?

Sure.

The repository is https://github.com/ThornDuke/sams-encryptor.

I got around the problem by adding the line

**/typescript

to .vscodeignore.

With that line vsce behaves like this:

# .vscodeignore

**/typescript

# terminal

$ npm run pack                   

> sams-file-encryptor@1.2.2 pack
> vsce pack --githubBranch master

Executing prepublish script 'npm run vscode:prepublish'...

> sams-file-encryptor@1.2.2 vscode:prepublish
> npm run esbuild-base -- --minify

> sams-file-encryptor@1.2.2 esbuild-base
> esbuild ./src/extension.ts --bundle --outfile=out/main.js --external:vscode --format=cjs --platform=node --minify

  out/main.js  5.2kb

⚡ Done in 5ms
 DONE  Packaged: /repos/SAMS/SFE/sams-file-encryptor-1.2.2.vsix (17 files, 35.9KB)

35.9KB

However, if I comment out that line vsce behaves like this:

# .vscodeignore

# **/typescript

# terminal

$ npm run pack

> sams-file-encryptor@1.2.2 pack
> vsce pack --githubBranch master

Executing prepublish script 'npm run vscode:prepublish'...

> sams-file-encryptor@1.2.2 vscode:prepublish
> npm run esbuild-base -- --minify

> sams-file-encryptor@1.2.2 esbuild-base
> esbuild ./src/extension.ts --bundle --outfile=out/main.js --external:vscode --format=cjs --platform=node --minify

  out/main.js  5.2kb

⚡ Done in 2ms
 DONE  Packaged: /repos/SAMS/SFE/sams-file-encryptor-1.2.2.vsix (45 files, 5.18MB)

5.18MB

But my solution is just a workaround. It is not normal to have to add the packages contained in the /node_modules folder to the .vscodeignore.

[joaomoreno]

If you comment out the line in the ignore file and run vsce ls what node modules are included in the VSIX? VSCE will include all dependencies but exclude devDependencies btw. Finally, if you end up bundling everything, the suggestion is to simply ignore the entire node_modules folder.