性能优化之Vue组件懒加载（二）

上一次我们实现了模块的渲染和模块内的资源的加载，但是我们并没有真正实现组件的异步加载。

1.什么是异步组件？

异步组件就是定义的时候什么都不做，只在组件需要渲染（组件第一次显示）的时候进行加载渲染并缓存。

三种应用场景：

1. Components;
2. Router;
3. Vuex modules.

Lazy Loading in Vue using Webpack's Code Splitting
下面主要设计vue components中的应用

---

2.Vue实现按需加载

Vue实现按需加载，官方推荐使用结合webpack的代码分割功能进行。定义为异步加载的组件，在打包的时候，会打包成单独的js文件存储在static/js文件夹里面，在调用时使用ajax请求回来插入到html中。

---

3.webpack的代码分割,AMD规范

这里的require是AMD规范的引入关键词，resolve是全部引入成功以后的回调函数，第一个参数是依赖，require会先引入依赖模块，再执行回调函数。

const HelloJs =(resolve)=>require(['@/components/HelloJs'],resolve)

 components:{
    HelloJs
   }

---

4.webpack 2 + ES2015(推荐)

推荐使用，但是webpack > 2.4。这里的import()方法由es6提出，import()方法是动态加载，返回一个Promise对象，then方法的参数是加载到的模块。

const HelloJs =()=>import('@/components/HelloJs')

 components:{
    HelloJs
   }

使用import()能够在加载模块失败时进行错误处理，因为返回的是个Promise（基于promise）

---

5.webpack的另一种代码分割

webpack编译时，会静态的解析代码中的require.ensure()，同时将模块添加到一个分开的chunk中，新的chunk会被webpack通过jsonp来按需加载。此方法内部依赖于Promise。
require.ensure(dependencies: String[], callback: function(require), chunkName: String)
参数1：是字符串数组，模块的依赖，会提前加载。一般都是空的。
参数2：依赖项加载完成之后的回调函数
所有的依赖加载完成之后，webpack会执行这个回调函数，require对象的一个实现会作为一个参数传递给回调函数，因此，可以require依赖和其他模块提供下一步的执行。
参数3：chunkName 是提供给这个特定的 require.ensure() 的 chunk 的名称。通过提供 require.ensure() 不同执行点相同的名称，我们可以保证所有的依赖都会一起放进相同的 文件束(bundle)。

const HelloJs =()=>require.ensure([],(require)=>require('@/components/HelloJs'),"HelloJs")
 components:{
    HelloJs
   }

原理：webpack把这个模块导出一个js文件，然后用到这个模块的时候，就动态构造script标签插入DOM，再由浏览器去请求。回调函数是在依赖加载完成之后执行。

require.ensure可以使用参数给模块命名，然而import目前上不具备改功能，如果你需要保留该功能很重要，可以继续使用require.ensure。

---

参考：
webpack代码拆分(Code Splitting)