1、分析问题

web app 之所以打开慢，主要还是渲染的问题：DNS解析 – 服务器交互 – 浏览器页面渲染

我们可以通过cdn引入、去除map文件、异步加载、按需引入、压缩等等方法，这里我就不再阐述了，大家可以自行搜索 Vue项目优化

vue_dom__9">2、vue 虚拟dom 替换

我们大家都知道，vue、react 的双向数据绑定，都是通过用虚拟dom，替换真实dom实现的，不了解的同学，可以戳这里Vue学习 – 双向数据绑定~

那么页面首次加载时，真实的dom肯定会先加载完成，然后根据路由，将对应的页面再渲染。

那么是否可以，在index.html里需改一下呢？

3、index.html

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=750, user-scalable=no">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>页面加载失败~</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

4、添加动画

在 id 为 app 的标签里面，添加内容

//html
<div id="app">
    <section class="guide-wrap-app" >
      <section class="main">
        <div class="box">
            <p class="b"></p>
         </div>
      </section>
    </section>
 </div>

//css
<style>
	#app {
	  display: block;
	  min-height: 100%;
	  max-width: 750px;
	  margin: 0 auto;
	  width: 100%;
	  //图片自行填写真实地址
	  background: url('~@/assets/img/back-1.png') no-repeat center;
	  background-size: cover;
	  position: relative;
	}
	.guide-wrap-app{
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 999;
      }
      .guide-wrap-app .main{
        height: 100%;
      	display: flex;
        align-items: center;
        justify-content: center;
      }
      .guide-wrap-app  .box{
        width: 521px;
        margin: 0 auto;
        height: 28px;
        border-radius: 14px;
        border: 2px solid #fff;
        background-color: #000;
        box-sizing: border-box;
      }
      .guide-wrap-app  .box .b{
        background-color: #FFDE1E;
        height: 24px;
        border-radius: 12px;
        width: 0px;
        -webkit-animation:  widthFn 1s forwards;
        animation:  widthFn 1s forwards;
      }
      
	@keyframes widthFn {
	  from {
	    width: 0;
	  }
	  to {
	    width: 100%;
	  }
	}
</style>