vue-router懒加载速度缓慢问题

懒加载：也叫延迟加载，即在须要的时候进行加载，随用随载。 像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)
  }//欢迎加入全栈开发交流圈一块儿学习交流：864305860
 ]//面向1-3年前端人员
})//帮助突破技术瓶颈，提高思惟能力
复制代码

非懒加载的方式：

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
  }//欢迎加入全栈开发交流圈一块儿学习交流：864305860
 ]//面向1-3年前端人员
})//帮助突破技术瓶颈，提高思惟能力
复制代码

下面看下vue-router路由懒加载 用vue.js写单页面应用时，会出现打包后的JavaScript包很是大，影响页面加载，咱们能够利用路由的懒加载去优化这个问题，当咱们用到某个路由后，才去加载对应的组件，这样就会更加高效，实现代码以下：

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
 routes: [
  {
   path: '/',
   component: resolve => require(['components/Hello.vue'], resolve)
  },
  {
    path: '/about',
    component: resolve => require(['components/About.vue'], resolve)
  }//欢迎加入全栈开发交流圈一块儿学习交流：864305860
 ]//面向1-3年前端人员
})//帮助突破技术瓶颈，提高思惟能力
复制代码

结语

感谢您的观看，若有不足之处，欢迎批评指正。

本次给你们推荐一个免费的学习群，里面归纳移动应用网站开发，css，html，webpack，vue node angular以及面试资源等。 对web开发技术感兴趣的同窗，欢迎加入Q群：864305860，无论你是小白仍是大牛我都欢迎，还有大牛整理的一套高效率学习路线和教程与您免费分享，同时天天更新视频资料。 最后，祝你们早日学有所成，拿到满意offer，快速升职加薪，走上人生巅峰。