性能
对 Hook 库来说，“小”有两层意思：下载的代码少，页面里常驻的原生任务也少。
这个包有多大
- 独立入口
- 37
- gzip 中位数
- 1.04 kB
- 根入口完整图
- 21.2 kB
- 通过体积预算
- 37 / 37
gzip 最大的独立入口每一条均包含该入口唯一可达的内部模块。
- use-websocket3.07 kB
- use-key-press2.68 kB
- use-session-storage2.17 kB
- use-local-storage2.17 kB
- use-intersection-observer1.98 kB
- use-resize-observer1.74 kB
- use-click-outside1.55 kB
- use-debounce-fn1.44 kB
查看全部 37 个独立入口
| 入口 | 模块 | Raw | gzip | Brotli | gzip / 预算 |
|---|---|---|---|---|---|
| use-async | 3 | 4.37 kB | 1.33 kB | 1.13 kB | 预算内: 1.33 kB / 2.05 kB |
| use-boolean | 2 | 1.55 kB | 623 B | 527 B | 预算内: 623 B / 2.05 kB |
| use-click-outside | 3 | 5.05 kB | 1.55 kB | 1.30 kB | 预算内: 1.55 kB / 2.05 kB |
| use-controllable-state | 2 | 2.59 kB | 923 B | 766 B | 预算内: 923 B / 2.05 kB |
| use-copy-to-clipboard | 3 | 3.37 kB | 1.24 kB | 1.04 kB | 预算内: 1.24 kB / 2.05 kB |
| use-counter | 2 | 2.76 kB | 1.04 kB | 873 B | 预算内: 1.04 kB / 2.05 kB |
| use-debounce | 2 | 3.25 kB | 996 B | 856 B | 预算内: 996 B / 2.05 kB |
| use-debounce-fn | 4 | 4.59 kB | 1.44 kB | 1.26 kB | 预算内: 1.44 kB / 2.05 kB |
| use-document-visibility | 1 | 3.94 kB | 1.14 kB | 984 B | 预算内: 1.14 kB / 2.05 kB |
| use-event-listener | 3 | 4.05 kB | 1.19 kB | 1.03 kB | 预算内: 1.19 kB / 2.05 kB |
| use-hover | 3 | 5.07 kB | 1.39 kB | 1.19 kB | 预算内: 1.39 kB / 2.05 kB |
| use-input | 2 | 2.76 kB | 1.03 kB | 833 B | 预算内: 1.03 kB / 2.05 kB |
| use-intersection-observer | 3 | 7.34 kB | 1.98 kB | 1.71 kB | 预算内: 1.98 kB / 2.05 kB |
| use-interval | 4 | 2.14 kB | 839 B | 708 B | 预算内: 839 B / 2.05 kB |
| use-is-mounted | 2 | 1.27 kB | 565 B | 431 B | 预算内: 565 B / 2.05 kB |
| use-isomorphic-layout-effect | 1 | 491 B | 302 B | 235 B | 预算内: 302 B / 2.05 kB |
| use-key-press | 3 | 8.59 kB | 2.68 kB | 2.33 kB | 预算内: 2.68 kB / 3.07 kB |
| use-latest | 2 | 1.27 kB | 585 B | 451 B | 预算内: 585 B / 2.05 kB |
| use-local-storage | 2 | 8.60 kB | 2.17 kB | 1.94 kB | 预算内: 2.17 kB / 3.07 kB |
| use-lock-fn | 3 | 1.91 kB | 800 B | 657 B | 预算内: 800 B / 2.05 kB |
| use-map | 1 | 2.20 kB | 820 B | 716 B | 预算内: 820 B / 2.05 kB |
| use-media-query | 2 | 4.16 kB | 1.28 kB | 1.12 kB | 预算内: 1.28 kB / 2.05 kB |
| use-memoized-fn | 2 | 1.53 kB | 689 B | 552 B | 预算内: 689 B / 2.05 kB |
| use-online | 1 | 1.85 kB | 706 B | 587 B | 预算内: 706 B / 2.05 kB |
| use-previous | 1 | 291 B | 211 B | 171 B | 预算内: 211 B / 2.05 kB |
| use-reset-state | 4 | 3.39 kB | 1.19 kB | 966 B | 预算内: 1.19 kB / 2.05 kB |
| use-resize-observer | 3 | 6.30 kB | 1.74 kB | 1.49 kB | 预算内: 1.74 kB / 2.05 kB |
| use-safe-state | 2 | 1.45 kB | 676 B | 530 B | 预算内: 676 B / 2.05 kB |
| use-session-storage | 2 | 8.60 kB | 2.17 kB | 1.94 kB | 预算内: 2.17 kB / 3.07 kB |
| use-set | 1 | 2.14 kB | 764 B | 665 B | 预算内: 764 B / 2.05 kB |
| use-throttle | 3 | 3.74 kB | 1.10 kB | 945 B | 预算内: 1.10 kB / 2.05 kB |
| use-throttle-fn | 4 | 4.31 kB | 1.35 kB | 1.19 kB | 预算内: 1.35 kB / 2.05 kB |
| use-timeout | 4 | 3.29 kB | 1.09 kB | 926 B | 预算内: 1.09 kB / 2.05 kB |
| use-toggle | 1 | 820 B | 465 B | 360 B | 预算内: 465 B / 2.05 kB |
| use-unmounted-ref | 2 | 1.32 kB | 617 B | 498 B | 预算内: 617 B / 2.05 kB |
| use-websocket | 3 | 13.8 kB | 3.07 kB | 2.68 kB | 预算内: 3.07 kB / 3.07 kB |
| use-window-size | 1 | 2.13 kB | 792 B | 677 B | 预算内: 792 B / 2.05 kB |
未经压缩的 ESM · ES2022 · React 保持外部依赖 · Node.js zlib 默认 gzip / Brotli 参数第 90 百分位 gzip：2.17 kB
报告测量每个未经压缩的 ES2022 入口，以及从该入口可达的内部模块。React 和 React DOM 保持为外部依赖，gzip 与 Brotli 使用 Node.js 默认参数。这是一条稳定的包级基线，不是对最终应用体积的预测。
只导入需要的入口
每个 Hook 都有 better-hooks/use-media-query 这样的独立 ESM 入口。根入口 better-hooks 暴露相同 API，并依赖构建工具完成 Tree Shaking。文档示例使用独立入口，因为入口边界更直观。
这个包除了 React peer dependency 没有其他运行时依赖，使用显式 exports，并声明了 sideEffects: false。
只共享真正相同的浏览器任务
多个订阅者观察同一来源时，Hook 会复用原生任务：相同媒体查询共用一个通道，联网状态在每个浏览器上下文共用一对监听器，窗口尺寸订阅者共用一个 resize 监听器。取消和错误处理无法清楚共享的 Observer 与连接，则保持实例独立。
定时器、监听器、Observer 和网络任务都在 commit 后启动，并在所有者变化或卸载时停止。稳定回调 ref 也能避免只因函数引用变化就重建任务。
最后还是要测真实应用
构建工具可能继续压缩、拆分、去重和转换这些代码。发布前请检查成品应用的包体积、长任务、订阅数量和无效渲染。这里的数据是起点，不是结论。