vue-router懒加载的3种方式汇总
时间：2022-04-18 11:43:06|栏目：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
}
}]
})
总结
