这篇文章分享了从遇到前端业务性能问题，到分析、解决并且梳理出通用的Vue 2.x 组件级懒加载解决方案（Vue Lazy Component ）的过程。

初始加载资源过多

问题起源于我们的一个页面，下面是这个页面的截图和初次请求的瀑布图。

初始加载的时候，一共请求了155个资源，请求的瀑布图就快要和页面一样长了😊

初始加载的资源过多导致在 domInteractive 之后，页面花费了大量时间加载子资源，导致页面的 load 时长被严重拖长，达到了 5.6s 。

来看看这些子资源都是什么，根据请求资源的类型，我们找到了最多的类型是图片，这是显而易见的，页面上到处都是大图片，其次是 js 文件，由第三方的业务插件和一些 JSONP 的接口组成。

问题分析

再回到最初的这个页面，结合上面的数据情况我们得出了这个页面的问题总结结论：

页面由大量模块组成
每个模块部分由首页自主维护，部分由业务方通过插件维护
所有模块是同时进行加载
模块中图片内容较多
每个模块的依赖资源较多（包括js文件、接口文件、css文件等）

解决思路

我们提出了下面两个主要的解决思路：

组件化分治思想

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

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

加载优先级

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

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

有了上面的解决思路，我们开始思考具体的实现：

如何解决判断可见性问题？

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

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

http://caniuse.com/#search=IntersectionObserver

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

如何尽可能懒的条件渲染？

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

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

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

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

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

骨架屏的作用有：

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

如何提升切换时的体验？

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

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

上面的问题都有了答案之后，我们很容易就可以实现一个通用的方案，来解决组件的懒加载问题。

Vue组件懒加载方案介绍

项目Github地址： https://github.com/xunleif2e/vue-lazy-component

这个是我们基于上面的思考做的一个通用的解决方案，下面简单介绍一下特性、使用以及 API 方面的知识，后面结合 5 个具体的 DEMO 来讲解更高级的用法。

特性

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

安装和使用

npm i @xunlei/vue-lazy-component

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

用法

Props

参数	说明	类型	可选值	默认值
viewport	组件所在的视口，如果组件是在页面容器内滚动，视口就是该容器	HTMLElement	true	`null`，代表视窗
direction	视口的滚动方向, `vertical`代表垂直方向，`horizontal`代表水平方向	String	true	`vertical`
threshold	预加载阈值, css单位	String	true	`0px`
tagName	包裹组件的外层容器的标签名	String	true	`div`
timeout	等待时间，如果指定了时间，不论可见与否，在指定时间之后自动加载	Number	true	-

Events

事件名	说明	事件参数
before-init	模块可见或延时截止导致准备开始加载懒加载模块	-
init	开始加载懒加载模块，此时骨架组件开始消失	-
before-enter	懒加载模块开始进入	el
before-leave	骨架组件开始离开	el
after-leave	骨架组件已经离开	el
after-enter	懒加载模快已经进入	el
after-init	初始化完成	-

DEMO 1 超长页面懒加载

https://xunleif2e.github.io/vue-lazy-component/demo/dist/index.html#/large-page

<vue-lazy-component>
    <st-series-sohu/>
    <st-series-sohu-skeleton slot="skeleton"/>
</vue-lazy-component>

通过上面这种简单的使用方式就可以实现组件即将可见时自动加载。

DEMO 2 延时加载

https://xunleif2e.github.io/vue-lazy-component/demo/dist/index.html#/timeout

<vue-lazy-component :timeout="1000">
    <st-series-sohu/>
    <st-series-sohu-skeleton slot="skeleton"/>
</vue-lazy-component>
`

如果有时候仅仅是希望某些组件稍后渲染，而不一定要等到可见时，可以通过这种方式。

比如我们业务中可能会有些运营性质的挂件，就可以采取延时加载的方式。

DEMO 3 自定义过渡效果

https://xunleif2e.github.io/vue-lazy-component/demo/dist/index.html#/custom-transition

如果觉得 Vue Lazy Component 自带的淡入淡出的过渡效果太丑，或者需要调整淡入淡出效果的时长，就可以通过自定义样式来改变过渡效果。这个例子演示了另外一种过渡效果，transition 的生命周期可以参考 Vue.js 的 transition 组件的文档。

DEMO 4 webpack 分包

https://xunleif2e.github.io/vue-lazy-component/demo/dist/index.html#/large-page-chunks

DEMO1 演示了如何懒加载模块，但其实只是推迟了模块的渲染和模块内的资源的加载，如果我们需要更进一步，连模块本身的代码也是懒加载，就像 AMD 那样异步按需加载，这个也是可以做到的。

这里可以利用Vue.js的异步组件，将每个真实组件都注册成异步组件，在异步组件的工厂函数里使用 Webpack 的 AMD 版本的 require ，就可以实现真实组件可以分成独立的 bundle 加载，脱离页面 js 的bundle。

但是这里会有个问题，就算模块是可见时才渲染，在打开页面的时候会发现模块不可见之前它的 bundle 已经加载了，这并没有实现按需加载。

这个例子演示了一种做法，Vue Lazy Component 可以在即将切换真实组件前通过 Scoped Slots 传递一个 loading 属性给真实组件，真实组件只要是根据这个 loading 来条件渲染就可以避免非按需加载，这个和 Vue.js 对组件的解析机制有关，例子里有相应的的代码，有兴趣的同学可以深入研究下。