路由懒加载import和require用法的区别
vue-router同步和异步普通用法:// 普通import同步加载用法import HelloWorld from "@/components/HelloWorld.vue"export default new Router({routes:[{path: "/",name: "HelloWorld",component: HelloWorld}]})// import 异步加载用法expor
·
vue-router同步和异步普通用法:
// 普通import同步加载用法
import HelloWorld from "@/components/HelloWorld.vue"
export default new Router({
routes:[
{
path: "/",
name: "HelloWorld",
component: HelloWorld
}
]
})
// import 异步加载用法
export default new Router({
routes:[
{
path: "/",
name: "HelloWorld",
component: () => import("@/components/HelloWorld.vue")
}
]
})
// require 异步加载用法
export default new Router({
routes:[
{
path: "/",
name: "HelloWorld",
component: resolve => (require(["@/components/HelloWorld.vue"], resolve))
}
]
})
上面是加载路由最常用的三种方法,那有时候需要几个路由合并到一起加载怎么办呢,按照官方教程的写法:
const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')
const Baz = () => import(/* webpackChunkName: "group-foo" */ './Baz.vue')
import通过这种特殊注释语法,将几个路由放到一个组中,实际我平时也是按照这种方式去分组的,但这有时候不喜欢这种注释的风格咋办呢。
实际上require也可以通过webpack提供的require.ensure功能进行分组(其实这属于老语法,import才是新语法),下面写法和官方文档是等价的。
const Foo = resolve => require.ensure([], () => resolve(require('./Foo.vue')), 'group-foo')
const Bar = resolve => require.ensure([], () => resolve(require('./Bar.vue')), 'group-foo')
const Baz = resolve => require.ensure([], () => resolve(require('./Baz.vue')), 'group-foo')
参数就不细说了,直接附上webpack相关文档说明,方便理解。
在webpack 2的官网上写了这么一句话:
require.ensure()特定于的的的WebPack并由进口()取代。
所以,在webpack 2里面应该是不建议使用require.ensure()这个方法的。但是目前该方法仍然有效,所以可以简单介绍一下。包括在webpack 1中也是可以使用。下面是require.ensure的语法:
require.ensure(
dependencies:String [],
callback:function(require),
errorCallback:function(error),
chunkName:String
)
require.ensure()接受四个参数:
第一个参数的依赖关系是一个数组,代表了当前需要进来的模块的一些依赖;
第二个参数回调就是一个回调函数其中需要注意的是,这个回调函数有一个参数要求,通过这个要求就可以在回调函数内动态引入其他模块值得注意的是,虽然这个要求是回调函数的参数,理论上可以换其他名称,但是实际上是不能换的,否则的的的的WebPack就无法静态分析的时候处理它;
第三个参数errorCallback比较好理解,就是处理错误的回调;
第四个参数chunkName则是指定打包的组块名称。
更多推荐
已为社区贡献3条内容
所有评论(0)