項目架構:
React+TS+DVA
設備及軟件:
設備:Mac
軟件:VSCode
場景:
在Mac中使用VSCode運行時發現項目編譯非常卡頓,時間長達五六分鍾以上,並且項目啟動后訪問頁面,頁面也會有明顯的卡頓。
初步檢查:
打開活動監視器發現Code Helper啟動了好幾個,並且長時間占用非常高的CPU及內存(CPU超過100%,1個Code Helper進程占用1個多G內存)
解決方案:
將以下代碼插入到VSCode的setting.json中去,並退出重新啟動VSCode和項目
"search.followSymlinks": false "files.exclude": { "**/.git": true, "**/.svn": true, "**/.hg": true, "**/CVS": true, "**/.DS_Store": true, "**/tmp": true, "**/node_modules": true, "**/bower_components": true, "**/dist": true }, "files.watcherExclude": { "**/.git/objects/**": true, "**/.git/subtree-cache/**": true, "**/node_modules/**": true, "**/tmp/**": true, "**/bower_components/**": true, "**/dist/**": true }
解決結果:
1.CPU和內存占用大量下降,內存會降到一個Code Helper進程占用200多M。
2.編譯時間小幅度縮減
3.運行項目后,瀏覽器頁面卡頓感明顯消失
(下圖為優化后的內存占用)
引發原因:
以下原因為去gitGub上看了下VSCode出現這個問題的討論總結
1.由某些插件引發的問題,可以嘗試禁用所有的VSCode插件再次嘗試
2.由於TS引用某些包或者插件導致
個人更傾向於第二種原因,因為其他項目並沒有出現這個問題,只有兩個用了TS的項目出現這個問題,編譯巨慢,頁面卡頓,具體內部原理未知,待解決
可以去gitHub上看下關於這個問題的一些討論
https://github.com/Microsoft/vscode/issues/11963
https://github.com/microsoft/vscode/issues/11096#issuecomment-274879938
https://github.com/microsoft/vscode/issues/51776