Vue项目路由按需加载(懒加载)方式

普通的路由写法：

import Home from '@/components/Home'
import Index from '@/components/Index'
import About from '@/components/About'
{
  path: '/home',
  name: 'Home',
  component: Home
}, {
  path: '/index',
  name: 'Index',
  component: Index
}, {
  path: '/about',
  name: 'About',
  component: About
}

vue项目实现路由按需加载（路由懒加载）有三种方式：

1、vue异步组件

/* vue异步组件技术 */
{
  path: '/home',
  name: 'Home',
  component: resolve => require(['@/components/Home'],resolve)
},{
  path: '/index',
  name: 'Index',
  component: resolve => require(['@/components/Index'],resolve)
},{
  path: '/about',
  name: 'About',
  component: resolve => require(['@/components/About'], resolve)
} 

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

//未指定webpackChunkName,所以每个组件打包成一个js文件
const Home = () => import('@/components/Home')
const Index = () => import('@/components/Index')
const About = () => import('@/components/About')
//指定webpackChunkName,所以相同的webpackChunkName会合并打包成一个js文件
const Home = () => import(/* webpackChunkName: 'importPage' */ '@/components/Home')
const Index = () => import(/* webpackChunkName: 'importPage' */ '@/components/Index')
const About = () => import(/* webpackChunkName: 'importPage' */ '@/components/About')

{
  path: '/home',
  component: Home
}, {
  path: '/index',
  component: Index
}, {
  path: '/about',
  component: About
}

3、require.ensure()(webpack)

//webpack提供的require.ensure(), 相同的webpackChunkName会合并打包成一个js文件
{
  path: '/home',
  name: 'Home',
  component: r => require.ensure([], () => r(require('@/components/Home')), 'page1')
}, {
  path: '/index',
  name: 'Index',
  component: r => require.ensure([], () => r(require('@/components/Index')), 'page1')
}, {
  path: '/about',
  name: 'About',
  component: r => require.ensure([], () => r(require('@/components/About')), 'page2')
}