vue-router懒加载解决首次加载时资源过多导致的速度缓慢问题
2019-04-29 15:01
369 查看
懒加载:也叫延迟加载,即在需要的时候进行加载,随用随载。
像vue这种单页面应用,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多,时间过长,会出啊先长时间的白屏,即使做了loading也是不利于用户体验,而运用懒加载则可以将页面进行划分,需要的时候加载页面,可以有效的分担首页所承担的加载压力,减少首页加载用时。
简单的说就是:进入首页不用一次加载过多资源造成用时过长!!!
懒加载的方式:
像vue这种单页面应用,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多,时间过长,会出啊先长时间的白屏,即使做了loading也是不利于用户体验,而运用懒加载则可以将页面进行划分,需要的时候加载页面,可以有效的分担首页所承担的加载压力,减少首页加载用时。
简单的说就是:进入首页不用一次加载过多资源造成用时过长!!!
懒加载的方式:
import Vue from 'vue'import Router from 'vue-router'Vue.use(Router)//采用了懒加载export default new Router({ routes: [ { path:'/', component:resolve => require(['@/components/index'],resolve) } ]})
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
import Vue from 'vue'import Router from 'vue-router'import index from '@/components/index'Vue.use(Router)export default new Router({ routes: [ { path:'/', component:index } ]})
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
相关文章推荐
- vue-router懒加载解决首次加载时资源过多导致的速度缓慢问题
- 使用vue-router懒加载解决首次加载时资源过多导致的速度缓慢问题
- 通过vue-router懒加载解决首次加载时资源过多导致的速度缓慢问题
- vue-router懒加载速度缓慢问题及解决方法
- vue-router路由懒加载(解决vue项目首次加载慢)
- vue-router中,require代替import解决vue项目首页加载时间过久的问题
- 解决网站访问过多而导致缓慢的问题
- 解决springsecurity资源权限一次加载,导致角色授资源要重启服务问题
- 完美解决wordpress无法加载google字体等导致速度缓慢的方法
- vue-router路由懒加载的实现(解决vue项目首次加载慢)
- vue-router路由懒加载(解决vue项目首次加载慢)
- 禁用Google Fonts解决WordPress加载速度缓慢的问题
- 图片资源过多 视频资源过多 导致的编译 速度 过慢问题
- 解决vue-cli webpack打包后加载资源的路径问题
- FragmentTabHost切换Fragment时避免重复加载UI,导致切换后重绘页面的问题解决
- 如何解决BitBlt打印BMP,数据量太大导致速度效率慢的问题
- android应用第一次启动加载大数据导致启动速度慢解决办法
- 解决近期Gravatar头像被屏蔽导致网站速度变慢问题
- 使用node中的express解决vue-cli加载不到dev-server.js的问题
- vue项目加了vue-router懒加载,打包后在服务器上访问,报错Loading chunk 40 failed. 解决办法