Import Cost 插件可在 VSCode 中实时显示 import 语句引入模块的压缩后体积；需安装插件、验证语言模式、配置 Webpack 路径并处理 no size 场景以确保准确生效。
如果您在使用 VSCode 开发 JavaScript 或 TypeScript 项目时，希望直观了解每个 import 语句所引入模块的体积开销，则 Import Cost 插件可实时在编辑器中显示导入包的压缩后大小。以下是启用并正确使用该插件的多种配置与验证方法：
本文运行环境：MacBook Air，macOS Sequoia。
一、安装 Import Cost 插件
该插件需通过 VSCode 扩展市场获取并启用，确保其能注入语法装饰器并在 import 行末显示体积标签。
1、打开 VSCode，点击左侧活动栏中的扩展图标（或按快捷键 Cmd+Shift+X）。
2、在搜索框中输入 Import Cost，找到作者为 wix 的官方插件。
3、点击“安装”按钮，安装完成后点击“重新加载”使插件生效。
二、验证插件是否正常工作
插件依赖 TypeScript/JavaScript 语言服务解析 import 路径，需确保当前文件为支持的语言模式且存在有效导入语句。
1、新建一个 index.ts 文件，并写入一行导入语句，例如：import React from 'react';
2、保存文件后，观察 import 行右侧是否出现灰色小字，如 ~4.2 kB 或 no size。
3、若未显示，尝试将文件语言模式手动设为 TypeScript（右下角点击语言标识并选择）。
三、配置 Webpack 大小分析支持
Import Cost 默认使用 package-size 库估算体积，但对本地路径或未发布包可能返回不准确结果；启用 Webpack 分析可提升精度。
1、在项目根目录创建 webpack.config.js，内容包含 externals: {} 和基础 entry 配置。
2、在 VSCode 设置中打开 JSON 配置（Cmd+, → Open Settings (JSON)），添加字段："importCost.webpackConfigPath": "./webpack.config.js"。
3、重启 VSCode 窗口，重新打开含 import 的文件，检查体积标注是否更新为更精确值。
四、处理“no size”提示
当插件无法获取模块体积时会显示 no size，常见于未发布到 npm 的私有包、相对路径导入或缺少 package.json 的依赖。
1、确认被导入包的 package.json 中包含 "main" 或 "module" 字段。
2、对相对路径导入（如 import utils from './utils'），在同级目录下提供 utils/package.json 并声明入口。
3、若导入的是本地 TypeScript 模块，确保已安装 @types/node 且 tsconfig.json 中 "moduleResolution" 设为 node。
