🛠️别等上线才发现包太大！这个隐藏工具让每一次 import 都 “心中有数”

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

---

1️⃣ 30 秒安装 & 启动

1. 打开 VSCode → 扩展商店搜索 Import Cost → 安装
2. 重启 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️⃣ 一键配置（可选）

// 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️⃣ 一键脚本：批量检查

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

输出示例：

lodash            70.2 kB
dayjs             2.1 kB

---

6️⃣ 一句话

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