Import Cost插件：在VSCode中实时查看NPM包的大小_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

2025-12-13

浏览次数：次

Import Cost 插件显示的是包在 Web 环境下 gzip 压缩后的预计传输体积，而非 node_modules 中的原始大小；它通过调用 Bundlephobia API 实现，支持静态 import 语句，不处理动态 import() 或未解析的路径别名。

import cost插件：在vscode中实时查看npm包的大小

Import Cost 插件能让你在 VSCode 编辑器里，光标停在 import 语句上时，立刻看到这个包（或模块）被引入后**实际增加的打包体积**，无需运行构建、不用切到终端，非常直观高效。

插件背后调用的是 Bundlephobia 的 API，显示的是该包在 Web 环境下压缩（gzip）后的**预计传输体积**。不是 node_modules 里的原始大小，而是更贴近真实加载性能的关键指标。

例如：
import { debounce } from 'lodash' → 显示约 1.2 KB
import debounce from 'lodash/debounce' → 显示约 0.9 KB
一眼看出“按需导入”确实更轻量。

支持常见格式，包括：

Glean

Glean是一个专为企业团队设计的AI搜索和知识发现工具

210 查看详情 Glean

注意：不解析动态 import()，也不处理别名（如 @/）指向的第三方包 —— 这类需确保路径最终解析为真实 npm 包名才能查到体积。

优先写具体子路径（如 date-fns/format 而非 date-fns），插件能更准地估算
遇到显示 Unknown，可能是包未收录于 Bundlephobia（较新或私有包），也可能是网络请求失败（可检查控制台输出）
搭配 source-map-explorer 或 webpack-bundle-analyzer 做构建后验证，形成“编码时预估 + 构建后确认”的闭环

基本上就这些。它不复杂，但容易忽略——每次少引一个大包，积少成多就是更快的首屏和更好的 Lighthouse 分数。

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