Import Cost 插件在 import 行末以灰色小字显示 gzip 后体积，如“// 3.2 KB”；需正确配置 package.json 入口、安装依赖且不支持动态 import；配合 Webpack Bundle Analyzer 等工具优化。
VSCode 的 Import Cost 插件能让你在编辑器里直接看到每个 import 语句引入的包体积（通常是 gzip 后大小），帮你快速识别“悄悄吃掉打包体积”的依赖。
它怎么显示体积信息？
插件会在 import 行末尾以灰色小字标注大小，例如：
import React from 'react'; // 3.2 KBimport { debounce } from 'lodash-es'; // 1.8 KB
import moment from 'moment'; // 24.7 KB
注意：显示的是该导入路径实际解析到的模块体积，不是整个包的体积（比如只 import 某个函数时，会按 tree-shaking 后估算）。
灵迅企业网站系统1.0
下载
主要功能：基本设置：站点常规属性设置。导航管理：添加/删除导航菜单，隐藏与显示。单页管理：增加修改单页，通过强大的编辑器可插入动画图片视频等内容。新闻管理：新闻分类管理，增加/删除/修改新闻。产品管理：产品二级分类,产品略缩图，产品推荐，增/删/改产品。订单管理：前台对相应的产品下订单，后台查看与处理订单信息。下载管理：下载分类管理，可做软件下载，文件下载等功能。幻灯管理：幻灯添加、幻灯修改等。招
安装和启用很简单
- 在 VSCode 扩展市场搜 Import Cost（作者是 wix）
- 点击安装，重启或重载窗口后自动生效
- 默认支持 JavaScript / TypeScript / Vue / Svelte 等常见文件类型
哪些情况它可能不显示或不准？
- 未配置
package.json中的main、module或exports字段，导致无法正确解析入口 - 使用了动态
import()，插件暂不支持实时计算 - 本地未安装对应依赖（插件需读取 node_modules 中的实际文件）
- 某些 ESM-only 包（如
lodash-es）在旧版 Node 或配置下可能误估为全量包
配合构建工具更有效
Import Cost 是“感知体积”的第一步。真正优化要结合：
- Webpack Bundle Analyzer 查看最终打包产物构成
- size-limit 在 CI 中做体积阈值管控
- 用
lodash-es替代lodash，或改用更轻量的替代库（如date-fns替moment）
基本上就这些 —— 它不解决体积问题，但让你一眼看见问题在哪。
