正文
网络工具，应该是前端用的最多的工具之一了。那你们知道其中工具之中的资源大小列中隐藏的一些内容么。
举个例子：在下图中是vite官网中一个网络截图，其中app.js文件资源实际大小是148kb,为啥资源大小显示57.7kb?
让我们打开该请求的标头看看：
可以看到我们请求的内容编码方式 可以是gzip，也就是说，当你提供了gz的压缩编码，浏览器优先加载gz。上面的问题就可以很好的解释了，app.js在网络工具中的大小指的是gz源码的大小。
如果这个时候，你将鼠标放到大小列的时候，会有一个tooltip：
57.7 kB transferred over network ,resource size: 151kb
咦 你刚刚不是说app.js资源大小是148kb么，现在浏览器都说资源大小是151kb, 你怎么解释(😒)。
怎么解释，我当然是甩上官方解释：大小列资源大小由响应标头和响应正文的组合大小，由服务器传递。
也就是说这里的大小并不是单纯的指你文件的大小 而是由响应头的大小+文件大小。
解释完毕🤭🥹
补充
如何方便快捷的查看未压缩资源大小，可以通过开发者工具的右上角设置里面打开使用大请求行。
总结一下
网络工具中的大小列中的大小，指的不是你源码文件大小。
当提供了压缩源码时候，大小指的是压缩源码的大小+响应头标头大小
当未提供压缩源码时候，大小指的是源码大小+响应响应头标头大小
