vue异步加载的简单试验

网络上关于vue的优化手段非常多，有些有效有些就一般般了，习惯了ctrl+c/v拿来主义的人来说，直接照搬过项目就好了，然而这些优化手段是不是都用上才会秒开呢？或者说也许我们只要一个就好？因为优化的目的就是为了减少项目体积，增强体验的。下面利用工作之余 我做了些优化手段的简单对比，也让新手们知道怎么去做简单的对比试验来检验自己的优化效果。

注明：以下测试都是本地、wifi环境  实际生产环境优化效果会更明显！！

• 路由的异步加载

项目代码

通过使用webpack提供的import方法可以让对应的模块异步加载，这个方法返回的是一个promise函数，可以使用.then 和.catch来获取结果和捕获错误进行组件异步重加载

使用异步加载路由结果：：

可以看到异步加载路由虽然因为增加了几个js映射索引文件，请求数多了，但是总的加载体积是要小的  这就大大的缩小了dom的解析和布局压力，缩减了页面白屏和首屏渲染时间

切换路由时可以看到 每次切换路由favicon.ico都会发起请求，这是不合理的，应该让favicon.ico缓存起来。

对比使用同步加载路由结果：：

可以发现如果在路由加载环节使用异步加载  首次资源解析时间会缩减50%左右，这个数字随着路由数量越多越客观，是不是很香。

• 单独页面组件或模块的异步加载

1.首页全部组件一起加载

1. 首页仅加载部分组件

对比可以看到如果将首页所有的组件都一起全部加载，load的时长比Dom解析时长多了将近1s多，主要原因是因为有个组件的图片特别多，也没有使用懒加载等手段优化。要知道静态资源加载时间越长将会直接用户某些可交互时间延长

而测试用的组件都是非常基本的dom  组件越复杂，性能优化效果会越明显，是不是很香。

那我们如何减少首屏的体积或者是只显示首屏的组件呢？答案是依然利用import来异步加载组件

具体怎么骚操作，请君继续往下看↓

这里我们借助了v-if来让组件显隐，同时利用component可以接受一个对象的特征，写了一个AsyncComponent函数来返回异步组件的相关逻辑，可以看到使用了异步加载，首屏将ImgList组件给屏蔽了，也就是说它一开始并没有被请求。

作为对比，我们点击按钮看看：

可以看到，图片组件这个时候才开始进行渲染。

上面那种方式用户主动点击的，那我们如何让它自动在滚动到指定位置后再异步加载呢？因为很多场景都是用户无感加载的，比如电商业务的首页，商品详情页、推荐栏等。

答案是使用 IntersectionObserver  但是要注意的是，这个api在IE全版本不支持

 需要自己hake一个兼容版的，可以利用传统的距离api，比如getBoundingClientRect

只要判断bottom<clientHeight和top>0是否在屏幕内就好了

代码如下：

好了 经过以上处理，我们首屏已基本完成了按组件来进行异步加载了，减少了首次加载资源的体积。

但是对于图片较多的首页来说，尤其是对于电商业务、活动h5页面，图片资源的加载也会导致整体的Load时间延长，那我们怎么去处理这块呢？

方式就是利用图片的懒加载！

懒加载的原理就是先放一张默认图片进行占位，然后监听该img节点是否在可视范围，如果在则将真实的url地址替换之前的默认地址src.

好了，经过以上的简单处理，相信新手们很容易就能快速上手自己去体验啦，优化就这么简单，先有现象找出问题原因，再有针对性的去优化，借助可视化工具比如speedpage,lighthourse、performance.timing等

由于篇幅有限，需要以上代码的童鞋可以移步到这 

https://github.com/woshiitdaniu

或者是直接npm install v-ssr-async-loadhttps://www.npmjs.com/package/v-ssr-async-load