Nuxt 速度优化实战

背景是谷歌统计移动端网页加载速度在 10s 左右，所以优化一波，整体优化下来能优化到 7s 左右。主要有以下思路：

1. 减少请求数和请求大小
2. 懒加载相关资源
3. 验证 cdn 是否命中缓存
4. 加速请求 prefetch, preload, preconnect
5. 优化缓存的设置
6. 利用服务端渲染特性，提前请求数据

下面将详细介绍具体的分析过程

1. 减少请求数和请求大小

引用官方文档

Nuxt.js 使用 webpack-bundle-analyzer 分析并可视化构建后的打包文件，你可以基于分析结果来决定如何优化它

方法是在 nuxt.config.js 中设置：

module.exports = {
 build: {
   analyze: true
 }
}

运行 nuxt build --analyze 即可在http://localhost:8888/查看具体效果

基本思路就是分析占用的 node_modules 包是否过大，以及如果有使用私有库的话，是否能优化私有库的大小。调整完后，再查看在本地构建出来的文件大小，关键看：vendors.app.js 的大小是否降下来了

2. 懒加载相关资源

用好 async 和 defer

两者的差别列一个表

对比项	async	defer
开始下载时机	解析 html 时一遇到该