Vue组件懒加载和路由懒加载

Vue组件懒加载和Vue路由懒加载

这里只记录了router层面上的懒加载方法，还有在*.vue中各种懒加载的方法，例如：需要的时候import组件，用完destory等等。

Vue组件的懒加载

vue-router配置路由 , 使用vue的异步组件技术 , 可以实现按需加载 .
但是,这种情况下一个组件生成一个js文件

router.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },{
      path: '/Dom/:name',
      name: 'Dom',
      component: resolve => require(["@/components/Dom"],resolve)
    },{
      path: '/DomChild/:DomChild',
      name: 'DomChild',
      component: resolve => require(["@/components/DomChild"],resolve)
    }
  ]
})

require( [ ] ,callback ) 接受两个参数

​ 第一个参数是一个数组，表示所依赖的模块

​ 第二个参数是一个回调函数，当前面指定的模块加载成功后，它将被调用。加载的模块会以参数形式传入该函数，从而在回调函数内部就可以使用这些模块。

Vue路由的懒加载（使用import）

router.js

import Vue from 'vue'
import Router from 'vue-router'
/*
不指定webpackChunkName，每个组件打包成一个js文件。
const HelloWorld = () => import('@/components/HelloWorld');
const Dom = () => import('@/components/Dom');
const DomChild = () => import('@/components/DomChild');
*/
const HelloWorld = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '@/components/HelloWorld');
const Dom = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '@/components/Dom');
const DomChild = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '@/components/DomChild');

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },{
      path: '/Dom/:name',
      name: 'Dom',
      component: Dom
    },{
      path: '/DomChild/:DomChild',
      name: 'DomChild',
      component: DomChild
    }
  ]
})

使用webpack的require.ensure()

webpack 在编译时，会静态地解析代码中的 require.ensure()，同时将模块添加到一个分开的 chunk 当中。这个新的 chunk 会被 webpack 通过 jsonp 来按需加载。

require.ensure(dependencies: String[], callback: function(require), chunkName: String)

接收三个参数

这里有三个参数，第一个参数是个数组，标明依赖的模块

第二个是回调函数，在这个回调函数里面的require的文件会被单独打包成一个chunk,不会和主文件打包在一起，这样就生成了两个chunk,第一次加载时只加载主文件，当点击时就会加载单独打包的chunk。

第三个chunkName 是提供给这个特定的 require.ensure() 的 chunk 的名称。通过提供 require.ensure() 不同执行点相同的名称，我们可以保证所有的依赖都会一起放进相同的 文件束

坑点二则

require.ensure(['./a.js'], function(require) {
    require('./b.js');
});

上面代码， a.js 和 b.js 都被打包到一起，而且从主文件束中拆分出来。但只有 b.js 的内容被执行。a.js 的内容仅仅是可被使用，但并没有被输出。

想去执行 a.js，我们需要异步地引用它，如 require('./a.js')，让它的 JavaScritp 被执行。

require.ensure([], function(require){
    require('./a.js');
});

拆分点被创建，而且 a.js 被 webpack 分开打包。

言归正传，现在来讨论第三种require.ensure()实现懒加载的方法

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: resolve => require.ensure([],()=>{resolve(require('@/components/HelloWorld'))},'HelloWorld')
    },{
      path: '/Dom/:name',
      name: 'Dom',
      component: resolve => require.ensure([],()=>{resolve(require('@/components/Dom'))},'Dom')
    },{
      path: '/DomChild/:DomChild',
      name: 'Dom',
      component: resolve => require.ensure([],()=>{resolve(require('@/components/DomChild'))},'DomChild')
    }
  ]
})

name: 'Dom',
  component: resolve => require.ensure([],()=>{resolve(require('@/components/DomChild'))},'DomChild')
}

]
})