vue router 懒加载的几个方式

[gdutwyg]

定义

• 第一种

  
  // require.ensure 是 Webpack 的特殊语法
  // 用来设置 code-split point（代码分块）
  const Foo = resolve => {
  require.ensure(['./Foo.vue'], () => {
  resolve(require('./Foo.vue'))
  })
  }

* 第二种

```js
// AMD 风格的 require
const Foo = resolve => require(['./Foo.vue'], resolve)

• 第三种（推荐）

  // es6 的 import
  const Foo = () => import('./Foo.vue')

使用

使用跟之前没变

// 使用
const router = new VueRouter({
  routes: [ { 
       path: '/foo', 
       component: Foo 
     }]
})

把组件按组分块

如果打包时想按组分块，比如说几个组件打包在同一个chunk里面，需要这样设置

• 第一种

// 提供 require.ensure第三个参数作为 chunk 的名称
const Foo = r => require.ensure([], () => r(require('./Foo.vue')), 'group-foo')
const Bar = r => require.ensure([], () => r(require('./Bar.vue')), 'group-foo')
const Baz = r => require.ensure([], () => r(require('./Baz.vue')), 'group-foo')

webpack 将相同 chunk 下的所有异步模块打包到一个异步块里面 —— 这也意味着我们无须明确列出 require.ensure 的依赖（传空数组就行）

• 第二种

  const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
  const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')
  const Baz = () => import(/* webpackChunkName: "group-foo" */ './Baz.vue')