VS Code 优化名称混淆压缩，将内置 JS 减小 20%！
2022-06-09 01:34:09
VS Code 通过名称混淆压缩优化内置 JS，实现 20% 的大小减少
Visual Studio Code（VS Code）最近通过引入一个新的构建步骤——“名岁拆称混淆压缩”，成功将其内置的 JavaScript 文件大小减少了20%，节省了超过3.9 MB的空间。这一优化不仅降低了下载和存储需求，还提高了启动速度，因为需要扫描的源代码量减少了。
一、名称混淆压缩的实现
名称混淆压缩是一种在不改变代码功能的前提下，通过缩短变量名、函数名等标识符的长度来减小程序大小的技术。VS Code 团队在实现这一技术时，主要关注了两个方面的优化：混淆压缩私有属性和混淆压缩导出符号名称。
混淆压缩私有属性
背景：在 JavaScript 中，许多长标识符名称如 extensionIgnoredRecommendationsService 等占用了大量空间。尽管 esbuild 这样的工具已经实现了混淆功能，但由于其保守策略，只对局部变量名和参数名进行处理，许多无法确认是否安全修改的名称被忽略了。
解决思路：VS Code 团队利用 TypeScript 对混淆代码进行验证。他们首先将 TypeScript 源码进行混淆，然后使用被改变标识符名称的新 TypeScript 进行编译。这种方式使得团队对于是否无意间破坏了代码有更高的把握。
工作流程：使用 TypeScript 的 AST（抽象语法树）针对每个在代码库中发现的私有或受保护属性，如果该属性需要被修改，就通过寻找未使用过的符号名称计算出一个新名称，并使用 TypeScript 生成所有引用该属性的重命名编辑。最后，将所有重命名编辑应用于 TypeScript 源码，并编译带有修改过名称段雀哗的新编辑过的 TypeScript 资源。
结果：经过这一优化，VS Code 的主要 workbench.js 文件大小从 12.3MB 降低至 10.6MB，减少了近 14%。这也带来握行了 5% 的加载速度提高。
混淆压缩导出符号名称
背景：除了私有属性外，一些长名字的导出符号如 provideWorkspaceTrustExtensionProposals 和用于 UI 显示字符串的 localize 函数等也有改善空间。
解决思路：对于仅供内部使用的导出符号名称，可以缩短它们而不改变代码行为。
结果：经过这一优化，整体上文件比没有进行名称压缩时小了 20%。
二、优化效果
在整个 VS Code 中，名称压缩从编译源码中移除了 3.9MB 的 JavaScript 代码。这不仅降低了下载大小和安装大小，还使每次启动 VS Code 需要扫描的 JS 代码量减少了 3.9MB，从而提高了启动速度。
三、总结
VS Code 通过名称混淆压缩技术成功实现了内置 JS 文件大小的 20% 减少，这一优化不仅提升了用户体验（降低了下载和存储需求，提高了启动速度），还展示了团队在代码优化方面的深厚实力。未来，我们可以期待 VS Code 在保持其强大功能的同时，继续通过技术创新来优化性能和用户体验。
热门标签
