Vuejs在webpack模板中延迟加载路由(Vuejs lazy loading routes in webpack template)

Vuejs在webpack模板中延迟加载路由(Vuejs lazy loading routes in webpack template)

我用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/>' })

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

I have created vuejs project with vue-cli tools and webpack template.

vue init webpack my-project

I don't know how to implement lazy loading on routes with templates

currently i have two routes in 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 } ] })

And its imported in 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/>' })

But it doesn't contain the lazy loading implementation how can i do it??

最满意答案

而不是使用

import Test from '@/components/Test'

用于

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

延迟加载Documentataion

instead of using

import Test from '@/components/Test'

use as

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

lazy loading Documentataion