导入@mui/material导致VSCode TypeScript自动补全异常卡顿如何解决？

问题表现 #

从@mui/material包导入组件时，会导致VSCode出现TypeScript相关功能卡顿，原本耗时不到10ms即可出现的TS警告提示会延迟10-15秒才展示，同时代码自动补全加载速度也会大幅下降。

问题复现代码示例：

import { Button } from '@mui/material'
// 对该Button组件进行使用

卡顿场景示例：

new Date(). // 此处自动补全提示加载非常慢

若移除从该包中导入的Button或任意其他模块，所有TS提示、自动补全功能均会恢复正常运行。

修复方案 #

• 调整导入路径：放弃从全量包做具名导入的写法，改为从组件子路径单独导入，示例如下：

  import Button from '@mui/material/Button'
  

  该写法只会加载单个组件的类型声明，不会一次性触发全库数百个组件的类型解析，可大幅降低TypeScript语言服务的计算压力。
• 升级相关依赖：将@mui/material、项目中使用的typescript、VSCode内置的TypeScript语言服务插件均升级到最新稳定版，MUI旧版本存在类型声明冗余的已知性能问题，新版已做了大量针对性优化。
• 优化TS配置：在项目的tsconfig.json中开启skipLibCheck配置：

  {
    "compilerOptions": {
      "skipLibCheck": true
    }
  }
  

  开启后会跳过对第三方依赖包的全量类型检查，仅校验项目业务代码的类型，减少不必要的性能消耗。
• 排查插件冲突：暂时禁用VSCode中除官方TypeScript and JavaScript Language Features之外的其他代码检查、代码提示类插件，确认是否存在插件冲突额外占用性能的情况。

内容的提问来源于stack exchange，提问作者Raz Buchnik