Vue中异步组件(结合webpack,转载)

转载,原文出处:https://www.jianshu.com/p/40a364b5e964

1.什么是异步组件?

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

2.Vue实现按需加载

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

3.webpack的代码分割

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

vue实现异步组件

4.webpack 2 + ES2015

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

es提案实现异步组件

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

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

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

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

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

webpack代码分割

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

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

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

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

参数3:chunk名称

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

    我解释一下这个原理啊,在网上找了挺久,都是使用方法,不知道它到底做了什么,才实现的异步加载。

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

posted @ 2018-12-09 21:08  渴望成为大牛的男人  阅读(1553)  评论(0编辑  收藏  举报