转载,原文出处:https://www.jianshu.com/p/40a364b5e964
1.什么是异步组件?
异步组件就是定义的时候什么都不做,只在组件需要渲染(组件第一次显示)的时候进行加载渲染并缓存,缓存是以备下次访问。
2.Vue实现按需加载
Vue实现按需加载,官方推荐使用结合webpack的代码分割功能进行。定义为异步加载的组件,在打包的时候,会打包成单独的js文件存储在static/js文件夹里面,在调用时使用ajax请求回来插入到html中。
3.webpack的代码分割
这里的require是AMD规范的引入关键词,resolve是全部引入成功以后的回调函数,第一个参数是依赖,require会先引入依赖模块,再执行回调函数。
![webp](http://upload-images.jianshu.io/upload_images/8054470-b2d131754be99b6f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/946/format/webp)
4.webpack 2 + ES2015
推荐使用,但是webpack > 2.4。这里的import()方法由es6提出,import()方法是动态加载,返回一个Promise对象,then方法的参数是加载到的模块。类似于Node.js的require方法,主要import()方法是异步加载的。
![webp](http://upload-images.jianshu.io/upload_images/8054470-74fb570ac21200e6.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/797/format/webp)
在路由配置的时候直接调用HelloWorld就可以了。
import是一个运算符,返回一个Promise,模块加载完成,则Promise resolve vue组件。
好像就是定义了一个函数,函数不调用的时候就不执行啊,对不对?只要在什么地方调用了,才会执行。在路由配置的时候调用,才会去执行,去加载这个模块呀。我说的是不是很有道理!
5.webpack的另一种代码分割(推荐)
此方法,多个路由指定相同的hcunkName,会打包成一个js文件。vue官网推荐使用webpack的代码分割进行懒加载。此方法依赖于Promise。
![webp](http://upload-images.jianshu.io/upload_images/8054470-277d62d017ecb49f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1000/format/webp)
webpack编译时,会静态的解析代码中的require.ensure(),同时将模块添加到一个分开的chunk中,新的chunk会被webpack通过jsonp来按需加载。此方法内部依赖于Promise。
参数1:是字符串数组,模块的依赖,会提前加载。一般都是空的。
参数2:依赖项加载完成之后的回调函数
所有的依赖加载完成之后,webpack会执行这个回调函数,require对象的一个实现会作为一个参数传递给回调函数,因此,可以require依赖和其他模块提供下一步的执行。
参数3:chunk名称
相同chunk名称的文件 所有依赖都会被放进相同文件束。
我解释一下这个原理啊,在网上找了挺久,都是使用方法,不知道它到底做了什么,才实现的异步加载。
webpack把这个模块导出一个js文件,然后用到这个模块的时候,就动态构造script标签插入DOM,再由浏览器去请求。回调函数是在依赖加载完成之后执行。