社区首页 >专栏 >如何提升vscode扩展的速度

如何提升vscode扩展的速度

程序那些事儿

发布于 2023-03-07 05:24:58

3.7K00

代码可运行

文章被收录于专栏：程序那些事儿程序那些事儿

运行总次数：0

代码可运行

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"