1. 为什么 Vue 项目里的依赖越装越多却没人敢删如果你维护过一个跑了半年以上的 Vue 项目大概率会遇到这种情况package.json里躺着五六十个依赖npm install越来越慢node_modules动辄七八百 MB但真要动手删又不知道哪个能删、哪个删了会炸。这就是典型的依赖膨胀问题。Vue 项目的依赖来源特别杂脚手架初始化带一批、装 UI 库带一批、临时试个图表库带一批、同事做活动页装个动画库又带一批。时间一长dependencies和devDependencies里混着大量已经没人 import 的包。它们不会报错但会拖慢安装、增大构建体积、增加安全扫描的噪音。这篇要解决的就是这件事在 VSCode 里用 depcheck / npm-check 把未使用的依赖揪出来形成一套可复制的检查流程。同时我会把 TaoToken 的统一 Key / API 通道配置一起讲清楚——因为很多人在清理依赖时会把 AI 辅助编码工具的配置也搞乱索性一次配好后面用 VSCode 插件或命令行调用模型时不用反复改环境变量。适合谁看正在维护 Vue2 / Vue3 项目、想给项目瘦身的前端以及想用一套统一 Key 管理多个 AI 编码工具配置的开发者。核心检索词就三个VSCode、Vue 依赖检查、depcheck。先说结论depcheck 是首选npm-check 做补充VSCode 插件负责日常提示三者配合基本能覆盖 90% 的场景。下面从环境准备开始一步步来。2. TaoToken 前置统一 Key 与 API 通道准备在动手清理依赖之前先把 AI 辅助这条链路配好。原因很实际清理依赖时你会频繁让模型帮你判断「这个包是不是被间接引用了」「这个 import 路径对应哪个包」如果每次都要重新配 Key、换 base_url效率很低。TaoToken 在这里的角色是一个统一的 API 通道你申请一个 Key就能通过同一套接口调用不同模型VSCode 里的插件、命令行工具、脚本都指向同一个地址即可。官网入口在 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content API 基础地址是 https://taotoken.net/api 这个不加 UTM直接填进配置里。你需要提前准备两样东西第一是 API Key。登录后进入控制台在 API Keys 页面创建一个新 Key复制保存。这个 Key 就是后面所有配置里填的凭证。地址是 https://taotoken.net/console/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentapi_keys_configutm_campaignrewrite 。第二是确认你要用的模型通道。如果你只是做依赖分析、代码解释这类轻量任务用模型对话页面先试一下返回是否正常就够了 https://taotoken.net/models?utm_sourcetaotoken_aicg_blog_endutm_contentmodel_chat_checkutm_campaignrewrite 。如果你打算长期在 VSCode 里做编码辅助、跑 Agent 类任务那更适合用 Coding Plan https://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentcoding_plan_depcheckutm_campaignrewrite 。注意Key 只创建一次就够不要每个工具建一个。统一 Key 的好处是额度、日志、限流都在一个地方看出问题好排查。接入文档在 https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_contentdoc_depcheckutm_campaignrewrite 配置字段以文档为准。下面第三节给出 VSCode settings.json 的配置骨架。3. 可复制配置VSCode settings.json 与 depcheck 落地3.1 VSCode settings.json 配置骨架VSCode 的用户设置或工作区设置里可以放 AI 辅助插件的统一配置。不同插件字段名不一样但核心就三个base_url、api_key、model。下面是一个通用骨架你按自己装的插件调整键名{ aiAssistant.baseUrl: https://taotoken.net/api, aiAssistant.apiKey: sk-你的TaoTokenKey, aiAssistant.model: 你的模型名, editor.formatOnSave: true, files.exclude: { **/node_modules: true } }工作区级别的配置建议放在项目根目录的.vscode/settings.json这样团队共享时不会把 Key 提交上去——记得把.vscode/settings.json里含 Key 的部分用环境变量替代或者干脆只放非敏感项。Key 建议通过系统环境变量注入例如在 settings.json 里写aiAssistant.apiKey: ${env:TAOTOKEN_API_KEY}然后在 shell 里 export。3.2 安装 depcheck 并跑第一次检查depcheck 是专门做未使用依赖检测的工具对 Vue 单文件组件的 import 识别比较准。在项目根目录执行# 项目内安装避免污染全局 npm install depcheck --save-dev # 直接运行检查 npx depcheck跑完你会看到类似这样的输出Unused dependencies * lodash * moment Unused devDependencies * vue/cli-plugin-eslint Missing dependencies * vue-router三段含义要分清Unused dependencies 是生产依赖里没被引用的Unused devDependencies 是开发依赖里没被引用的Missing dependencies 是代码里用了但 package.json 没声明的——这一段千万别忽略它往往意味着你的依赖声明有遗漏。3.3 用 .depcheckrc 降低误报depcheck 默认会把一些通过配置文件、CLI 使用的包误判为未使用。Vue 项目里最常见的误报来源是 babel、eslint、postcss 这类工具链。在项目根目录建.depcheckrc{ ignores: [ eslint-*, babel-*, babel/*, postcss-*, autoprefixer, sass, less ], skip-missing: false, specials: [ vue-cli-service, webpack, vite ] }ignores里的包会被跳过检测specials用来声明那些通过特殊方式调用的工具。配好之后再跑npx depcheck误报会明显减少。3.4 npm-check 作为补充npm-check 的强项是交互式更新和 unused 检测适合做二次确认npm install -g npm-check npm-check --unused它会列出未使用的包并给出可交互的删除选项。我一般用 depcheck 出报告用 npm-check 复核一遍两边都判定未使用的包删除把握就很大了。3.5 在 package.json 里加脚本把检查固化成脚本团队每个人都能跑{ scripts: { dep:check: depcheck, dep:check:strict: depcheck --json depcheck-report.json } }dep:check:strict输出 JSON方便接 CI 或写脚本做进一步处理。4. 验证请求确认检查结果与配置生效4.1 验证 depcheck 结果是否可信拿到未使用列表后不要直接删。先做交叉验证。以lodash为例在 VSCode 里全局搜索# 在项目根目录搜索 lodash 的引用 grep -rn lodash src/ --include*.vue --include*.js --include*.ts如果搜不到任何 import 或 require基本可以确认未使用。但要注意几种特殊情况动态 import、require拼接路径、模板里通过全局变量使用、以及只在vue.config.js或main.js里注册的插件。这些 depcheck 有时识别不到需要人工确认。4.2 验证 TaoToken 配置是否通配置写完后用一条 curl 验证 API 通道是否正常curl -X POST https://taotoken.net/api/v1/chat/completions \ -H Content-Type: application/json \ -H Authorization: Bearer $TAOTOKEN_API_KEY \ -d { model: 你的模型名, messages: [{role: user, content: 回复 ok}] }返回里能看到正常的内容字段说明 Key 和 base_url 都对。如果返回 401检查 Key 是否复制完整返回 404检查 base_url 是否漏了/api或路径拼错。具体字段以接入文档为准 https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_contentdoc_verifyutm_campaignrewrite 。4.3 删除依赖并验证项目确认某个包确实未使用后执行删除npm uninstall lodash # 重新安装依赖确保 lock 文件同步 npm install # 启动项目验证 npm run serve启动后重点看控制台有没有模块找不到的报错页面主要路由是否正常渲染。如果项目有单元测试跑一遍npm run test:unit更稳妥。4.4 用构建产物做最终确认删完一批依赖后对比构建体积npm run build看dist目录大小变化。如果删了包体积没变说明这个包可能被打进了 vendor chunk 但实际没用到或者被其他包间接依赖了。这时候可以用webpack-bundle-analyzer看一眼npm install webpack-bundle-analyzer --save-dev在vue.config.js里加const BundleAnalyzerPlugin require(webpack-bundle-analyzer).BundleAnalyzerPlugin; module.exports { configureWebpack: { plugins: [new BundleAnalyzerPlugin()] } };构建后会自动打开分析页面能直观看到每个包占多大、有没有冗余。5. 本篇常见错排查5.1 depcheck 报大量误报最常见的原因是没配.depcheckrc导致 babel、eslint、postcss 全被标成未使用。按 3.3 节的配置补上 ignores 即可。另一个原因是项目用了 monorepo 结构depcheck 默认只扫当前目录需要在根目录跑或指定--ignore-dirs。5.2 删了包之后运行时报模块找不到说明这个包被间接引用了。典型场景A 包依赖 B 包你删了 B但 A 在运行时 require 了 B。解决办法是看报错栈找到是哪个包在引用它然后决定是保留 B 还是换掉 A。用npm ls 包名可以查依赖树npm ls lodash5.3 VSCode 里 import 没有自动补全清理依赖后如果发现 import 补全失效检查 VSCode 的 TypeScript / Volar 插件是否正常以及jsconfig.json或tsconfig.json的 paths 配置有没有被改动。Vue3 项目建议用 VolarVue2 用 Vetur两者不要同时开。5.4 TaoToken 配置返回 401 或 403先确认 Key 没有多余空格再确认请求头格式是Authorization: Bearer key。如果用的是插件检查插件是否把 base_url 自动拼了/v1导致最终路径变成/api/v1/v1/...。以文档给出的路径为准。5.5 npm-check 和 depcheck 结果不一致两个工具的扫描策略不同depcheck 更严格npm-check 更宽松。不一致时以 depcheck 为准再用 grep 人工确认。不要因为一个工具说未使用就直接删。5.6 删除 devDependencies 后构建失败有些 devDependencies 是构建时通过 CLI 调用的比如vue/cli-service、vite、webpack。这类包即使代码里没有 import也不能删。把它们加进.depcheckrc的 specials 里。6. 把检查流程固化下来整套流程跑通后建议固化成三步每周或每个迭代跑一次npm run dep:check对报告里的每个包做 grep 交叉验证确认后删除并跑构建验证。VSCode 里可以装 npm Intellisense 和 Import Cost 两个插件前者帮你在写 import 时看清包名后者实时显示引入包的大小从源头减少乱装依赖。TaoToken 的配置一次配好后面在 VSCode 里做依赖分析、代码解释、批量重构时都能直接用。需要长期做编码辅助的走 Coding Plan 更划算 https://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentcoding_plan_finalutm_campaignrewrite 。只是偶尔验证模型返回的用模型对话页面就够 https://taotoken.net/models?utm_sourcetaotoken_aicg_blog_endutm_contentmodel_chat_finalutm_campaignrewrite 。Key 管理和接入细节看 API Keys 和文档两个入口 https://taotoken.net/console/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentapi_keys_finalutm_campaignrewrite 、 https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_contentdoc_finalutm_campaignrewrite 。最后提醒一句删依赖前一定先提交代码用 git 兜底。删完跑一遍完整构建和核心页面确认没问题再合并。依赖清理不是一次性任务把它变成迭代里的固定动作项目才不会重新变臃肿。