列举优化网络性能方法
- 优化打包体积
利用一些工具压缩、混淆最终打包代码，减少包体积
压缩：去掉换行，代码变量缩短，尽可能压缩
- 多目标打包
利用一些打包插件，针对不同的浏览器打包出不同的兼容性版本，这样一来，每个版本中的兼容性代码就会大大减少，从而减少包体积
如果需要兼容性好，就需要写更多的代码，导致体积大，如果我们确实需要兼容性很好，那无法避免，如果我们知道对方的浏览器版本，那我们可以让兼容性提高，这样可以减少兼容代码
比如旧版本没有 promise，那代码可能就需要写一个进去
多目标打包：针对不同的浏览器打不一样的包
- 压缩
现代浏览器普遍支持压缩格式，因此服务端的各种文件可以压缩后再响应给客户端，只要解压时间小于优化的传输时间，压缩就是可行的
gzip 压缩（其中一种压缩算法，浏览器支持）
这种压缩方式是减少传输体积
整体思维
比如一个字符串:121jkk4khjkhk;
他会这样记录
k 出现在 10,23,5 这三个位置
字母是 acsll 字符，占用体积大，数字占用体积小
解压缩的时候再给他还原
- CDN
利用 CDN 可以大幅缩减静态资源的访问时间，特别是对于公共库的访问，可以使用知名的 CDN 资源，这样可以实现跨越站点的缓存
有 CDN 服务器以后拿静态资源就可以使用就近原则，减少传输时间
使用 CDN 还可以跨网站共享
比如一个用户浏览过 A 网站，用到了 vue 的 CDN
那么下次再浏览我们的网站的时候，假如也需要这个 CDN，那么可以直接使用，因为他还会跨网站缓存
- 缓存
对于除 HTML 外的所有静态资源均可以开启协商缓存，利用构建工具打包产生的文件 hash 值来置换缓存 - http2
开启 http2 后，利用其多路复用、头部压缩等特点，充分利用带宽传递大量的文件数据 （需要浏览器支持） - 雪碧图
对于不使用 HTTP2 的场景，可以将多个图片合并为雪碧图，以达到减少文件的目的 - defer、async
通过 defer 和 async 属性，可以让页面尽早加载 js 文件 - prefetch、preload
通过 prefetch 属性，可以让页面在空闲时预先下载其他页面可能要用到的资源
通过 preload 属性，可以让页面预先下载本页面可能要用到的资源 - 多个静态资源域
对于不使用 HTTP2 的场景，将相对独立的静态资源分到多个域中保存，可以让浏览器同时开启多个 TCP 连接，并行下载
在 http2 以前，一个网站最多开启 6 个 tcp 连接，完成并行加载
6 个限制是针对域名的，所以可以把资源放在多个域名下，完成并行加载