路由懒加载

路由懒加载

什么是路由懒加载

路由懒加载也叫延迟加载,即在需要的时候进行加载,随用随载。

为什么要使用路由懒加载

1:像vue这种单页面应用,如果没有应用懒加载,运用webpack打包后的文件将会异常的大。
2:造成进入首页时,需要加载的内容过多,时间过长,会出现长时间的白屏,即使做了loading也是不利于用户体验。
3:而运用懒加载则可以将页面进行划分,需要的时候加载页面,可以有效的分担首页所承担的加载压力,减少首页加载用时

三种路由懒加载方式

1:Vue异步组件
2:ES6标准语法import()---------推荐使用!!!!!
3:webpack的require.ensure()

vue异步组件技术——异步加载

1:vue-router配置路由,使用vue的异步组件技术,可以实现懒加载,此时一个组件会生成一个js文件。
2:***ponent: resolve => require(['放入需要加载的路由地址'], resolve)

举例:

{
   path: '/problem',
   name: 'problem',
   ***ponent: resolve => require(['../pages/home/problemList'], resolve)
}

ES6推荐方式imprort ()—-推荐使用

{
  path: '/vipcard',
  ***ponent: ()=> import('../views/vipcard/VipCard.vue')
}

webpack提供的require.ensure()实现懒加载

1:vue-router配置路由,使用webpack的require.ensure技术,也可以实现按需加载。
2:这种情况下,多个路由指定相同的chunkName,会合并打包成一个js文件。
3:require.ensure可实现按需加载资源,包括js,css等。他会给里面require的文件单独打包,不会和主文件打包在一起。
4:第一个参数是数组,表明第二个参数里需要依赖的模块,这些会提前加载。
5:第二个是回调函数,在这个回调函数里面require的文件会被单独打包成一个chunk,不会和主文件打包在一起,这样就生成了两个chunk,第一次加载时只加载主文件。
6:第三个参数是错误回调。
7:第四个参数是单独打包的chunk的文件名

此处代码参考原文链接:点击此处

import Vue from 'vue';
import Router from 'vue-router';
const HelloWorld=resolve=>{ 

require.ensure(['@/***ponents/HelloWorld'],()=>{ 

resolve(require('@/***ponents/HelloWorld'))
})
}
Vue.use('Router')
export default new Router({ 

routes:[{ 

{ 
path:'./',
name:'HelloWorld',
***ponent:HelloWorld
}
}]
})
转载请说明出处内容投诉
CSS教程_站长资源网 » 路由懒加载

发表评论

欢迎 访客 发表评论

一个令你着迷的主题!

查看演示 官网购买