相比React,Vue实现组件的懒加载仍是比较简单的,如下是官方文档的说明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命名并没生效
,再去仔细看看官方文档说明webpack
“结合 Vue 的 异步组件和 Webpack 的 代码分割功能,轻松实现路由组件的懒加载”
其实还差一个webpack配置,就是webpack output须要加个chunkFilename
web
chunkFilename: '[name].js'
这样就没问题了vue-router