Vue异步组件

1.什么是异步组件？

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

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

2.Vue实现按需加载

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

3.webpack的代码分割

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

image

4.webpack 2 + ES2015

推荐使用，但是webpack > 2.4。这里的import()方法由es6提出，import()方法是动态加载，返回一个Promise对象，then方法的参数是加载到的模块。类似于Node.js的require方法，主要import()方法是异步加载的。

image

在路由配置的时候直接调用HelloWorld就可以了。

import是一个运算符，返回一个Promise，模块加载完成，则Promise resolve vue组件。

好像就是定义了一个函数，函数不调用的时候就不执行啊，对不对？只要在什么地方调用了，才会执行。在路由配置的时候调用，才会去执行，去加载这个模块呀。我说的是不是很有道理！

5.webpack的另一种代码分割(推荐)

此方法，多个路由指定相同的hcunkName，会打包成一个js文件。vue官网推荐使用webpack的代码分割进行懒加载。此方法依赖于Promise。

image

webpack编译时，会静态的解析代码中的require.ensure()，同时将模块添加到一个分开的chunk中，新的chunk会被webpack通过jsonp来按需加载。此方法内部依赖于Promise。

• 参数1： 是字符串数组，模块的依赖，会提前加载。一般都是空的。

• 参数2： 依赖项加载完成之后的回调函数

  所有的依赖加载完成之后，webpack会执行这个回调函数，require对象的一个实现会作为一个参数传递给回调函数，因此，可以require依赖和其他模块提供下一步的执行。

• 参数3： chunk名称

  相同chunk名称的文件 所有依赖都会被放进相同文件束。

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