VSCode Import Cost：5 分钟学会依赖瘦身

一句话作用 ：在代码里 import 时，实时显示包大小，帮你一眼揪出体积炸弹。

1️⃣ 30 秒安装 & 启动

打开 VSCode → 扩展商店搜索 Import Cost → 安装
重启 VSCode ，立即生效，零配置。

2️⃣ 使用方式（开箱即用）

场景	显示效果	说明
全量导入	`import lodash from 'lodash';` 🔍 `+70.2 kB`	整个包被拉进来
按需导入	`import debounce from 'lodash/debounce';` 🔍 `+2.1 kB`	仅实际使用的代码
动态导入	`import('moment/locale/zh-cn')` 🔍 `+12.5 kB`	异步包大小也会显示

大小 = gzip 后体积，颜色越红越危险。

3️⃣ 一键配置（可选）

json 复制代码

// settings.json
"importCost.smallPackageSize": 4,     // <4KB 显示绿色
"importCost.mediumPackageSize": 40,   // 4-40KB 黄色
"importCost.largePackageColor": "#ff0000"  // >40KB 红色

4️⃣ 实际场景：揪出体积炸弹

替换前	替换后	节省
`import * as moment from 'moment'`	`import dayjs from 'dayjs'`	-65 kB
`import _ from 'lodash'`	`import { debounce } from 'lodash-es'`	-68 kB

5️⃣ 一键脚本：批量检查

bash 复制代码

# 全局检查所有 import 大小
npx import-cost src/**/*.js

输出示例：

复制代码

lodash            70.2 kB
dayjs             2.1 kB

6️⃣ 一句话

"我用 Import Cost 把 lodash 换成 dayjs，首屏 JS 小了 65 kB。"