vue构建webapp,首屏加载优化

用vue-cli打包创建的webapp工程,index.html中不包含dom内容结构,都是在js中,如下图

image.png

仅仅包含<div id='app'></div>
这样的话,就需要等待依赖的3个js加载完成才可以显示页面,之前页面是空白的,对于移动端来讲非常不友好,下载js需要时间,针对这个问题查询了许多资料,最终找到了一个解决的方法:

image.png

vue文档中有这样一段预渲染的介绍,点击去看看prerender-spa-plugin
根据介绍设置

image.png

1,npm install prerender-spa-plugin
2,设置webpack.conf.js
3,设置exports plugin
4,npm run build
查看index.html

image.png

不再是之前的一个空div了,首页内容展现在index.html中了,这样就可以解决空白的问题了!!
和大家分享一下

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 这次朝阳区不如海淀区抢眼
    翔子BC阅读 1,586评论 0 0
  • 在部队驻地村庄经过,正在果园里劳作的一个中年农民兄弟热情地邀我进他的果园瞧瞧。他的果园内硕果累累,他一边陪...
    翔遠阅读 1,651评论 0 0