项目慢慢大起来之后,页面越来越多你会发现第一次进入vue项目变得很慢,这就叫首屏加载慢。
一般有这些常见原因:
- 有些项目图片很大也没有压缩 一般大图控制在300k以内 小图可以控制到50k以内 可以让美术压缩好素材再发给你
- 项目使用了一些插件 如轮播 倒计时等等
- 其他文件 还有些图标,字体文件等
- 代码写的有问题 需要优化代码
- 首页接口过慢 F12 查看Network接口响应速度 要求后端优化接口
- 项目过大页面太多 使用路由懒加载
- ssr服务端渲染 渲染过程放到了服务器 直接返回html 加快首屏速度
这里推荐两个方法:
1.把一些插件、图片、文件放到cdn里面加速,然后在项目里面使用cdn在线链接。
2.使用路由懒加载
以前的路由文件是在顶部一次性全部import所有文件。
import
如果页面多在顶部一次性全部加载,那页面第一次加载就会慢。
使用懒加载
Vue
在顶部不用引入了,然后在各个路由里面使用import()按需加载,这样只有使用对应路由的时候才会加载对应页面,这不就解决了全部一起加载慢的问题了吗?
这就是懒加载或者说按需加载。