前端之家收集整理的这篇文章主要介绍了
简单的Vue异步组件实例Demo,
前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
前言
在大型应用中,我们可能需要将应用拆分为多个小模块,按需从服务器下载。为了进一步简化,Vue.js 允许将组件定义为一个工厂函数,异步地解析组件的定义。Vue.js 只在组件需要渲染时触发工厂函数,并且把结果缓存起来,用于后面的再次渲染。
为什么需要异步组件,道理和webpack的按需加载是一样的,如果一开始就加载所有的组件,那么是比较耗时的,所以我们可以将一些组件定义为异步组件,在需要使用的时候再进行加载。
所以好处的话就显而易见了 :
- 按需加载,可以节省首次加载的时间,提高速度,也算是一个性能优化。
- 那么一个组件可能会被使用多次,按需加载的话也不会加载多次,第一次加载完成就会缓存下来,和webpack是一样的,所以不用担心
@H_404_17@
最近读Vue文档的时候仔细看了一下异步组件部分,第一次看的时候一脸懵逼,看第二次还是有点迷茫,第三次就有点感觉了,第四次感觉有点明白了,遂记录一下,下面是我写的一个简单Vue异步组件Demo。
index.html
<
Meta charset="UTF-8">
<
Meta name="viewport"
content="width=device-width,initial-scale=1.0">
<
Meta http-equiv="X-UA-Compatible"
content="ie=edge">
Document