在开发SPA单页应用的时候，经常会碰到的问题就是首页白屏时间过长，影响用户体验，这个根本原因在于webpack打包出来的
vender.js文件太大，首页必须加载完才可以显示出页面。当然这个解决方法有很多，比如externals分离静态资源，路由懒加载，或者开启gzip压缩等等。为了更好的体验，我们还可以给首屏加loading动画。
方案其实很简单，就是在index.html里面设置一个loading样式，浏览器会先加载这个loading，然后在App.vue里面再隐藏这个loading即可。
index.html
<style>
.waiting {
background-color: #00263c;
}
.breath-logo {
width: 60px;
height: 60px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
background: url('./static/images/nio_logo.png') no-repeat;
background-size: contain;
animation: fadeInOut 3s linear infinite
}
</style>
<body>
<!-- 首屏加载 -->
<div id="nio-loading" class="waiting">
<div class="breath-logo"></div>
</div>
<div id="app"></div>
</body>
App.vue
...
//等vender.js加载后隐藏loading
mounted: function() {
document.getElementById("nio-loading").style.display = 'none';
}
...
