你的 VS Code 扩展程序运行缓慢吗？这里教你如何加速！

- Extensions Rock -

Peacock for Visual Studio Code

- Extensions Rock -

VS Code 用户（而且我们人数众多）都非常喜欢各种扩展程序。市面上有成千上万个 VS Code 扩展程序可供选择，许多人甚至安装了好几个。它们功能丰富，从高亮显示你最喜欢的编程语言、格式化代码，到更改主题颜色，应有尽有。

您是否注意到，启动 VS Code 时，某些扩展程序需要一些时间才能初始化？造成这种延迟的原因可能是什么？

对此你有什么办法呢？其实有很多办法。请继续阅读，了解如何帮助你最喜欢的扩展程序快速加载！

一个可能的原因是文件数量或扩展程序的大小。有些扩展程序功能繁多，随着时间的推移可能会变慢。

等等，这是为什么？

当我们为 Web 开发应用程序时，通常会编写几十甚至几百个 JavaScript、CSS 和 HTML 文件。我们不希望通过 Web 向浏览器发送上千个文件，因为这可能会导致用户体验极差，用户需要长时间等待。而且，我们编写的代码在浏览器优化方面也做得不够完善。现代工具通过将文件压缩成单个（或少量）文件来帮助我们解决这个问题。Webpack 就是一款常用的工具。

如果您使用“开发者：显示正在运行的扩展”命令，您将看到 VS Code 实例中已激活的扩展列表。您还可以在右侧看到每个扩展的激活时间（以毫秒为单位）。

这是找出哪些扩展程序激活速度较慢的好方法。请注意，以下列表来自我的 VS Code 实例，显示了我安装的一些扩展程序及其激活时间。显然，有些扩展程序加载时间更长，因为它们执行的操作更多。

如果响应时间过长（比如1000毫秒），该怎么办？

加快扩展程序运行速度

最近，VS Code 团队发布了使用 Webpack 将扩展中的文件打包的功能。

这篇文章内容非常全面，对打包扩展程序很有帮助。

我发现我的Peacock扩展程序会在打包文件中放入48个文件。我做了一些调整，大幅减少了文件数量。

首先，我向.vscodeignore文件中添加了一些文件。



# Files I excluded
azure-pipelines.yml
ISSUE_TEMPLATE.md
PULL_REQUEST_TEMPLATE.md
vsc-extension-quickstart.md
node_modules/**/test/**

# After webpack, we have more to ignore
node_modules
out/
src/
tsconfig.json
webpack.config.json

然后我为我的扩展创建了一个新分支。我按照VS Code 文档中的步骤更新了我的项目，使其使用 Webpack。

我的目标是让所有这些功能继续有效：

包装npm run package
出版npm run publish
本地和 CI 测试npm run test
使用 F5 进行调试launch.json
使用 F5 调试测试launch.json

这种方法需要我同时使用 webpack 进行编译，以及tsc用于测试和调试。

这是我的项目：https://github.com/johnpapa/vscode-peacock

我修改了我的主文件package.json



  "main": "./dist/extension",

我的 npm 脚本在package.json



  "scripts": {
    "package": "npx vsce package",
    "publish": "npx vsce publish",

    "vscode:prepublish": "webpack --mode production",
    "compile": "webpack --mode none",
    "watch": "webpack --mode none --watch",

    "postinstall": "node node_modules/vscode/bin/install",
    "just-test": "node node_modules/vscode/bin/test",
    "test-compile": "tsc -p ./ && npm run compile",
    "test": "npm run test-compile && node node_modules/vscode/bin/test"
  },

我的launch.json运行时调试和测试配置：



  "configurations": [
    {
      "name": "Run Extension",
      "type": "extensionHost",
      "request": "launch",
      "runtimeExecutable": "${execPath}",
      "args": ["--extensionDevelopmentPath=${workspaceFolder}"],
      "outFiles": ["${workspaceFolder}/dist/**/*.js"],
      "preLaunchTask": "npm: test-compile"
    },
    {
      "name": "Extension Tests",
      "type": "extensionHost",
      "request": "launch",
      "runtimeExecutable": "${execPath}",
      "args": [
        "${workspaceFolder}/testworkspace",
        "--disable-extensions",
        "--extensionDevelopmentPath=${workspaceFolder}",
        "--extensionTestsPath=${workspaceFolder}/out/test"
      ],
      "outFiles": ["${workspaceFolder}/out/test/**/*.js"],
      "preLaunchTask": "npm: test-compile"
    }
  ]