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 修改：

Magick

无代码AI工具，可以构建世界级的AI应用程序。

225 查看详情

• importCost.showGzipSize：设为 false 可切换为原始大小
• importCost.maxFileSize：设置阈值，超大的 import 会标红提醒（比如设为 10，超过 10 KB 显示红色警告）
• importCost.includeNodeModules：关闭后只显示本地文件导入大小

它不能替代什么？

Import Cost 是开发阶段的“快速尺子”，不是构建分析工具：

• 不反映 tree-shaking 效果（例如只 import 一个函数，但插件可能显示整个包大小）
• 不处理条件编译、环境变量、CSS-in-JS 等副作用引入
• 对未发布到 npm 的本地包或 monorepo 内部依赖，需确保路径可解析，否则显示 “unknown”

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

以上就是Import Cost插件：实时查看导入包的大小的详细内容，更多请关注其它相关文章！

# css  # js  # node  # npm  # 工具  # 懒加载  # 环境变量  # vs code  # cos  # 加载  # 工作流  # 设为  # 极速  # 什么用  # 也不  # 你在  # 相关文章  # 自动识别  # 可在  # 深圳抖音推广营销方案  # seo伪技术视频  # 加盟网站怎么优化排名  # 舞钢seo优化方案  # 北京网站优化哪个最好  # 泰州网站推广哪里有  # 互联网推广营销费用多少  # 唐山智能化网站建设优势  # 营销推广配音bgm  # 杨浦seo推广加盟