使用Import-Cost VSCode外掛控制匯入包大小

banq發表於2022-02-27

我們的行業一直在討論現代 Web 應用程式和網站的膨脹問題,由於這是一個熱門話題,許多人已經嘗試使用很棒的工具來解決它,例如webpack-bundle-analyzercost-of-modules、命令列 webpack 警告以及程式碼拆分和延遲載入等技術。雖然這些都是很棒的工具,但如果你沒有足夠的意識,它們很容易被忽視。

Import-Cost 是一個Visual Studio Code 擴充套件,它會在您匯入它的那一刻(或之後的幾分鐘)向您顯示匯入的第 3 方庫的大小。此擴充套件不打算用作捆綁分析工具 - 有更好的工具,此擴充套件將幫助您找到明顯的痛點並防止向您的客戶傳送大量捆綁包。

 

工作原理

Import-Cost 聽取活動編輯器視窗中文字的變化。每當它檢測到一個變化(當然是被宣佈的),它將使用Typescript和Babylon AST分析器分析當前視窗的程式碼,並編制一個有效的匯入或需要的候選列表。

 

相關文章