import cost插件不显示体积的主因是文件未被识别为js/ts（状态栏显示plain text），需通过ctrl+shift+p切换语言模式；其次检查项目根目录、node.js环境、插件启用状态及node_modules完整性，别名路径、pnpm配置、webpack对接和排除规则也影响显示效果。
Import Cost 插件装完不显示体积？大概率不是插件坏了，而是它根本没“看见”你的 import 语句——语言模式、node_modules、路径解析这三关卡住一个，就全白搭。
为什么 import 行右边没出现 ~4.2 kB 这类提示
最常见原因是当前文件没被识别为 JavaScript 或 TypeScript。右下角状态栏如果显示 Plain Text，插件直接跳过整份文件。按 Ctrl+Shift+P（Windows/Linux）或 Cmd+Shift+P（macOS），输入 Change Language Mode，选 JavaScript 或 TypeScript 即可。
其他关键检查点：
- 确认 VSCode 当前打开的是项目根目录（含
package.json和node_modules），不是某个子文件夹 - 执行
node --version确保系统有 Node.js，插件依赖本地 Node 运行时做体积估算 - 在命令面板搜
Extensions: Show Enabled Extensions in This Workspace，确认Import Cost在当前工作区是开启状态 - 动态
import()、带逻辑判断的导入（如process.env.NODE_ENV === 'dev' && import('./debug')）不会被计算
显示 “?” 或 NaN 而不是具体数值
这说明插件找到了 import 语句，但无法解析目标模块大小。典型原因包括：
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
-
node_modules缺失或不完整：运行npm install或yarn install补全依赖 - 用了 pnpm：默认路径是
.pnpm/node_modules，需在settings.json中显式配置"importCost.path": ".pnpm/node_modules" - 导入路径是别名（如
@/utils）：检查jsconfig.json或tsconfig.json的baseUrl和paths是否生效 - 模块本身没提供标准入口字段：比如缺失
package.json中的main、module或exports
怎么让体积提示更准，比如支持 webpack 分析
默认用的是轻量静态分析，精度有限。想对接真实构建逻辑，得手动接入 webpack：
- 在项目根目录新建
import-cost.config.js - 写入：
module.exports = { webpackConfigPath: './webpack.config.js' }; - 确保已安装
webpack和webpack-bundle-analyzer（开发依赖） - 注意：该配置只影响体积估算逻辑，不改变插件是否启用或语言模式设置
另外，TypeScript 类型包（如 @types/react）默认算作 0 B，若想让它参与计算，需开启 Import Cost: Enable Typescript Support 设置。
哪些 import 不该显示体积，怎么屏蔽
类型声明、CSS、测试文件这些不产生运行时 JS 体积，却常被误标，干扰判断。可在 settings.json 中用正则排除：
"importCost.exclude": ["\.d\.ts$", "\.css$", "import\(.*\)"]- 或者按文件路径排除：
"**/*.d.ts", "**/*.test.ts" - 私有包不想统计？建个
.importcostignore文件，每行写一个包名，如my-internal-utils
真正容易被忽略的是：它永远只看当前 node_modules 结构，对多版本嵌套（比如 lodash 被不同依赖各自装了 v4 和 v5）只会取最外层，不代表最终打包里实际打进去了多少。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
