Import Cost 是 VSCode 插件，实时显示 import 语句引入模块的压缩及 gzip 后体积，支持 ESM、CommonJS 和动态 import，基于 size-limit 静态分析，助力开发中快速感知依赖大小并优化。
在前端开发中，依赖包体积直接影响首屏加载速度和用户体验。Import Cost 插件能让你在 VSCode 编辑器里，**实时看到 import 语句引入的模块大小**（压缩后、gzip 后等），无需手动查文档或构建分析，非常轻量实用。
安装与启用很简单
打开 VSCode 扩展市场（Ctrl+Shift+X），搜索 Import Cost，安装由 wix 官方维护的插件（图标是 ?+数字）。安装后重启编辑器或直接生效，不需要额外配置。
它会自动识别项目中的 node_modules 和已安装的打包工具（如 webpack、rollup、vite），默认基于 size-limit 的底层逻辑估算大小。
代码中直接看到体积提示
在 .js/.ts 文件里写 import 时，右侧会显示灰色小字，例如：
import React from 'react'; // 42.1 kB (gzipped: 12.8 kB)import { debounce } from 'lodash-es'; // 1.2 kB (gzipped: 0.5 kB)
这些数值是静态分析结果，不是运行时真实体积，但足够用于快速对比和初步判断。
- 支持 ESM、CommonJS、动态 import() 语法
- 对 tree-shaking 友好（比如
lodash-es比lodash显示更小） - 遇到未解析的包或路径错误，会显示
???或空白，说明模块未正确安装或路径异常
配合实际优化更有效
光看数字还不够，要结合业务做取舍：
- 发现某个 UI 库整体太大？试试按需导入（如
import Button from 'antd/lib/button'）或换轻量替代品 - 看到
moment占了 200+ kB？换成dayjs或date-fns - 动态 import 异步加载的模块，右侧也会标出体积，帮你评估懒加载是否值得
注意它的局限性
Import Cost 是静态分析工具，不是构建报告：
- 不反映最终打包产物中实际被保留的代码量（tree-shaking、minify、scope hoisting 等影响不在其计算范围内）
- 无法处理条件 import、运行时拼接路径等动态行为
- 多版本共存时（如 node_modules 里嵌套多个 lodash 版本），可能只读取最外层
真正做体积治理，还是要搭配 webpack-bundle-analyzer 或 vite-plugin-visualizer 查构建报告。Import Cost 的价值在于——写代码时就建立体积敏感意识。
基本上就这些。一个小插件，不复杂但容易忽略，却能让性能优化从“事后补救”变成“随手控制”。
