在開發(fā)SPA單頁應用的時候论咏，經常會碰到的問題就是首頁白屏時間過長钓瞭，影響用戶體驗浊竟，這個根本原因在于webpack打包出來的
vender.js文件太大怨喘，首頁必須加載完才可以顯示出頁面。當然這個解決方法有很多逐沙，比如externals分離靜態(tài)資源哲思，路由懶加載，或者開啟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';
}
...
