vue-router 路由懒加载

1. 路由懒加载

　　我们在路由中通常会定义很多不同的页面。如果不应用懒加载的话，很多页面都会打包到同一个js文件中，文件将会异常的大。容易造成进入首页时，需要加载的内容过多，时间过长，在浏览器中可能会出现短暂的空白页，从而降低用户体验，而运用路由懒加载是将各个模块分开打包，用户查看的时候再加载对应的模块，减少加载用时。

　　也就是说： 进入页面时不需要一次性把资源都加载完，延迟加载，在需要的时候才会进行加载。

// 非懒加载
import Home from '@/components/Home'
 
const routes = [
  {
    path: '/home',
    name: 'home',
    component: Home
  }
]

2. 实现路由懒加载

Vue 实现路由懒加载的三种方式：

① Vue 异步组件
② ES6 的 import( )
③ webpack提供的 require.ensure( ) 

2.1 Vue异步组件

vue-router 配置路由，使用 vue 的异步组件技术，可以实现按需加载。

但是，这种情况下每一个组件就会生成一个js文件，不能分类指定 chunkName

# vue异步组件
# 语法：
# component: resolve => require(['需要加载的组件地址'], resolve)

{
  path: '/home',
  name: 'home',
  component: resolve => require(['@/components/home'], resolve)
}

2.2 推荐方式- ES6 的 import()

# const 组件名 = () => import('组件路径')
# 下面2行代码，没有指定 webpackChunkName，每个组件打包成一个js文件
const Home = () => import('@/componnets/home')
const Index = () => import('@/components/index')
 
# 下面2行代码，指定了相同的 webpackChunkName，会合并打包成一个js文件
# 把组件按组分块
const Home = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '@/components/home')
const Index = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '@/components/index')
 
{
  path: '/home',
  name: 'home',
  component: Home
},
{
  path: '/index',
  name: 'index',
  component: Index
}

2.3 webpack提供的 require.ensure( )

 该方法也可指定相同的 chunkName，合并打包成一个js文件。

{
  path: '/home',
  name: 'home',
  component: r => require.ensure([], () => r(require('@/components/home')), 'demo')
},
{
  path: '/index',
  name: 'index',
  component: r => require.ensure([], () => r(require('@/components/index')), 'demo')
},
{
  path: '/about',
  name: 'about',
  # 传入空字符串 则每个component会单独生成一个js文件
  component: r => require.ensure([], () => r(require('@/components/index')), '')
}

End------------------------