估算 JavaScript 依赖体积

工作原理

一个本地数据库(内嵌在页面中,不发起任何网络请求)为每个常用库记录两个大致体积:压缩(minify)后的体积,以及 gzip 后的体积(即在配置良好的服务器上,浏览器在生产环境中实际下载的大小)。勾选您打算使用的库:体积会自动累加,得出增加到 JavaScript 打包产物中的总体积的大致数量级。

这些体积是否准确?

不准确,这些只是数量级:实际体积取决于安装的确切版本、所用的打包工具(Vite、Webpack、esbuild……),尤其取决于 tree-shaking(只导入用到的函数可以大幅减小实际体积,对 Lodash 这类库尤其明显)。如需所用确切版本的精确且最新的数字,请使用 bundlephobia.com 之类的工具。

为什么要累加 gzip 后的体积,而不只是压缩后的体积?

压缩后的体积是指去除空格、缩短变量名之后 JavaScript 文件的大小,但 gzip 后的体积才最能反映用户实际下载的大小,因为现代 Web 服务器几乎都会启用 gzip 或 brotli 压缩。

不会向服务器发送任何数据:体积数据库内嵌在页面中,计算完全在您的浏览器中进行。