大佬教程收集整理的这篇文章主要介绍了详解如何在webpack中做预渲染降低首屏空白时间,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
1、用户打开页面,空白屏,等待html的返回
2、html下载完毕,开始解析html,初始渲染
3、下载css、js等资源,执行js渲染虚拟DOM
4、发起请求、获取数据,渲染内容
下面我们主要是讨论一下如何通过预渲染的方式降低空白屏的时间
缩小首屏载时间是一个重要的优化项,总结来主要有以下几种方式:
1、尽可能的缩小webpack或者其他打包工具生成的包的大小 2、使用服务端渲染的方式 3、使用预渲染的方式 4、使用gzip减小网络传输的流量大小 5、按照页面或者组件分块懒加载
在React、Vue这种数据驱动的框架还没盛行的时候,一般我们都是直接在html上写dom结构的,要不就是直接服务端直出,所以我们在下载完html页面后,空白屏的时间是非常短的,因为dom是在html中的,并不是像现在以虚拟dom的方式写在js中,所以,我们不需要等待js下载完毕后才开始渲染页面,而是html下载完毕后直接渲染出dom结构。
如今我们运用Vue等框架进行开发的时候,一般在html结构都是下面这样的
上面__inline__是用于后面图片插入的标记,这里先不用管,其实这个组件就是一个简单的loading组件
最终我们想要的效果是,将这个vue组件的虚拟dom预渲染到html文件当中
...
向上面那样,在html页面返回时编译成base64内嵌到html中的loading就会马上显示,大大降低了白屏的时间,基本可以达到秒开页面,这时候我们不需要等待js资源的下载以及虚拟dom的插入,当然这里loading中的内容可以是任何你想要预先渲染的模板
因为这里我们的loading组件是用vue写的,所以我们试着看看如何来做预渲染并集成到webpack中(可以合着仓库的代码一起看,代码挺简单的,只是一个demo)
这里我们先把vue单文件中的html与css单独抽离出来
const extractAssetsInVueTpl = (vueTplPath) => {
let vueTpl = clearEnter(fs.readFileSync(vueTplPath).toString())
let html = /(.)<\/template>/g.exec(vueTpl)[1]
let css = /'
@H_963_0@module.exports = loading
简单写一个webpack入口配置,这里我们需要使用html-webpack-plugin将loading插入到html中(这里用到了插件的自定义模板)
在html中我们通过模板语法将loading的内容插入到html模板中对应的位置了
...