Import Cost 插件可实时显示 import 语句引入模块的压缩后体积，需安装插件、验证生效、配置路径、排除无关导入，并排查解析异常。
如果您在使用 vscode 编写 javascript 或 typescript 项目时，希望实时了解每个 import 语句所引入模块的体积开销，则 import cost 插件可提供直观的大小提示。以下是启用并有效使用该插件的具体操作步骤：
本文运行环境：MacBook Air，macOS Sequoia。
一、安装 Import Cost 插件
该插件需通过 VSCode 扩展市场安装，安装后即可在编辑器中自动显示导入模块的压缩后体积估算值。
1、打开 VSCode，点击左侧活动栏中的扩展图标（或按快捷键 Ctrl+Shift+X）。
2、在扩展搜索框中输入 Import Cost。
3、在搜索结果中找到作者为 wix 的官方插件，点击“安装”按钮。
4、安装完成后点击“重新加载”以激活插件功能。
二、验证插件是否生效
插件启用后，会在 import 语句右侧以灰色小字形式显示估算的包体积，该数值基于模块的 minified + gzipped 大小。
1、新建一个 .js 文件，输入 import React from 'react';。
2、观察 import 行末尾是否出现类似 ~4.2 kB 的提示。
3、若未显示，检查当前文件是否位于已初始化的 npm 项目中（即存在 package.json 文件）。
三、配置插件以支持特定模块解析
默认情况下，Import Cost 依赖本地 node_modules 进行体积计算；若项目使用 pnpm 或自定义 modules 路径，需手动指定解析范围。
1、按下 Cmd+,（macOS）打开设置界面，切换至“工作区”标签页。
2、在搜索框中输入 importcost.path。
3、点击“编辑 in settings.json”，在 JSON 中添加键值对："importCost.path": "./node_modules"。
4、若使用 pnpm，路径应设为 ".pnpm/node_modules"。
四、禁用对特定导入的体积提示
某些导入（如类型声明、CSS 模块或动态 import）不产生运行时体积开销，可选择性关闭其提示以减少干扰。
1、在 VSCode 设置中搜索 importcost.exclude。
2、点击“在 settings.json 中编辑”，添加数组项："importCost.exclude": ["\.d\.ts$", "\.css$", "import\(.*\)"]。
3、保存后，匹配正则表达式的导入行将不再显示体积提示。
五、排查体积显示异常问题
当 import 行未显示大小，或显示 NaN、0 B 时，通常源于模块未被正确解析或缺少构建产物。
1、确认目标模块已通过 npm install 或对应包管理命令完成安装。
2、检查模块是否存在 package.json 中声明的 main、module 或 exports 字段。
3、对使用 TypeScript 编写的第三方库，确保其已发布 .d.ts 类型文件及编译后的 JS 输出。
