第一种方法
采用loading图的方式来优化,在加载之前,有一个loading(菊花怪)来确保用户知道你正在家中中
第二种方法(推荐使用,骨架图,主要是skeleton screen)
主要是在前端的css以及ajax的数据返回之前,加上一个骨架图,也就是占位符,来缓解用户的焦虑情绪
如果首屏加载实在过慢,那么就通过vue按需加载的方式来进行控制
主要是通过Webpack的Code Splitting实现按需加载,通过定义分割点来进行按需加载
在路由中进行配置 (注意:这里是为了方便, 是在app.js中添加的路由, 在实际的项目中, 路由应该单独抽取出来)
//AMD规范的异步载入
const ComA = resolve => require(['./components/A.vue' ], resolve);
const ComB = resolve => require(['./components/B.vue' ], resolve);
const ComC = resolve => require(['./components/C.vue' ], resolve);
网友评论