首屏加载缓慢之添加loading效果问题

我在做用户体验界面时一方面是要提高网页的加载速度，另一方面也可以加载引导动画转移用户注意力，让用户觉得快。

来讲一下首屏优化 --- 加loading动画。一般情况下，首屏加载都比较慢。因为 chunk-vendors.xxx.js 的体积比较大，没有加载之前页面会白屏，这样用户的体验就很差，我们可以在白屏时用动画替代。

给入口 index.html 文件中 (public/index.html) 中的在根元素内加上 loading 动画效果即可

	<div id="app">
		<style>
			.loading-wrap {
				display: flex;
				justify-content: center;
				align-items: center;
				height: 100vh;
			}

			.balls {
				width: 4em;
				display: flex;
				flex-flow: row nowrap;
				align-items: center;
				justify-content: space-between;
			}

			.balls div {
				width: 0.8em;
				height: 0.8em;
				border-radius: 50%;
				/* background-color: #4b9e5f; */
				background-color: #436ff6;
			}

			.balls div:nth-of-type(1) {
				transform: translateX(-100%);
				animation: left-swing 0.5s ease-in alternate infinite;
			}

			.balls div:nth-of-type(3) {
				transform: translateX(-95%);
				animation: right-swing 0.5s ease-out alternate infinite;
			}

			@keyframes left-swing {

				50%,
				100% {
					transform: translateX(95%);
				}
			}

			@keyframes right-swing {
				50% {
					transform: translateX(-95%);
				}

				100% {
					transform: translateX(100%);
				}
			}

			@media (prefers-color-scheme: dark) {
				body {
					background: #121212;
				}
			}
		</style>
		<div class="loading-wrap">
			<div class="balls">
				<div></div>
				<div></div>
				<div></div>
			</div>
		</div>
	</div>