Import cost 插件在编辑时实时显示 import 模块的 gzip 预估体积（如“≈ 4.2 KB”），基于 esbuild 等轻量分析逻辑快速估算，支持 ES/CSM、动态导入及别名路径，但不替代构建分析工具。
Import Cost 插件能让你在编辑代码时，直接看到每个 import 语句引入的模块体积（通常以 KB 为单位），不用手动打包或分析，节省大量调试时间。
它怎么工作的？
插件基于 esbuild 或 rollup-plugin-import-size 类似的轻量分析逻辑，在后台快速估算模块的压缩后大小（注意：不是精确打包结果，而是合理近似值）。它只读取 import 路径，不执行代码，也不影响项目运行。
- 支持 ES Module、Commonjs、动态 import() 语法
- 自动识别 node_modules 中的包，也支持相对路径和别名（如 @/components，需配置解析规则）
- 默认显示 gzip 后预估大小，更贴近真实网络加载体积
安装与基础配置
vs code 商店搜 “Import Cost” 安装即可。启用后，默认在 import 行末尾显示灰色小字，例如：
import { debounce } from ‘lodash’; // ≈ 4.2 KB
如需调整行为，可在 VS Code 设置中搜索 importCost 修改：
- importCost.showGzipSize：设为 false 可切换为原始大小
- importCost.maxFileSize：设置阈值，超大的 import 会标红提醒（比如设为 10，超过 10 KB 显示红色警告）
- importCost.includenodeModules：关闭后只显示本地文件导入大小
它不能替代什么？
Import Cost 是开发阶段的“快速尺子”，不是构建分析工具：
- 不反映 tree-shaking 效果（例如只 import 一个函数，但插件可能显示整个包大小）
- 不处理条件编译、环境变量、css-in-JS 等副作用引入
- 对未发布到 npm 的本地包或 monorepo 内部依赖，需确保路径可解析，否则显示 “unknown”
基本上就这些。用它一眼识别“大块头”依赖，再决定是否拆分、替换或懒加载，效率提升很实在。