Visual Studio Code 最近將其內(nèi)置的 JavaScript 大小減少了 20%，節(jié)省了超過(guò) 3.9 MB。這種減少不僅降低了下載和存儲(chǔ)需求，而且由于在運(yùn)行 JavaScript 之前需要掃描的源代碼更少，因此也提高了啟動(dòng)速度。這個(gè)減小是通過(guò)一個(gè)新的構(gòu)建步驟 “名稱混淆壓縮” 實(shí)現(xiàn)的，而非刪除任何代碼或進(jìn)行重大重構(gòu)。

?

workbench.js 隨時(shí)間變化大小，右側(cè)兩個(gè)下降點(diǎn)：VS Code 1.74 第一大跌幅結(jié)果來(lái)源于混淆壓縮私有屬性，VS Code 1.80 第二小跌幅來(lái)源于混淆壓縮 export。

混淆壓縮私有屬性

混淆壓縮源碼后 JavaScript 仍包含許多長(zhǎng)標(biāo)識(shí)符名稱如 extensionIgnoredRecommendationsService。作者本來(lái)以為 esbuild 已經(jīng)將這些標(biāo)識(shí)符簡(jiǎn)化了，比如：

const someLongVariableName = 123;

console.log(someLongVariableName);

變?yōu)楦痰模?/p>

const x = 123;

console.log(x);

由于 JavaScript 以源文本形式發(fā)布，減少標(biāo)識(shí)符名稱的長(zhǎng)度實(shí)際上可以減小程序的大小。這種優(yōu)化可能看起來(lái)有些荒謬，但在 JavaScript 世界里確實(shí)頂瓜瓜。

盡管 esbuild 實(shí)現(xiàn)了混淆功能，默認(rèn)情況下只有當(dāng)確定混淆不會(huì)改變代碼行為時(shí)才對(duì)名稱進(jìn)行處理。

因此，在實(shí)踐中，esbuild 只對(duì)局部變量名和參數(shù)名進(jìn)行處理。

也就是說(shuō)，esbuild 這種保守策略意味著許多無(wú)法確認(rèn)是否安全修改名稱被忽略了。

怎么辦呢？

作者團(tuán)隊(duì)最終利用 TypeScript 對(duì)混淆代碼進(jìn)行驗(yàn)證，正如 TypeScript 可以在常規(guī)代碼中捕獲未知的屬性訪問(wèn)一樣，TypeScript 編譯器能夠捕獲到一個(gè)屬性已經(jīng)被混淆但對(duì)它的引用沒(méi)有正確更新的情況。

解決思路：可以將 TypeScript 源碼進(jìn)行混淆，然后使用被改變標(biāo)識(shí)符名稱的新 TypeScript 進(jìn)行編譯。這種方式會(huì)使得對(duì)于是否無(wú)意間破壞了代碼有更高的把握。

同時(shí)，通過(guò)使用 TypeScript，可以真正找到所有私有屬性（而不是僅以 _ 開(kāi)始的屬性），甚至還可以利用 TypeScript 的現(xiàn)有重命名功能來(lái)智能地重命名符號(hào)，而不會(huì)意外改變對(duì)象形狀。

他們提出了新的大致工作流程： 使用 TypeScript's AST 針對(duì)每個(gè)在代碼庫(kù)中發(fā)現(xiàn)的私有或受保護(hù)屬性：

如果該屬性需要被修改：

通過(guò)尋找未使用過(guò)的符號(hào)名稱計(jì)算出一個(gè)新名稱

使用 TypeScript 生成所有引用該屬性的重命名編輯 將所有重命名編輯應(yīng)用于 TypeScript 源碼 編譯帶有修改過(guò)名稱的新編輯過(guò)的 Typescript 資源 結(jié)果大部分有效。

當(dāng)然，也有一些例外需要處理：

當(dāng)前類內(nèi)唯一性并不能滿足要求，在超類和子類之間也必須具備唯一性。根本原因是 TypeScripts 私有關(guān)鍵字只是一個(gè)編譯時(shí)裝飾器，并不能真正防止超級(jí)和子類訪問(wèn)私有屬性。

如果不小心處理，則可能導(dǎo)致重新命名時(shí)產(chǎn)生名稱沖突（幸運(yùn)地是 Typescript 將其報(bào)告為錯(cuò)誤）。

在某些情況下，子類公開(kāi)繼承自父類受保護(hù)權(quán)限，在很多例子里面都屬于錯(cuò)誤操作，需要禁止此處進(jìn)行混淆。

這樣構(gòu)建成功后，混淆私有屬性后 VS Code 主要 workbench.js 文件大小從 12.3MB 降低至 10.6MB , 減少近 14%。這也帶來(lái) 5% 加載速度提高，因?yàn)樾枰獟呙栉谋玖繙p少。

混淆壓縮 export

另一方面，其實(shí) provideWorkspaceTrustExtensionProposals 等長(zhǎng)名字，或者 localize 函數(shù)（用于 UI 顯示字符串）明顯還有改善空間。

針對(duì)它的處理是：導(dǎo)出符號(hào)名稱。只要導(dǎo)出僅供內(nèi)部使用，就可以縮短它們而不改變代碼行為。

最終，經(jīng)過(guò)優(yōu)化，總體上文件比沒(méi)有進(jìn)行名稱壓縮小了 20%。

在整個(gè) VS Code 中，名稱壓縮從編譯源碼移除 3.9MB JavaScript 代碼，這既降低了下載大小和安裝大小，也使每次啟動(dòng) VS Code 需要掃描 JS 代碼量減少 3.9MB。

審核編輯：劉清