什么是 import-cost ？
import-cost 是一款通过分析你项目中的 import 语句，计算出所引入的依赖包的大小，并在代码编辑器的编辑器界面显示出来的插件工具。这个插件支持绝大多数的代码编辑器，并且易于安装。
为什么需要 import-cost ？
在我们日常的前端开发工作中，引入外部依赖包是必不可少的一环。它们让我们速度更快，代码变得更整洁。不过随之而来的可能就是依赖包数量增加，大小也开始增大了。如果这些依赖包的大小相加超过了规定的大小，页面的加载时间就会增加，不仅降低了页面的质量，也可能降低了用户的体验。因此我们需要知道每个依赖包的大小，以此来选择合适的依赖包。
如何使用 import-cost ？
安装该插件非常简单，只需要使用 npm 命令行，运行以下命令即可完成安装：
npm install -g import-cost
安装完成后，直接在我们的代码编辑器（例如 VSCode）中打开 JavaScript 配置界面。在 JavaScript 配置界面中添加下面的代码即可开启 import-cost 插件：
"javascript.showImportsFileInfo": true
添加了上述的代码以后， import-cost 将会在我们导入依赖包的时候，实时计算导入包大小，并在编辑器界面中显示出来。我们可以通过以下几个方面来使用该插件：
界面显示
在编辑器界面中，我们可以看见导入依赖包的地方右侧出现了导入依赖包的具体大小。这让我们在选择依赖包的时候，更加准确。
命令行调用
如果我们想再次查看导入依赖包的大小，我们可以使用以下命令，在命令行中直接查看导入依赖包的大小：
npx import-cost [options] <file ...>
命令中有些常用的参数如下：
-t, --threshold: 设置阈值，当导入依赖包的大小超出了该阈值，将会显示出依赖包的大小。-p, --package-manager: 设置依赖包管理器，默认为 npm，也可以为 yarn。-s, --stdio: 导入依赖包的信息以 JSON 格式的形式返回。
总结
在本篇文章中，我们简单介绍了 import-cost 根据我们的代码导入的依赖包的大小，并用该插件显示这些信息显示在代码编辑器中，希望本文对大家学习 import-cost 产生帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f0537df403f2923b035be9b