vue项目spa首页加载白屏原因以及解决方法

先说下 SPA 单页面的加载过程：

解决方法：

1.预渲染；
2.同构：（何为同构渲染，就是一套代码多端使用，现在有一些框架，Next，Nuxt，类似于渲染就是vue ->json ->vue-server-renderer ->html）
3.ssr；
4.路由懒加载：（通过箭头函数实现路由懒加载const app = () =>import('')）；
5.quicklink：（quicklink就是在浏览器空闲的时候去指定需要加载的数据,这个是谷歌开源的，可以去看看)；
6.使用Gzip压缩，减少文件体积,加快首屏页面打开速度；(前提是服务器那边得开启gzip)
7.外链CSS,JS文件：（很多时候我们在main.js中直接import一些ui库或者css文件啥的，以后可以在index.html，通过script外链引入，这样就不会通过我们的webpack打包）；
8.webpack entry：（就是将单页改成多页应用,比如一些组件中，vue.js vue-router等插件已经在某个页面使用了，然后给它缓存起来，下次就无需加载）；
9.骨架屏：（骨架屏就是在进入项目的FP阶段，给它来一个类似轮廓的东西，当我们的页面加载完成之后就消失，这个也很好做的，很多ui库都有这个东西，可以参考一下）；
10.loading：（首页加一个loading或许是最原始的方法了，在index.html里加一个loadingcss效果，当页面加载完成消失）；

---

预渲染和ssr的区别：

---