用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中了，这样就可以解决空白的问题了！！
和大家分享一下
用vue-cli打包创建的webapp工程，index.html中不包含dom内容结构，都是在js中，如下图 仅仅...
webapp优化的辛酸之路 标签（空格分隔）： 优化 移动端的首屏加载速度非常重要，使用了vue.js搭建的SPA...
1、变量提升、函数提升 2、数组的常用方法 3.优化首屏加载速度 4.Vue 首屏加载速度优化 5、Vue如何设置...
Vue 首屏加载优化 关于 Vue 首屏加载优化的一点总结为什么我们要做三份 Webpack 配置文件 在知乎上我...
使用vue构建项目首屏加载时，出现加载慢，白屏的问题解决方案： 步骤一 webpack来打包vue项目，vendo...
1.异步路由加载 2.不打包库文件 spa首屏加载慢，主要是打包后的js文件过大，阻塞加载所致。那么如何减小js的...
（1）组件按需加载;对Element-UI, Mint-UI组件进行按需加载；（2）路由组建懒加载；异步加载con...
https://segmentfault.com/a/1190000010042512
Vue在开发WebApp的时候，有一个致命的缺点，那就是首次加载事件过长，本篇文章主要使用各种方法缩减文件大小，并...
业务需要，从A网站跳转到B网站，网站加载慢，白屏时间有十几秒，影响用户体验，对项目进行了优化 技术栈：vue2+w...
本文标题：vue构建webapp，首屏加载优化
本文链接：https://www.haomeiwen.com/subject/ddlgtxtx.html
网友评论