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 行末尾显示灰色小字，例如：

Expanso yaml-to-json

使用 Expanso Edge 管道将 YAML 输入转换为 JSON 格式。

下载

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”

基本上就这些。用它一眼识别“大块头”依赖，再决定是否拆分、替换或懒加载，效率提升很实在。