Import Cost 插件在VSCode中为import语句右侧显示压缩后包体积(如72.5 KB),数据源自bundlephobia API;不显示体积的常见原因包括包未发布、路径为本地相对路径或网络请求失败;可通过设置开启估算大小和未压缩大小显示。

Import Cost 插件能让你在写代码时,一眼看清某一行 import 引入的模块实际有多大,避免不知不觉引入重型依赖。
它怎么帮你“看见”包体积?
安装后,VSCode 会在 import 语句右侧自动显示该模块解析后的压缩后体积(如 34.2 KB),数据来自 bundlephobia 的公开 API,支持 npm 上绝大多数包。比如:
-
import { debounce } from 'lodash'→ 显示 72.5 KB(整个 lodash) -
import debounce from 'lodash/debounce'→ 显示 2.1 KB(仅函数)
为什么不是所有 import 都有数字?
常见原因有三个:
- 包未发布到 npm 或名字拼错(比如
lodash-es拼成lodash-es少个横线) - 本地路径或相对路径导入(
import utils from './utils')不查体积 - 网络请求失败或 bundlephobia 临时不可用(可稍后重试)
怎么让它更准、更好用?
默认行为已经很实用,但可以微调提升体验:
- 在 VSCode 设置中搜 importcost.showEstimatedSize,确保为 true
- 开启 importcost.showUnminifiedSize 可同时看到未压缩大小(调试时参考)
- 搭配 Sourcegraph 或 Dependency Cruiser 能进一步分析依赖图谱
基本上就这些——不复杂但容易忽略,加个插件,下次重构或选型时,心里就有数了。










