相比React,Vue实现组件的懒加载还是比较简单的,以下是官方文档的说明
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
export default new VueRouter({
routes: [
{
path: '/',
name: 'Navigator',
component: () => import(/* webpackChunkName: "navigator" */ './../components/Navigator')
},
{
path: '/tucao',
name: 'Tucao',
component: () => import(/* webpackChunkName: "tucao" */ './../components/Tucao')
}
]
})
以上是按照官方文档写的懒加载代码,但是发现chunk命名并没生效
,再去仔细看看官方文档说明
“结合 Vue 的 异步组件和 Webpack 的 代码分割功能,轻松实现路由组件的懒加载”
其实还差一个webpack配置,就是webpack output需要加个chunkFilename
chunkFilename: '[name].js'
这样就没问题了