-
懒加载也叫延迟加载,即在需要的时候进行加载,随用随载
在单页应用中,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,
造成进入首页时,需要加载的内容过多,延时过长,不利于用户体验,
运用懒加载可以将页面进行划分,按需加载页面,可以分担首页所承担的加载压力,减少加载用时。 -
一种代码分块的语法,使用 AMD 风格的 require
import Vue from 'vue' import Router from 'vue-router' //内容区域 //import Main from '@/components/common/main' //我的店铺-店铺首页 //import Home from '@/components/page/home/home' //商品管理-商品发布 //import Issue from '@/components/page/product/product_issue' Vue.use(Router) // export default new Router({ // routes: [ // { // path: '/', // name: 'main', // component: Main, // children:[ // { // path: '/home', // component: Home // },{ // path: '/issue', // component: Issue // } // ] // } // ] // }) const routes = [ { path:'/', component:resolve => require(['@/components/common/main'],resolve), children:[ { path:'/home', component:resolve => require(['@/components/page/home/home'],resolve) }, { path:'/issue', component:resolve => require(['@/components/page/product/product_issue'],resolve) } ] } ] const router = new Router({ routes }) export default router;