webpack模板中的Vuejs延迟加载路由答案

【问题标题】：Vuejs lazy loading routes in webpack templatewebpack模板中的Vuejs延迟加载路由
【发布时间】：2018-07-04 13:54:17
【问题描述】：

我已经使用 vue-cli 工具和 webpack 模板创建了 vuejs 项目。

vue init webpack my-project

不知道怎么用模板实现路由的延迟加载

目前我在router/index.js有两条路线

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Test from '@/components/Test'

Vue.use(Router)

export default new Router({
   mode: 'history',
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/test',
      name: 'test',
      component: Test
    }
  ]
})

它在main.js中导入

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

但它不包含延迟加载实现我该怎么做？？

【问题讨论】：

标签： javascript vuejs2 vue-router

【解决方案1】：

而不是使用

import Test from '@/components/Test'

用作

const Test = () => import('@/components/Test');

lazy loading Documentataion

【讨论】：

【解决方案2】：

这样做的好方法：

function load (component) {
  return () => import(`@/${component}.vue`)
}

...
routes: [
    { path: '/', component: load('Hello') },

【讨论】：