前言
一般来说，你不需要太关心vue的运行时性能，它在运行时非常快，但付出的代价是初始化时相对较慢。在最近开发的一个Hybrid APP里，Android Webview初始化一个较重的vue页面竟然用了1200ms ~ 1400ms，这让我开始重视vue的初始化性能，并最终优化到200 ~ 300ms，这篇文章分享我的优化思路。
性能瓶颈在哪里？
先看一下常见的vue写法：在html里放一个app组件，app组件里又引用了其他的子组件，形成一棵以app为根节点的组件树。
而正是这种做法引发了性能问题，要初始化一个父组件，必然需要先初始化它的子组件，而子组件又有它自己的子组件。那么要初始化根标签
这个结果显然不是我们要的，更好的结果是页面可以从上到下按顺序流式渲染，这样可能总体时间增长了，但首屏时间缩减，在用户看来，页面打开速度就更快了。
要实现这种渲染模式，我总结了下有3种方式实现。第3种方式是我认为最合适的，也是我在项目中实际使用的优化方法。
这种方式非常简单，例如：
抛弃了根组件
异步组件在官方文档已有说明，使用非常简单：
这里组件是一个异步组件，会等到手动调用resolve函数时才开始初始化，而父组件
我们利用setTimeout(fn,0)将的初始化放在队列最后，结果就是页面会在初始化完后立刻显示，然后再显示。如果你的页面有几十个组件，那么把非首屏的组件全设成异步组件，页面显示速度会有明显的提升。
你可以封装一个简单的函数来简化这个过程：
new Vue({
components: {
B: deferLoad( /component-config/ ),// 100ms后渲染
C: deferLoad( /component-config/,100 )
}
})
看起来很美好，但这种方式也有问题，考虑下这样的结构:
还是按照上面的异步组件做法，这时候就需要考虑把哪些组件设成异步的了。如果把A、B、C都设成异步的，那结果就是3个