内容优化
- 减少HTTP请求:合并文件、精灵图
- 通过DNS缓存减少DNS查询
- 图片懒加载:页面快到图片的位置时再加载图片
- 组件懒加载:vue中通过 const Home = ()=> import('@/components/Home')来懒加载组件
- 将资源放到不同的域下,可以增加并行下载量
- 减少iframe数量
- 样式组件按需加载
服务端优化
- 使用CDN
- expires/cache-control强缓存
- Etag/Last-modified协商缓存
- 对组件进行GZIP压缩
CSS优化
- 将样式表放到页面顶部
- 不要使用CSS表达式
JS优化
- 将脚本放到页面底部
- 压缩JS和CSS
- tree-shaking
- 减少对DOM的直接操作
图片优化
- 小图使用base64
- 小小图使用精灵图