Import Cost 插件无需快捷键，打开JS/TS文件后自动在import语句旁标注体积（如~2.1 kB），依赖正确语言模式、项目根目录及Node环境；真实体积需通过webpack-bundle-analyzer构建后查看。
Import Cost 插件本身不依赖 Webpack 构建过程，也不通过快捷键触发体积计算——它是在编辑器打开 JS/TS 文件时自动注入行尾标注的。所谓“VSCode 快捷键用于 Webpack 包体积分析”，实际是混淆了两个独立工具链：一个是实时估算（Import Cost），另一个是真实构建后分析（webpack-bundle-analyzer）。下面直说怎么用、为什么这么用、容易卡在哪。
Import Cost 不需要快捷键，但得先让它“看见”你的 import
插件在你写完 import 语句后几秒内就显示 ~2.1 kB 这类标注，全程无交互。它失败时不会报错，只留空白或 ?，所以你要盯住这三件事：
- 右下角语言模式必须是 JavaScript 或 TypeScript（不是 Plain Text）
- VSCode 当前打开的是项目根目录（含
package.json和node_modules），不是子文件夹如src/ - 终端里能跑通
node --version；如果输出 command not found，插件直接放弃解析
真正要按快捷键的，是 webpack-bundle-analyzer 的启动流程
当你想验证 Import Cost 显示的是否靠谱，就得跑一次真实构建。这时快捷键没用，但终端命令和配置路径很关键：
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 确保项目已安装
webpack-bundle-analyzer：npm install --save-dev webpack-bundle-analyzer - 在
webpack.config.js的plugins数组里加一行：new BundleAnalyzerPlugin() - 运行
npm run build（或你自定义的构建脚本），构建完成后会自动打开http://127.0.0.1:8888页面 - 这个页面才是真实体积来源——
Import Cost显示的~4.2 kB，在这里可能对应 5.1 kB（未 gzip）或 1.3 kB（gzip 后）
为什么 import { debounce } from 'lodash' 总是显示 0 B？不是快捷键问题，是解析路径断了
Import Cost 靠静态分析 package.json 的 exports、main、module 字段来推导实际引入代码。而 lodash v4 的 package.json 没声明标准 exports 映射，插件看到 import { debounce } from 'lodash' 就只能停在入口文件 index.js，里面全是 export * from './xxx'，无法继续追踪。
立即学习“前端免费学习笔记（深入）”；
- 临时解法：
import debounce from 'lodash/debounce'→ 路径明确，能读到真实文件体积 - 长期解法：换
lodash-es+ 启用Import Cost: Enable Typescript Support设置 - 别指望改快捷键能绕过这个限制——这是解析器能力边界，不是 UI 响应延迟
别被“实时”骗了：Import Cost 的 ~ 符号是重要提示，不是装饰
所有带 ~ 的数字（如 ~3.2 kB）都意味着：这只是基于源码字节数的粗略估算，未经过真实 tree-shaking、minify、gzip 流程。它不读你的 terser 配置，也不管你有没有开 sideEffects: false。
- 如果你在
webpack.config.js里配了externals: { react: 'React' }，Import Cost仍会把import React from 'react'算成 42 kB - 动态导入
import('./modal.js')默认不显示体积——插件不处理表达式，这是设计如此，不是 bug - 想看真实影响？唯一可靠动作：跑一次
npm run build，再开webpack-bundle-analyzer页面
