Vue——Router（路由懒加载）

常用的路由懒加载方式：

    1、vue异步组件（异步加载）

    2、路由懒加载（使用import）

 

vue异步组件（异步加载）

vue-router配置路由 ， 使用vue的异步组件技术 ，可以实现按需加载 。
但是，这种情况下，webpack打包时一个组件生成一个js文件，即每加载一个组件都需要加载一个新的js文件

/* vue异步组件 */
{
   path: '/home',
   name: 'home',
   component: resolve => require(['@/page/home'],resolve)
},{
   path:'/about',
   name:'about',
   component:resolve => require(['@/page/about'],resolve)
},{
   path:'/description',
   name:'description',
   component:resolve => require(['@/page/description'],resolve)
}

路由懒加载（使用import）

vue-router配置路由 ， 使用import按需引入，没有指定webpackChunkName时，每个组件打包成一个js；指定webpackChunkName时，相同webpackChunkName名字的组件，会合并打包成一个js文件，把组件按组分块。

/* 路由懒加载 */
//不指定webpackChunkName（每个分别打包成一个js文件）
{
   path: '/home',
   name: 'home',
   component: import('../page/home')
},{
   path:'/about',
   name:'about',
   component:import('../page/about')
},{
   path:'/description',
   name:'description',
   component:import('../page/description')
}
//指定webpackChunkName（合并打包成一个js文件）
{
   path: '/home',
   name: 'home',
   component: import(/* webpackChunkName: 'home' */ '../page/home')
},{
   path:'/about',
   name:'about',
   component:import(/* webpackChunkName: 'home' */ '../page/about')
},{
   path:'/description',
   name:'description',
   component:import(/* webpackChunkName: 'home' */ '../page/description')
}

个人认为，指定webpackChunkName时，使用频率高的组件、同一功能的组件、有上下游关系的组件均可以合并打包到一个组件中，这样在加载一个功能组件时，同功能的其他组件均已加载，使用感觉更流畅。而功能单一且使用频率很低的组件就可以单独打包成一个，不需要时就不用加载。