在开发前端项目时，我们通常需要引入各种第三方库来提升开发效率和用户体验。但是过多的依赖会增加项目的体积，从而影响页面加载速度和用户体验。因此，我们需要了解如何比较不同依赖包的大小，以便选择最优的依赖。
npm 包 compare-size 就是一个非常实用的工具，可以帮助我们快速比较多个 npm 包的大小，并给出详细的分析结果。本文将为大家介绍如何使用该工具。
安装
首先，我们需要全局安装 compare-size：
npm install -g compare-size
使用方法
compare-size 的使用非常简单，只需要在命令行中输入以下命令即可：
compare-size package1 package2 ...
其中，package1、package2 等表示要比较的 npm 包名称。你可以同时比较多个包的大小，只需要在命令行中依次列出它们的名称即可。
例如，我们想比较 lodash 和 underscore 这两个常用的工具库的大小，可以这样做：
compare-size lodash underscore
执行完以上命令后，compare-size 会自动下载这些包并进行比较，然后输出详细的分析结果。例如：
-- -------------------- ---- ------- - -------------- ------ --- - ----------------- ------ --- ---------- -- --- ----- --------------- ----- -- ------------------ ----- -- -------------- -- -- ------- ---- ----------------- ---------- -- ---- ----- --------------- ---- -- ------------------ ---- -- -------------- -- -- ------- ---- -----------------展开代码
从上面的结果可以看出，lodash 的体积比 underscore 小，而且经过 gzip 压缩后也更小。因此，在实际项目中，我们应该优先选择 lodash。
高级用法
除了简单的比较外，compare-size 还提供了一些高级的功能，方便我们更深入地分析依赖包的大小。下面介绍其中两个常用的选项。
--json
使用 --json 选项可以将比较结果输出为 JSON 格式，方便我们进行进一步处理和分析。例如：
compare-size lodash underscore --json > result.json
执行完以上命令后，compare-size 会将比较结果输出为一个 JSON 文件。你可以使用其他工具（如 jq）来对该文件进行处理和分析。
--why
使用 --why 选项可以让 compare-size 显示每个包中各个模块的大小，以及可能导致包变大的原因。例如：
compare-size react@17.0.2 preact@10.5.14 --why
执行完以上命令后，compare-size 会输出如下结果：
-- -------------------- ---- ------- - ------------ ------- --- - -------------- ----- --- ---------- -- --- ----- ------------- ------ -- --------------- ---- -- ------------ -- ----- ------ ---- -------------- --- -- ------------ ------- ------ ----- -- -------- --------------------------- ---- -- ------- ---------------------------------------------- ---- -- ------- --------------------------------------- ---- -- ------- ------------------------------- -- - ----------------------------------------------------------- -------- ----------------------------------------------------------------------------------展开代码
