作为开发人员，我们经常依赖外部钩子库来节省时间，利用经过充分测试的解决方案，并专注于项目的大局。然而，考虑这些库对捆绑包大小的影响至关重要，这是影响应用程序性能和加载速度的关键因素。让我们探讨一下这些库如何影响包大小，如何检查是否支持 tree-shaking，以及如何做出明智的决策。
为什么捆绑尺寸很重要
- 用户体验：较大的包需要更长的时间来下载、解析和执行，特别是在较慢的网络或设备上。
- SEO 和性能分数：google lighthouse 等工具会惩罚大量捆绑，从而影响您的搜索排名。
- 长期维护：随着项目的增长，较大的捆绑包可能会掩盖性能瓶颈。
外部 hook 库：便利与成本
钩子库是处理复杂状态或可重用模式的常见解决方案，但它们的捆绑成本取决于其结构：
颗粒状（模块化）
- 仅安装您需要的挂钩，最大限度地减少依赖关系。
- 示例：
import { usedebounce } from "hook-lib/usedebounce";
整体式（可摇树）
- 安装一个库，但确保您的构建工具删除未使用的导出。
- 示例：
import { usedebounce } from "hook-lib";
每种方法都有权衡。粒度库可以精确控制添加的内容，而整体库更容易管理，但需要适当的树摇动以避免膨胀。
hook 库增加了多少权重？
重量取决于：
- 库大小：有些库是轻量级的（几 kb），而另一些库如果依赖依赖项，可能会膨胀到几十 kb。
- tree-shaking 有效性：如果库不支持 tree-shaking，您可能会导入未使用的代码。
- 用法：导入单个钩子可能会引入共享实用程序或polyfill，从而扩大大小。
示例场景：
- 轻量级库（use-fetch-hook）增加了 5kb。
- 即使您只使用一个钩子，一个大型的、树形抖动较差的整体库也可能会增加 30kb 以上。
如何检查库是否支持 tree-shaking
要检查库是否支持 tree-shaking，您可以在了解其代码结构及其捆绑方式的基础上采用多种方法。 tree-shaking 是 webpack 和 rollup 等现代 JavaScript 捆绑器支持的一项功能，它会在构建过程中删除未使用的代码。以下是确定库是否支持它的方法：
1.查看库的包文档
- 寻找 es 模块 (esm) 支持：为了使 tree-shaking 工作，库必须使用 es 模块 (esm)。 esm 允许捆绑器分析导入/导出结构并安全地消除未使用的代码。
- 检查库是否提供 esm 构建（通常在其 package.json 的模块或导出字段中指定）。
- 搜索文档或存储库以查看 esm 是否被提及为首选用法。
2.检查library的package.json
- 导出字段：对于更新的软件包，检查是否使用了导出字段。这可以为不同的环境（如 commonjs 或 esm）指定不同的入口点，从而改进对 tree-shaking 的支持。
- module field：查看库的package.json文件。如果它包含指向 esm 构建的模块字段，则表明该库与 tree-shaking 兼容。例子：
{ "module": "dist/library.esm.js", "main": "dist/library.cjs.js" }
- 模块指向 esm 版本，该版本是可摇树的。
- main 通常指向 commonjs 版本，这对于 tree-shaking 来说并不理想。
3.检查库的源代码
-
导入/导出的使用：确保库使用 es 模块语法（例如导入和导出）。 tree-shaking 使用这种语法效果最好。
- 如果库使用 commonjs（require、module.exports），tree-shaking 将不会那么有效。
-
无副作用： 支持 tree-shaking 的库通常会避免代码中的副作用。检查库的源代码以确保函数或模块在导入时不会执行操作。例如，导入模块不应改变全局状态。
4. 使用 bundler 来测试 tree-shaking
- 您可以使用现代 javascript 捆绑器（如 webpack 或 rollup）来测试 tree-shaking 是否有效。这是一个简单的测试：
- 创建一个安装了库的最小项目。
- 仅导入代码中库的一部分（例如，单个函数）。
- 运行捆绑器并检查输出：
- a) 如果未使用的代码被排除在最终包之外，则该库支持 tree-shaking。
- b) 如果仍然包含未使用的代码，则该库要么不支持 tree-shaking，要么需要进一步配置（例如将某些代码标记为无副作用）。
5. 使用捆绑分析器
使用 webpack bundle analyzer 或 rollup 的内置分析器等工具来可视化最终的包。
- 在输出中查找库的大小。如果 tree-shaking 有效，则应排除未使用的代码，并且最终大小应更小。
6. 检查社区和问题
查看库存储库（例如 github）中的问题或讨论，看看是否有任何提及 tree-shaking 或与之相关的问题。维护者还可以提供有关启用 tree-shaking 的指导。
7. 寻找具体的构建说明
一些库可能有启用树摇动的具体说明，特别是当它们默认情况下不完全可树摇动时。检查有关如何配置捆绑器以实现最佳树摇动的任何指南。
示例：
如果您使用像 lodash 这样的库，它具有特定的“模块化”导入：
import { debounce } from 'lodash';
这允许像 webpack 这样的打包器在使用 lodash 的模块化导入时摆脱未使用的方法，而不是导入整个库（import _ from ‘lodash’），这将包括整个代码库并防止 tree-shaking。
