Import cost 插件显示的是包在 Web 环境下 gzip 压缩后的预计传输体积，而非 node_modules 中的原始大小；它通过调用 Bundlephobia API 实现，支持静态 import 语句，不处理动态 import() 或未解析的路径别名。
Import Cost 插件能让你在 vscode 编辑器里，光标停在 import 语句上时，立刻看到这个包（或模块）被引入后**实际增加的打包体积**，无需运行构建、不用切到终端，非常直观高效。
它显示的是什么大小？
插件背后调用的是 Bundlephobia 的 API，显示的是该包在 Web 环境下压缩（gzip）后的**预计传输体积**。不是 node_modules 里的原始大小，而是更贴近真实加载性能的关键指标。
例如：import { debounce } from 'lodash' → 显示约 1.2 KBimport debounce from 'lodash/debounce' → 显示约 0.9 KB
一眼看出“按需导入”确实更轻量。
怎么安装和启用？
- 打开 VSCode 扩展市场（Ctrl+Shift+X / Cmd+Shift+X），搜索 Import Cost
- 安装由 wix 官方发布的插件（图标是 ?）
- 重启 VSCode 或直接打开一个含
import的 js/TS 文件，把光标放在导入路径上，右下角就会浮出体积提示 - 默认开启，无需额外配置；如需关闭，可在设置中搜索
import cost取消勾选 Import Cost: Enabled
哪些导入它能识别？
支持常见格式，包括：
import react from 'react'import { useState } from 'react'import _ from 'lodash'import axios from 'axios'-
import Button from '@/components/Button'（本地路径不查体积，但不会报错）
注意：不解析动态 import()，也不处理别名（如 @/）指向的第三方包 —— 这类需确保路径最终解析为真实 npm 包名才能查到体积。
小贴士：提升判断准确性的习惯
- 优先写具体子路径（如
date-fns/format而非date-fns），插件能更准地估算 - 遇到显示
Unknown，可能是包未收录于 Bundlephobia（较新或私有包），也可能是网络请求失败（可检查控制台输出） - 搭配
source-map-explorer或webpack-bundle-analyzer做构建后验证，形成“编码时预估 + 构建后确认”的闭环
基本上就这些。它不复杂，但容易忽略——每次少引一个大包，积少成多就是更快的首屏和更好的 Lighthouse 分数。