如何提升vscode扩展的速度

VS Code最受用户喜爱的就是它丰富的扩展。有成千上万的VS Code扩展可供选择。它们可以帮我们实现想要的一切，包括高亮语法显示我们喜欢的语言，格式化代码，为主题着色，方便地调试等等。

您是否曾经注意到在启动VS Code时某些扩展需要一些时间来初始化？是什么导致这种延迟？

你能为这个做什么？实际上很多。和我在一起，看看如何帮助您最喜欢的扩展程序快速加载！

一种可能的原因是文件数或扩展名的大小。某些扩展中有太多功能，以至于随着时间的推移它们会变慢。

缓慢的原因？

当我们为网络构建应用程序时，我们用JavaScript，CSS和HTML编写了数十个或数百个文件。我们不希望通过网络将1000个文件发送到浏览器，因为这可能是等待的不好体验。当我们编写代码时，它也没有针对浏览器进行尽可能多的优化。现代工具通过将文件压缩为单个（或一小组）文件来帮助我们解决此问题。一种流行的工具是WebPack。

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

这是找出哪些启动速度可能较慢的好方法。请注意，我的VS Code实例下面的列表显示了一些已安装的扩展及其激活时间。显然，某些负载比其他负载需要更长的时间，因为它们的负载更多。

如果一个扩展花太长时间，我们该怎么办？（也许是1000ms？）

使扩展更快

最近，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

然后，我为扩展创建了一个新分支。使用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"

一个Visual Studio Code扩展，可以巧妙地更改工作区的工作区颜色。当您有多个VS Code实例并且想要快速识别出哪个实例时，这是理想的选择。

vscode-peacock

1. 在Visual Studio Code中打开“ 扩展”侧边栏面板。View → Extensions
2. 搜索 Peacock
3. 点击安装
4. 单击重新加载（如果需要）

特征

可以在命令面板中找到命令。寻找以开头的命令Peacock:

• 将“ 受影响的元素 ”的颜色（请参阅peacock.affect*“ 设置”部分）更改为
  • 用户定义的颜色
  • 随机的颜色
  • 配置的原色
• 从您喜欢的颜色中选择一种用户定义的颜色
• 使用“ 保存收藏夹颜色 ” 保存用户定义的颜色
• 通过使受影响的元素变暗或变浅来调整它们的颜色，以在它们之间提供微妙的视觉对比
• 将颜色保存到.vscode/settings.json文件中的工作区

它会产生什么样的影响？

这是一个很大的问题，我们绝对应该问一个问题。毕竟，我的意思是要进行任何代码更改都必须具有一定的价值。我能够获得许可（感谢VS Code团队和Erich Gamma）来共享您可能使用的两个扩展的一些性能统计信息（非官方测试）。

这两个扩展都具有相当多的逻辑，并且可以做一些令人印象深刻且有用的事情。

Azure帐户

在Azure的客户扩展的大小和文件数量大幅度下降......像“圣钼”到“不坏”！

热激活是一个术语，表示扩展已激活的时间（如果该扩展先前已安装（不是第一次））。在此扩展中，该数量减少了一半。一点也不差！

• 下载大小（.vsix）：6.2M至840K。
• 打包文件：4300至11
• 热启动时间：676ms至338ms

使用docker

使用docker收到明显的温暖激活改进下2秒。但是关键方面是冷激活时间。冷激活是指扩展在刚安装时激活所需的时间。

• 热启动时间：3.5s至<2s
• 冷启动时间（第一次安装后）：20s至2s

提示

使用webpack捆绑扩展会影响几件事。这就是测试所有这些超级重要的原因。

• 在调试器中本地运行扩展（并测试您是否可以遇到断点）
• 打包扩展并从菜单加载（从VSIX加载）
• 使用调试器运行测试（测试可以达到断点）
• 从运行您的测试脚本 npm test

完成后，您可以再次检查激活时间。

没有自己的扩展

没关系，但是，如果您喜欢扩展，请考虑在其存储库上创建拉取请求（PR）以启用Webpack捆绑！