Import Cost 插件可在 VSCode 中实时显示 JavaScript/TypeScript import 语句的第三方包体积估算值；需安装插件、配置 webpack 上下文、启用 TypeScript 支持、设置忽略列表并可切换 gzip/raw 显示模式。
如果您在使用 VSCode 编写 JavaScript 项目时，希望实时了解每个 import 语句所引入的第三方包体积大小，则可能是由于缺乏对依赖模块实际大小的可视化反馈。Import Cost 插件可直接在编辑器中显示每个 import 行旁的压缩后体积估算值。以下是启用并正确使用该插件的步骤：
本文运行环境：MacBook Pro，macOS Sequoia。
一、安装 Import Cost 插件
该插件需通过 VSCode 扩展市场安装，安装后会自动注入语法高亮与体积计算逻辑到 import 语句行尾。
1、打开 VSCode，点击左侧活动栏中的扩展图标（或按快捷键 Ctrl+Shift+X）。
立即学习“Java免费学习笔记（深入）”；
2、在扩展搜索框中输入 Import Cost。
3、在搜索结果中找到作者为 wix 的官方插件，点击“安装”按钮。
4、安装完成后，无需重启，插件即刻生效。
二、配置 Webpack 打包上下文
Import Cost 默认使用内置的轻量级解析器估算体积，但若项目已配置 webpack 或 vite，可通过本地配置文件提升估算精度。
1、在项目根目录创建 import-cost.config.js 文件。
2、写入以下内容以启用 webpack 分析支持：
module.exports = { webpackConfigPath: './webpack.config.js' };
3、确保项目中已安装 webpack 和 webpack-bundle-analyzer 作为开发依赖。
三、启用 TypeScript 类型感知体积计算
当项目使用 TypeScript 且 import 指向 .d.ts 或类型包时，插件默认可能忽略体积计算。启用类型感知可避免将 @types 包误判为零体积。
1、在 VSCode 设置中搜索 import cost typescript。
2、勾选 Import Cost: Enable Typescript Support 选项。
3、重新打开一个 .ts 文件，观察 import 行右侧是否出现 ~0 B 或实际估算值。
四、排除 node_modules 中的特定包
某些内部私有包或未发布至 npm 的本地依赖不应参与体积统计，可通过配置跳过其计算以避免干扰。
1、在项目根目录的 .importcostignore 文件中逐行填写需忽略的包名。
2、例如写入：my-internal-utils 和 @company/core。
3、保存文件后，插件将不再为匹配 import 语句显示体积标签。
五、切换体积单位显示模式
插件默认显示 gzip 后体积，但部分场景需查看原始未压缩体积以便定位大资源文件。
1、按下 Cmd+Shift+P（Mac）或 Ctrl+Shift+P（Windows/Linux）打开命令面板。
2、输入并选择 Import Cost: Toggle Size Display Mode。
3、执行后，所有 import 行旁的体积数值将在 gzip 与 raw 两种模式间切换。
