vue组件懒加载（Vue Lazy Component ）

什么是懒加载

懒加载也叫延迟加载，即在需要的时候进行加载，随用随载

 

 

为什么需要懒加载

在单页应用中，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，延时过长，不利于用户体验，而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时

我们先来看看这样的一个页面，页面由大量模块组成，所有模块是同时进行加载，模块中图片内容较多，每个模块的依赖资源较多（包括js文件、接口文件、css文件等）

所以我们在加载这样的页面会非常的慢

 

 

解决思路

组件化

为了方便后续的优化，我们必须要求每个模块之间降低耦合，将相关的逻辑（比如请求接口、请求相关的依赖资源）都封装在内部，在 Vue 里落实成组件的形式

• 将各模块拆分为组件粒度
• 将组件依赖的资源全部封装在组件内部进行调用

加载优先级

在完成了组件化的拆分，确保模块之间不会互相影响和产生耦合之后，我们可以方面地调整加载策略。加载的策略是根据可见性来处理优先级问题。

• 优先加载首屏可见模块
• 其余不可见模块懒加载，待可见或即将可见时加载

 

 

如何解决判断可见性问题

从前我们都是通过监听滚动事件、resize 事件来判断模块是否可见，代码不仅繁琐，而且一不小心没有函数去抖就又可能导致严重的性能问题。

现在我们有了更好的选择—— IntersectionObserver API ，IntersectionObserver 允许你配置一个回调函数，每当 target ，元素和设备视口或者其他指定元素发生交集的时候该回调函数将会被执行。这个 API 的设计是异步的，而且保证你的回调执行次数是非常有限的，而且回调是会在主线程空闲时才执行，在性能方面表现更优，使用起来也更简单。

目前是现代浏览器支持，低版本浏览器可以通过 polyfill 兼容。

 

 

如何尽可能懒的条件渲染

在解决了加载条件的判断之后，我们需要解决加载条件为假的情况下不去渲染、加载条件为真的时候才渲染的问题，这里的答案非常简单：使用 Vue.js 提供的 v-if 指令，就可以做到真正的惰性渲染。

 

 

如果可见后进行初始渲染，可见前如何显示

如果在判断加载条件为假的时候，什么都不渲染，就会带来一系列问题：

• 用户体验比较差，最开始是白屏，然后突然又渲染出现内容。
• 最致命的是我们判断可见性是需要一个目标来观察的，如果什么不都渲染，我们就无从观察。

这里引入一个骨架屏的概念，我们为真实的组件做一个在尺寸、样式上非常接近真实组件的组件，叫做骨架屏。

骨架屏的作用有：

• 提升用户感知体验
• 保证切换的一致性
• 提供可见性观察的目标对象

 

 

如何提升切换时的体验

在真实组件开始渲染的时候，需要一定的时间和空间，时间指的是真实组件从创建到渲染的时间，包括请求接口、请求资源和渲染的时间，空间指的是页面布局中需要给真实组件留出刚好的位置，避免产生抖动。

这里我们可以使用 Vue.js 内置的 transition 组件自定义骨架组件和真实组件的进入和离开效果，通过合理的布局和定位，减少切换时的抖动，

通过设置过渡效果给真实组件留出一定的加载时间。

 

 

Vue组件懒加载方案——Vue Lazy Component

该插件支持 组件可见或即将可见时懒加载，支持 组件延时加载，支持 加载组件前展示组件骨架，提高用户体验，支持 懒加载组件分包异步加载

安装插件：方式1 利用插件方式全局注册，方式2 局部注册，方式3 独立版本引入，自动全局注册

npm i @xunlei/vue-lazy-component

代码使用示例，使用标签将组件包裹即可