一句話作用：在代碼里 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。”