Vue项目的MPA
2021-03-16
业务场景
vue项目包含几十个活动(营销类留资、抽奖等),而每次用户只需要打开一个活动却要下载整个包的资源,导致首屏时间过长。
解决方案
修改项目配置,构建为多页面应用(mpa)
SPA
众所周知,Vue打包默认为SPA项目,这也是大势所趋。第一次进入页面时会加载所有资源包,页面通过js渲染跳转所以最大优点为页面切换快,用户体验好,与之对应的便是首屏时间稍慢,除此之外seo困难也是其产生的后遗症。
MPA
web上一个时代还是被mpa霸占,首页时间快,跳转使用html跳转,所以页面切换慢,但此项目用户每次只会使用其中一个活动,所以mpa更为合适。这次方案的提出有些逆潮流,不过能解决问题的方案都是好方案。
Vue项目MPA改造
1、对目录进行调整(以demo页为例)。
若再添加其他页面,则继续在大pages文件夹里添加文件夹demo2等等。
2、在vue.config.js中添加打包配置
--------end--------