vscode 插件慢_我是如何把 VS Code 插件启动速度从 8 秒减少到 1 秒

前言

最近在打包 VS Code 插件时，发现打包后的插件体积非常大，而且插件在 VS Code 中的启动速度非常慢，对用户的体验不太友好了。对此做了一些研究，并更改了打包策略，终于把插件的体积从 35M 减少到 3M，并提高了插件的启动速度。

本文将带你分析插件体积过大和启动速度过慢的原因，并讲解如何通过使用 webpack 进行打包来减少插件体积。最后将讲解如何配置 externals 剥离一些依赖模块，减少 bundle 的体积，避免出现打包失败的问题。

原始打包

首先，我们会以 iceworks-page-builder VS Code 插件为例子进行分析，具体的代码可以点击此链接查看。

其中，部分目录结构说明如下：

├── .vscodeignore            # 插件打包时需要忽略的文件
├── build                     # 构建产物目录
├── node_modules
├── package.json
├── src                       # 插件相关的源代码
|  ├── extension.ts
|  ├── services
|  └── types.d.ts
├── tsconfig.json
└── web                       # webview 相关代码 本质是一个 React 项目

打包插件需要使用 vsce 这个工具。 首先确认已安装 vsce ；若未安装，则执行以下的命令安装 vsce ：

npm i vsce -g

在项目的根目录下执行以下命令，即开始对插件进行打包：

vsce package

它会先执行 scripts 中的 vscode:prepublish 命令。从上面可以看出，会先对 Webview 相关的代码进行构建（本质是 CLI 提供的构建能力），得到 js 、html 、css 代码，然后使用 tsc 对插件源代码（./src/**）进行编译。

等待 vscode:prepublish