vue-router懒加载 vue-router懒加载的3种方式汇总
默翟 人气:0想了解vue-router懒加载的3种方式汇总的相关内容吗,默翟在本文为您仔细讲解vue-router懒加载的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:vue-router懒加载实现,vue懒加载原理,vue页面懒加载,下面大家一起来学习吧。
未使用懒加载
import Vue from 'vue'; import Router from 'vue-router'; import HelloWorld from '@components/HelloWorld'; Vue.use(Router); export default new Router({ routes:[ {path:'./', name:'HelloWorld', component:HelloWorld } ] })
vue异步组件
component:resolve=>{reuqire([‘需要加载的路由地址']),resolve)
import Vue from 'vue'; import Router from 'vue-router'; const HelloWorld=resolve=>{require(["@/components/HelloWorld"],resolve} Vue.use(Router); export default new Router({ routes:[ {path:'./', name:'HelloWorld', component:HelloWorld } ] })
ES6的import()
import Vue from 'vue'; import Router from 'vue-router'; import HelloWorld=()=>import('@/components/HelloWorld'); Vue.use('Router') export default new Router({ routes:[{ {path:'./', name:'HelloWorld', component:HelloWorld } }] })
webpack的require.ensure()
require.ensure可实现按需加载资源,包括js,css等。他会给里面require的文件单独打包,不会和主文件打包在一起。
第一个参数是数组,表明第二个参数里需要依赖的模块,这些会提前加载。
第二个是回调函数,在这个回调函数里面require的文件会被单独打包成一个chunk,不会和主文件打包在一起,这样就生成了两个chunk,第一次加载时只加载主文件。
第三个参数是错误回调。
第四个参数是单独打包的chunk的文件名
import Vue from 'vue'; import Router from 'vue-router'; const HelloWorld=resolve=>{ require.ensure(['@/components/HelloWorld'],()=>{ resolve(require('@/components/HelloWorld')) }) } Vue.use('Router') export default new Router({ routes:[{ {path:'./', name:'HelloWorld', component:HelloWorld } }] })
总结
加载全部内容