携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第25天，点击查看活动详情

场景

我们项目采用的是单页面应用（spa），在首屏加载时就编译了很多其实在首屏是不需要的页面或组件，严重耗费了性能，导致首页加载慢、甚至短暂白屏现象出现。

思路

• 改变项目单页面应用的结构，采用多页面，登录页面单独拆分成一个页面。一般对项目而言，打包拆分成多页面不难，但项目中状态管理（全局数据存储）使用的是vuex，它的特点是注册到一个Vue实例中，也就是说仅能在单页面中传递，这样就需要改变多页之间数据传递方式，如果多页之间传递的数据量大，且比较复杂的话，那改动起来可能就比较大；

• 单页面构建方式不变，对首屏登录页面进行"加速"编译，在前端众多解决方案中，一般较常用的方式主要有两种：预渲染和服务端渲染。

预渲染（Prerender）

预渲染其实很好理解，顾名思义，就是预先编译出首屏需要的html，一般是某一个路由下生成的页面。

但不是什么页面都可以预渲染的。例如某个页面是需要根据用户不同而展示的内容不一样，或是一些实时数据的展示，这些场景的页面都不适合做预渲染。

还有一个就是不适合做很多路由的预渲染，因为预渲染会让构建时间变慢，多路由预渲染的情况下，势必会影响很大。

在本地测试的时候，遇到个问题：

配置首页预渲染后，在本地npm run build 生成dist静态文件夹，vs code插件Live Server启动，为什么在url最后自动补一个 '/' 呢？

如：http://127.0.0.1:5501/login/

原因是：

如果预渲染/login路由页面，webpack在构建中，会在dist文件夹下默认生成/login/index.html文件，直接在浏览器上输入/login，会访问服务器下dist/login/index.html文件，所以会自动补齐/，并且如果导航到另外一个路由，再返回，就没有 / 了，是因为这是vue-router路由跳转。

解决方案：

让某一个路由重定向到该预渲染页面。