nuxt解决首屏加载慢问题_滴普大前端 | 滴普是如何实现首屏加载性能优化的？...

决定优化方向

首先打开 Inspect - Network 查看请求情况，从图片可以看出，DOMContentLoaded 时间为 2.67s，Load 时间为 3.45s，资源交换为 2.4MB。

优化方向主要在以下几个方面：

1. DNS 解析时间比较长
2. 资源加载量大
3. 首页并没用到高德地图，高德地图的请求阻塞了后续资源的加载
4. 流式请求的加载顺序阻塞了后续请求的发起
5. 图片的格式未针对浏览器进行优化，体积比较大，小型图片可以使用 svg 替换 png
6. 页面接口调用比较晚，时机不对
7. js_ticket 等业务无关的请求可以提前
8. 轮播图片不用一次性全部加载
9. 请求阿里云 OSS 上的静态文件不添加时间戳参数（每次回源速度变慢）

解决方案

提早解析 DNS

解决第一个问题（DNS 解析时间比较长）。

<link rel="dns-prefetch" href="//oss-dev.ishowyu.com">

• dns-prefetch 通过指定具体的 URL 来告知客户端未来会用到相关的资源，这样浏览器可以尽早的解析 DNS
• preconnect 不光会解析 DNS，还会建立 TCP 握手连接和 TLS 协议
• prefetch 支持预拉取图片、脚本或者任何可以被浏览器缓存的资源。

Nuxt.js 在 nuxt.config.js 文件中配置，关于这个属性的介绍可以查看 MDN 文档。

HTTP/2

改善第二个问题（资源加载量大）。<