0.前言

在原插件项目中，打包后生成的 .vsix 插件文件体积有将近 168MB ，一个普通的 VSCode 插件体积应主要为其源码工程体积大小，通过翻阅 VSCode 插件应用市场大部分插件体积控制在 10MB 以内。

本篇博客首先分析原插件体积过大的原因，并且给出 VSCode 插件中缓存状态的四种方法。

1.插件体积过大

造成打包后的 .vsix 插件体积过大可能原因有两个：

1. 在 package.json 中将 devpendencies（生产依赖）误写为 devDependencies（开发依赖）。
2. 在 devpendencies（生产依赖）中存在过大的第三方库。

经排查可以发现：原插件工程中使用 electron-store 用于储存全局插件状态，此依赖属生产依赖。插件源码工程打包成 .vsix 文件时，会将生产依赖也打包进去。

由于原插件工程是直接 IDE 源码工程转换所得，而 IDE 工程又是基于 VSCode IDE 工程进行开发的，在其源码内部中已集成 electron ，因此在 IDE源码中引入 electorn-store 并不会产生体积过大的问题，但将此部分功能迁移至插件中，需改用 VSCode 插件状态缓存方式。

原插件工程代码片段：

// 通过设置 键-值 的方式缓存 `createProject` 变量
const Store = require("electron-store");
const store2 = new Store();
store2.get("createProject");
store2.set("createProject", true);

2.数据存储方式

在 VSCode 插件中有四种方式实现数据的缓存：

1. ExtensionContext.workspaceState：通过使用 key/value 的方式对 workspace 缓存。
2. ExtensionContext.global：通过使用 key/value 的方式对 globalState 缓存，即可缓存插件关闭前后的状态。此外，可以通过使用 setKeysForSync 设置 sync 的 keys。
3. ExtensionContext.storagePath：设置一个可以被插件拥有读写权限的 loacl directory 对workspace 缓存。
4. ExtensionCOntext.globalStoragePath：设置一个可以被插件拥有读写权限的 loacl directory 对 globalState 缓存。

以上 API 大致可以分为两组缓存，对 workspace 的状态缓存及对 global 的状态缓存。

3.基础使用

通过查阅 api 文档可知，globalState 属于 Mememto 类，该类具有以下 api:

1. get ：获取 value，该api有两种写法 get(key,defaultValue)
2. keys：读取所有 key 值。
3. update(key,value)：返回的是一个 Thenable 对象。

let isreload = context.globalState.get("_isreload") || false;   // 取
....
if (isreload) {
  context.globalState.update("_isreload",false);
}
.... 
application_panel.webview.onDidReceiveMessage(
	async (message) =>{
    if(message.text === "创建项目"){
      fs.mkdirSync(message.params.projectname); // 创建一个新的目录
      context.globalState.update("_isreload", true); 
      // 通过查阅官方文档可知 `openFolder` 会关闭当前已启动的插件进程，即丢失所有状态。
			vscode.commands.executeCommand("vscode.openFolder", uri, false);
    }；
  }；
)；

4.总结

使用 VSCode 插件自带的状态缓存机制，取代原有在插件工程中安装一个完整的 electron-store 造成体积过大的问题，改进后，插件体积从原有的 168MB 降为 6.6MB。

3.参考文献

1. 官方文档：Data Storage (opens new window)
2. Github issue：How extension store persist key-value data (opens new window)
3. StackOverflow：How can I persist state in a VS Code WebviewPanel after it is destroyed? (opens new window)]