Visual Studio Code 最近將其內(nèi)置的 JavaScript 大小減少了 20%,節(jié)省了超過 3.9 MB。這種減少不僅降低了下載和存儲需求,而且由于在運行 JavaScript 之前需要掃描的源代碼更少,因此也提高了啟動速度。這個減小是通過一個新的構(gòu)建步驟 “名稱混淆壓縮” 實現(xiàn)的,而非刪除任何代碼或進(jìn)行重大重構(gòu)。?
workbench.js 隨時間變化大小,右側(cè)兩個下降點:VS Code 1.74 第一大跌幅結(jié)果來源于混淆壓縮私有屬性,VS Code 1.80 第二小跌幅來源于混淆壓縮 export。
混淆壓縮私有屬性
混淆壓縮源碼后 JavaScript 仍包含許多長標(biāo)識符名稱如 extensionIgnoredRecommendationsService。作者本來以為 esbuild 已經(jīng)將這些標(biāo)識符簡化了,比如:
const someLongVariableName = 123;
console.log(someLongVariableName);
變?yōu)楦痰模?/p>
const x = 123;
console.log(x);
由于 JavaScript 以源文本形式發(fā)布,減少標(biāo)識符名稱的長度實際上可以減小程序的大小。這種優(yōu)化可能看起來有些荒謬,但在 JavaScript 世界里確實頂瓜瓜。
盡管 esbuild 實現(xiàn)了混淆功能,默認(rèn)情況下只有當(dāng)確定混淆不會改變代碼行為時才對名稱進(jìn)行處理。
因此,在實踐中,esbuild 只對局部變量名和參數(shù)名進(jìn)行處理。
也就是說,esbuild 這種保守策略意味著許多無法確認(rèn)是否安全修改名稱被忽略了。
怎么辦呢?
作者團隊最終利用 TypeScript 對混淆代碼進(jìn)行驗證,正如 TypeScript 可以在常規(guī)代碼中捕獲未知的屬性訪問一樣,TypeScript 編譯器能夠捕獲到一個屬性已經(jīng)被混淆但對它的引用沒有正確更新的情況。
解決思路:可以將 TypeScript 源碼進(jìn)行混淆,然后使用被改變標(biāo)識符名稱的新 TypeScript 進(jìn)行編譯。這種方式會使得對于是否無意間破壞了代碼有更高的把握。
同時,通過使用 TypeScript,可以真正找到所有私有屬性(而不是僅以 _ 開始的屬性),甚至還可以利用 TypeScript 的現(xiàn)有重命名功能來智能地重命名符號,而不會意外改變對象形狀。
他們提出了新的大致工作流程: 使用 TypeScript's AST 針對每個在代碼庫中發(fā)現(xiàn)的私有或受保護屬性:
如果該屬性需要被修改:
通過尋找未使用過的符號名稱計算出一個新名稱
使用 TypeScript 生成所有引用該屬性的重命名編輯 將所有重命名編輯應(yīng)用于 TypeScript 源碼 編譯帶有修改過名稱的新編輯過的 Typescript 資源 結(jié)果大部分有效。
當(dāng)然,也有一些例外需要處理:
當(dāng)前類內(nèi)唯一性并不能滿足要求,在超類和子類之間也必須具備唯一性。根本原因是 TypeScripts 私有關(guān)鍵字只是一個編譯時裝飾器,并不能真正防止超級和子類訪問私有屬性。
如果不小心處理,則可能導(dǎo)致重新命名時產(chǎn)生名稱沖突(幸運地是 Typescript 將其報告為錯誤)。
在某些情況下,子類公開繼承自父類受保護權(quán)限,在很多例子里面都屬于錯誤操作,需要禁止此處進(jìn)行混淆。
這樣構(gòu)建成功后,混淆私有屬性后 VS Code 主要 workbench.js 文件大小從 12.3MB 降低至 10.6MB , 減少近 14%。這也帶來 5% 加載速度提高,因為需要掃描文本量減少。
混淆壓縮 export
另一方面,其實 provideWorkspaceTrustExtensionProposals 等長名字,或者 localize 函數(shù)(用于 UI 顯示字符串)明顯還有改善空間。
針對它的處理是:導(dǎo)出符號名稱。只要導(dǎo)出僅供內(nèi)部使用,就可以縮短它們而不改變代碼行為。
最終,經(jīng)過優(yōu)化,總體上文件比沒有進(jìn)行名稱壓縮小了 20%。
在整個 VS Code 中,名稱壓縮從編譯源碼移除 3.9MB JavaScript 代碼,這既降低了下載大小和安裝大小,也使每次啟動 VS Code 需要掃描 JS 代碼量減少 3.9MB。
審核編輯:劉清
-
JAVA語言
+關(guān)注
關(guān)注
0文章
138瀏覽量
20512 -
javascript
+關(guān)注
關(guān)注
0文章
525瀏覽量
54492 -
AST
+關(guān)注
關(guān)注
0文章
7瀏覽量
2382 -
vscode
+關(guān)注
關(guān)注
1文章
167瀏覽量
8361
原文標(biāo)題:程序員神器VS Code再提速,將內(nèi)置JS減小20%!
文章出處:【微信號:OSC開源社區(qū),微信公眾號:OSC開源社區(qū)】歡迎添加關(guān)注!文章轉(zhuǎn)載請注明出處。
發(fā)布評論請先 登錄
如何在VS Code中使用瑞薩RA系列MCU

阿里云升級通義靈碼AI程序員,全面上線
使用MCUXpresso for VS Code插件開發(fā)Zephyr的hello world

TMS320C55x DSP CPU程序員參考補充

Zephyr領(lǐng)進(jìn)門系列:MCUXPresso for VS Code插件安裝

UCD3138A64/UCD3138128程序員手冊

機械革命發(fā)布CODE AI程序員本
AI編程工具會不會搶程序員飯碗
第五屆長沙·中國1024程序員節(jié)開幕
Microchip發(fā)布面向VS Code的MPLAB擴展早期體驗版本
京東上萬程序員都AI用它!

程序員節(jié)視頻創(chuàng)意大賽,用串口屏贏取千元大獎

程序員節(jié)視頻創(chuàng)意盛宴,邀您共襄盛舉!

評論