组件化分治思想：
- 将各模块拆分为组件粒度
- 将组件依赖的资源全部封装在组件内部进行调用
加载优先级
- 优先加载首屏可见模块
- 其余不可见模块懒加载，待可见或即将可见时加载
如何解决判断可见性问题？
从前我们都是通过监听滚动事件、resize 事件来判断模块是否可见，代码不仅繁琐，而且一不小心没有函数去抖就又可能导致严重的性能问题。
现在我们有了更好的选择—— IntersectionObserver API ，IntersectionObserver 允许你配置一个回调函数，每当 target ，元素和设备视口或者其他指定元素发生交集的时候该回调函数将会被执行。这个 API 的设计是异步的，而且保证你的回调执行次数是非常有限的，而且回调是会在主线程空闲时才执行，在性能方面表现更优，使用起来也更简单。
如何尽可能懒的条件渲染？
在解决了加载条件的判断之后，我们需要解决加载条件为假的情况下不去渲染、加载条件为真的时候才渲染的问题，这里的答案非常简单：使用 Vue.js 提供的 v-if 指令，就可以做到真正的惰性渲染。
如果可见后进行初始渲染，可见前如何显示？
用户体验比较差，最开始是白屏，然后突然又渲染出现内容
最致命的是我们判断可见性是需要一个目标来观察的，如果什么不都渲染，我们就无从观察。
这里引入一个骨架屏的概念，我们为真实的组件做一个在尺寸、样式上非常接近真实组件的组件，叫做骨架屏。
如何提升切换时的体验？
如何提升切换时的体验？
在真实组件开始渲染的时候，需要一定的时间和空间，时间指的是真实组件从创建到渲染的时间，包括请求接口、请求资源和渲染的时间，空间指的是页面布局中需要给真实组件留出刚好的位置，避免产生抖动。
这里我们可以使用 Vue.js 内置的 transition 组件自定义骨架组件和真实组件的进入和离开效果，通过合理的布局和定位，减少切换时的抖动，https://github.com/xunleif2e/vue-lazy-component