在webpack中做预渲染降低首屏空白时间的案例

　　介绍

小编给大家分享一下在webpack中做预渲染降低首屏空白时间的案例,希望大家阅读完这篇文章之后都有所收获、下面让我们一起去探讨吧!

<强>一、浏览器渲染过程

1,用户打开页面,空白屏,等待html的返回

2, html下载完毕,开始解析html,初始渲染

3,下载css, js等资源,执行js渲染虚拟DOM

4,发起请求,获取数据,渲染内容

下面我们主要是讨论一下如何通过预渲染的方式降低空白屏的时间

缩小首屏载时间是一个重要的优化项,总结来主要有以下几种方式:

1,尽可能的缩小webpack或者其他打包工具生成的包的大小
2,使用服务端渲染的方式
3,使用预渲染的方式
4,使用gzip减小网络传输的流量大小
5,按照页面或者组件分块懒加载

<强>二,传统页面开发

在反应,Vue这种数据驱动的框架还没盛行的时候,一般我们都是直接在html上写DOM结构的,要不就是直接服务端直出,所以我们在下载完html页面后,空白屏的时间是非常短的,因为DOM是在html中的,并不是像现在以虚拟DOM的方式写在js中,所以,我们不需要等待js下载完毕后才开始渲染页面,而是html下载完毕后直接渲染出DOM结构。

如今我们运用Vue等框架进行开发的时候,一般在html结构都是下面这样的

& lt; ! DOCTYPE  html> 　　& lt; html  lang=癳n"祝辞 　　& lt;才能head> 　　,,& lt; meta  charset=癠TF-8"比; 　　,,& lt; title> title 　　& lt;才能/head> 　　& lt;才能body> 　　,,& lt; div  id=癮pp"祝辞& lt;/div> 　　,,& lt; https://www.yisu.com/zixun/script  src="/bound.js "> 　　 　　

在js资源没有下载完毕的情况下,页面一直都是处于空白的页面,一直要等到虚拟dom插入到id为应用程序的div中,这时候白屏才消失开始展现页面,反正就是让人感觉特别慢就是了!

既然知道了白屏是怎么产生的,那我们下面就来尝试一下如何在webpack中集成预渲染的功能,来降低白屏的时间。

<强>三,在webpack中集成预渲染功能

github: webpack中如何集成预渲染功能

这里我们尝试将一个使用vue编写的加载组件在webpack编译过程中将虚拟dom预渲染到html中、下面是加载组件的内容

& lt; template> 　　,& lt; div 类=發oading-img"祝辞& lt;/div> 　　& lt;/template> 　　 　　& lt; script> 　　export  default  {} 　　& lt;/script> 　　 　　& lt; style> 　　.loading-img  { 　　位置:大敌;固定; 　　,上图:0; 　　,底部:0; 　　,右:0; 　　,左:0; 　　保证金:大敌;汽车; 　　,显示:inline-block; 　　,宽度:60 px; 　　,高度:60 px; 　　背景:大敌;url (__inline__), no-repeat  center 中心; 　　,background-size:包含; 　　} 　　& lt;/style>

上面__inline__是用于后面图片插入的标记,这里先不用管,其实这个组件就是一个简单的加载组件

最终我们想要的效果是,将这个vue组件的虚拟dom预渲染到html文件当中

& lt; html> 　　,& lt; head> 　　& lt;才能meta  charset=癠TF-8"比; 　　& lt;才能title> test</title> 　　& lt;才能!——,pre-render-loading抽出的css ——比; 　　& lt;才能style> 　　,,.loading-img  { 　　,,,位置:,固定; 　　,,,:,0; 　　,,,底部:,0; 　　,,,右:,0; 　　,,,左:,0; 　　,,,保证金:,汽车; 　　,,,显示:,inline-block; 　　,,,宽度:,60 px; 　　,,,身高:,60 px; 　　,,,& lt; !——,这里我们会将加载图编译成base64直接插入到html中,——比; 　　,,,背景:,url(数据:图像/gif; base64 .....), no-repeat  center 中心; 　　,,,background-size:,包含; 　　,,} 　　& lt;才能/style> 　　,,… 　　,& lt;/head> 　　 　　,& lt; body> 　　& lt;才能div  id=癮pp"比; 　　,,& lt; !——, loading  base64图,——比; 　　,,& lt; div 类=發oading-img"祝辞& lt;/div> 　　& lt;才能/div> 　　,, 　　,,… 　　,& lt;/body> 　　& lt;/html>

向上面那样,在html页面返回时编译成base64内嵌到html中的负荷就会马上显示,大大降低了白屏的时间,基本可以达到秒开页面,这时候我们不需要等待js资源的下载以及虚拟dom的插入,当然这里加载中的内容可以是任何你想要预先渲染的模板

在webpack中做预渲染降低首屏空白时间的案例

在webpack中做预渲染降低首屏空白时间的案例