Import Cost 插件在 import 行末以灰色小字显示 gzip 后体积，如“// 3.2 KB”；需正确配置 package.json 入口、安装依赖且不支持动态 import；配合 webpack Bundle Analyzer 等工具优化。
vscode 的 Import Cost 插件能让你在编辑器里直接看到每个 import 语句引入的包体积（通常是 gzip 后大小），帮你快速识别“悄悄吃掉打包体积”的依赖。
它怎么显示体积信息？
插件会在 import 行末尾以灰色小字标注大小，例如：
import react from ‘react‘; // 3.2 KB
import { debounce } from ‘lodash-es’; // 1.8 KB
import moment from ‘moment’; // 24.7 KB
注意：显示的是该导入路径实际解析到的模块体积，不是整个包的体积（比如只 import 某个函数时，会按 tree-shaking 后估算）。
安装和启用很简单
- 在 VSCode 扩展市场搜 Import Cost（作者是 wix）
- 点击安装，重启或重载窗口后自动生效
- 默认支持 javaScript / typescript / vue / Svelte 等常见文件类型
哪些情况它可能不显示或不准？
- 未配置
package.json中的main、module或exports字段，导致无法正确解析入口 - 使用了动态
import()，插件暂不支持实时计算 - 本地未安装对应依赖（插件需读取 node_modules 中的实际文件）
- 某些 ESM-only 包（如
lodash-es）在旧版 node 或配置下可能误估为全量包
配合构建工具更有效
Import Cost 是“感知体积”的第一步。真正优化要结合：
- Webpack Bundle Analyzer 查看最终打包产物构成
- size-limit 在 CI 中做体积阈值管控
- 用
lodash-es替代lodash，或改用更轻量的替代库（如date-fns替moment）
基本上就这些 —— 它不解决体积问题，但让你一眼看见问题在哪。