项目架构:
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
来源: https://www.cnblogs.com/suihang/p/11946434.html