Import Cost 插件可在 VSCode 中显示 import 语句的 gzip 压缩体积，需安装插件、验证功能、可选配置 webpack 分析器、排除特定文件类型，并排查 NaN/空白问题。
如果您在使用 VSCode 编写 JavaScript 或 TypeScript 项目时，希望直观了解每个 import 语句所引入模块的体积影响，则可能是由于缺乏对依赖包实际大小的感知。Import Cost 插件可直接在编辑器中显示导入语句对应的压缩后（gzip）尺寸估算值。以下是启用与配置该插件的具体操作：
本文运行环境：MacBook Air M2，macOS Sequoia。
一、安装 Import Cost 插件
该插件需通过 VSCode 扩展市场获取并启用，是后续所有功能生效的前提。
1、打开 VSCode，点击左侧活动栏最下方的扩展图标（或按快捷键 Ctrl+Shift+X / Cmd+Shift+X）。
2、在扩展搜索框中输入 Import Cost，找到作者为 wix 的官方插件。
3、点击“安装”按钮，等待安装完成，随后点击“重新加载”使插件生效。
二、验证插件是否正常工作
插件启用后会自动扫描当前文件中的 import 语句，并在右侧内联显示估算大小，无需额外配置即可初步使用。
1、新建一个 .js 文件，输入 import React from 'react';。
2、观察 import 行末尾是否出现灰色小字，例如 2.4 kB 或 gzip: 856 B。
3、若未显示，确认当前文件位于已初始化 npm/yarn/pnpm 的项目根目录下，且 node_modules 已存在。
三、配置自定义打包分析器
默认情况下插件使用内置轻量分析器，但可通过配置切换为更精确的 webpack-bundle-analyzer 支持模式，适用于复杂构建场景。
分析 Java Spring Boot 后端 Controller 代码，自动生成 Markdown 格式的接口文档。当用户说“生成 Java 接口文档”、“生成 API 文档”、“从 Spring 代码生成文档”时触发。
1、在项目根目录创建 import-cost.config.js 文件。
2、写入以下内容：module.exports = { analyzer: 'webpack' };
3、确保项目中已安装 webpack 和 webpack-bundle-analyzer 作为开发依赖。
四、禁用特定文件类型的大小提示
对于类型声明文件（如 .d.ts）或测试文件（如 .test.js），插件默认仍会尝试计算，可能产生无关提示，可通过设置排除。
1、打开 VSCode 设置（Cmd+, / Ctrl+,），搜索 importcost.exclude。
2、点击“在 settings.json 中编辑”，添加数组项："**/*.d.ts", "**/*.test.js"。
3、保存文件，重启 VSCode 窗口使配置生效。
五、解决 import 显示为 NaN 或空白的问题
当插件无法解析模块路径或遇到非标准导出语法时，可能出现尺寸信息缺失，需从路径与语法两方面排查。
1、检查 import 路径是否为绝对路径或别名路径，确认 jsconfig.json 或 tsconfig.json 中已正确配置 baseUrl 和 paths。
2、避免使用动态 import() 表达式，插件仅支持静态 import 语句，import('./utils').then(...) 不会被识别。
3、若引用的是未发布至 npm 的本地包，确认其 package.json 包含有效的 main 或 module 字段。
