-
优化打包体积
利用一些工具压缩、混淆最终打包代码:减少包体积
-
多目标打包
利用一些打包插件,针对不同的浏览器打包出不同的兼容性版本,这样一来,每个版本的兼容性代码就会大大减少,从而减少包体积
-
压缩
现代浏览器普遍支持压缩格式,因此服务端的各种文件可以压缩后再响应给客户端,只解压时间小于优化的传输时间,压缩就是可行的
-
CDN
利用 CDN 可以大幅缩减静态资源的访问时间,特别是对于公共库的访问,可以使用知名的 CDN 资源,这样可以实现跨越站点的缓存
-
缓存
对于除 HTML外的所有静态资源均可以开启协商缓存,利用构建工具打包产生的文件 hash 值来置换缓存
-
http2
开启http2后,利用其多路复用、头部压缩等特点,充分利用带宽传递大量的文件数据
-
雪碧图
对于不使用HTTP2 的场景,可以将多个图片合并为雪碧图,以达到减少文件的目的
-
defer、async
通过defer和async属性,可以让页面尽早加载js文件
-
prefetch、preload
通过prefetch属性,可以让页面在空闲时预先下载其他页面可能要用到的资源
通过preload 属性,可以让页面预先下载本页面可能要用到的资源
-
多个静态资源域
对于不支持 HTTP2 的场景,将相对独立的静态资源分到多个域中保存,可以让浏览器同时开启多个TCP连接,并行下载