详解如何在webpack中做预渲染降低首屏空白时间


Posted in Javascript onAugust 22, 2018

一、浏览器渲染过程

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结构都是下面这样的

<!DOCTYPE html>
<html lang="en">
  <head>
   <meta charset="UTF-8">
   <title>title</title>
  </head>
  <body>
   <div id="app"></div>
   <script src="/bound.js"></script>
  </body>
</html>

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

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

三、在webpack中集成预渲染功能

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

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

<template>
 <div class="loading-img"></div>
</template>

<script>
export default {}
</script>

<style>
.loading-img {
 position: fixed;
 top: 0;
 bottom: 0;
 right: 0;
 left: 0;
 margin: auto;
 display: inline-block;
 width: 60px;
 height: 60px;
 background: url(__inline__) no-repeat center center;
 background-size: contain;
}
</style>

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

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

<html>
 <head>
  <meta charset="UTF-8">
  <title>test</title>
  <!-- pre-render-loading抽出的css -->
  <style>
   .loading-img {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    display: inline-block;
    width: 60px;
    height: 60px;
    <!-- 这里我们会将loading图编译成base64直接插入到html中 -->
    background: url(data:image/gif;base64,.....) no-repeat center center;
    background-size: contain;
   }
  </style>
  ...
 </head>

 <body>
  <div id="app">
   <!-- loading base64图 -->
   <div class="loading-img"></div>
  </div>
  
  ...
 </body>
</html>

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

详解如何在webpack中做预渲染降低首屏空白时间

详解如何在webpack中做预渲染降低首屏空白时间

因为这里我们的loading组件是用vue写的,所以我们试着看看如何来做预渲染并集成到webpack中(可以合着仓库的代码一起看,代码挺简单的,只是一个demo)

这里我们先把vue单文件中的html与css单独抽离出来

// render-loading.js

let vueAssets = null
let vueTplPath = resolvePath('./src/loading/pre-render-loading.vue')

const extractAssetsInVueTpl = (vueTplPath) => {
 let vueTpl = clearEnter(fs.readFileSync(vueTplPath).toString())
 let html = /<template>(.*)<\/template>/g.exec(vueTpl)[1]
 let css = /<style>(.*)<\/style>/g.exec(vueTpl)[1]

 return {
  html,
  css
 }
}

vueAssets = extractAssetsInVueTpl(vueTplPath)

这里我们通过正则的方式将template与style标签中匹配到的内容单独抽离了出来,接下来我们需要将gif图转成base64并插入到我们抽出的css代码当中

let gifPath = resolvePath('./src/loading/imgs/loading.gif')

const transGifToCSSFile = (imgPath) => {
 let ext = path.extname(imgPath).slice(1)
 let preStr = `data:image/${ext};base64,` // 根据尾缀自动拼接对应base64前缀
 let bitDate = fs.readFileSync(imgPath)
 let base64Str = bitDate.toString('base64')
 let dataURL = preStr + base64Str

 return dataURL
}

let dataURL = transGifToCSSFile(gifPath)

上面我们通过extractAssetsInVueTpl函数抽离出了css,这里我们通过一个简单的函数将占位符替换成base64图片

const injectDataURLToCSS = (cssStr, dataURL) => {
 return cssStr.replace(/__inline__/, dataURL)
}

let cssStr = injectDataURLToCSS(vueAssets.css, dataURL)

下面我们就导出loading配置,包含了html模板与style样式字符串

loading.html = vueAssets.html
loading.css = '<style>' + cssStr + '</style>'

module.exports = loading

简单写一个webpack入口配置,这里我们需要使用html-webpack-plugin将loading插入到html中(这里用到了插件的自定义模板)

const HtmlWebpackPlugin = require('html-webpack-plugin')
const loading = require('./render-loading')

module.exports = {
 entry: './src/index.js',
 output: {
  path: __dirname + '/dist',
  filename: 'index_bundle.js'
 },
 plugins: [
  new HtmlWebpackPlugin({
   template: './src/index.html',
   loading: loading
  })
 ]
}

在html中我们通过模板语法将loading的内容插入到html模板中对应的位置了

<html>
 <head>
  <meta charset="UTF-8">
  <title>test</title>
  ...
  <%= htmlWebpackPlugin.options.loading.css %>
 </head>

 <body>
  <div id="app">
   <!-- loading base64图 -->
   <%= htmlWebpackPlugin.options.loading.html %>
  </div>
  
  ...
 </body>
</html>

四、总结

这里只是写一个demo介绍一下原理,更复杂的可以使用vue-server-render来做同构直出或者使用一些像handlebars的模板引擎来生成模板,其实就是将服务端的渲染工作放到了编译的过程当中。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript面向对象(极简主义法minimalist approach)
Jul 17 Javascript
jQuery实现限制textarea文本框输入字符数量的方法
May 28 Javascript
IE7浏览器窗口大小改变事件执行多次bug及IE6/IE7/IE8下resize问题
Aug 21 Javascript
浅谈javascript的Touch事件
Sep 27 Javascript
javascript cookie基础应用之记录用户名的方法
Sep 20 Javascript
EasyUi 打开对话框后控件赋值及赋值后不显示的问题解决办法
Jan 19 Javascript
深入理解Vue nextTick 机制
Apr 28 Javascript
webpack分离css单独打包的方法
Jun 12 Javascript
JavaScript解析JSON数据示例
Jul 16 Javascript
解决layui使用layui-icon出现默认图标的问题
Sep 11 Javascript
深度解读vue-resize的具体用法
Jul 08 Javascript
基于vue 动态菜单 刷新空白问题的解决
Aug 06 Javascript
基于vue中对鼠标划过事件的处理方式详解
Aug 22 #Javascript
vue鼠标移入添加class样式,鼠标移出去除样式(active)实现方法
Aug 22 #Javascript
JS封装的模仿qq右下角消息弹窗功能示例
Aug 22 #Javascript
当vue路由变化时,改变导航栏的样式方法
Aug 22 #Javascript
element-ui 设置菜单栏展开的方法
Aug 22 #Javascript
详解vue-cli脚手架中webpack配置方法
Aug 22 #Javascript
element-ui使用导航栏跳转路由的用法详解
Aug 22 #Javascript
You might like
第4章 数据处理-php正则表达式-郑阿奇(续)
2011/07/04 PHP
php利用imagemagick实现复古老照片效果实例
2017/02/16 PHP
PHP+Session防止表单重复提交的解决方法
2018/04/09 PHP
JS提交并解析后台返回的XML的代码
2008/11/03 Javascript
jquery中输入验证中一个不错的效果
2010/08/21 Javascript
简单实用的js调试logger组件实现代码
2010/11/20 Javascript
Jquery之Ajax运用 学习运用篇
2011/09/26 Javascript
JavaScript自定义事件介绍
2013/08/29 Javascript
javascript数组排序汇总
2015/07/07 Javascript
node.js操作mysql(增删改查)
2015/07/24 Javascript
javascript实现类似java中getClass()得到对象类名的方法
2015/07/27 Javascript
JavaScript获取当前运行脚本文件所在目录的方法
2016/02/03 Javascript
jsonp跨域请求实现示例
2017/03/13 Javascript
Vue分页组件实例代码
2017/04/17 Javascript
jQuery实现的简单无刷新评论功能示例
2017/11/08 jQuery
js实现文件上传功能 后台使用MultipartFile
2018/09/08 Javascript
详解Vue中数组和对象更改后视图不刷新的问题
2018/09/21 Javascript
JS实现随机抽选获奖者
2019/11/07 Javascript
JS中比较两个Object数组是否相等方法实例
2019/11/11 Javascript
vue 出现data-v-xxx的原因及解决
2020/08/04 Javascript
js利用iframe实现选项卡效果
2020/08/09 Javascript
[04:29]2014DOTA2国际邀请赛 主赛事第三日TOPPLAY
2014/07/21 DOTA
python+requests+unittest API接口测试实例(详解)
2017/06/10 Python
python文件拆分与重组实例
2018/12/10 Python
python 求一个列表中所有元素的乘积实例
2019/06/11 Python
基于Numba提高python运行效率过程解析
2020/03/02 Python
基于css3仿造window7的开始菜单
2010/06/17 HTML / CSS
澳洲的UGG雪地靴超级市场:Uggs.com.au
2020/04/06 全球购物
药店主任岗位责任制
2014/02/10 职场文书
《会走路的树》教后反思
2014/04/19 职场文书
出国留学计划书
2014/04/27 职场文书
音乐节策划方案
2014/06/09 职场文书
2015年青年志愿者工作总结
2015/05/20 职场文书
三八节活动简报
2015/07/20 职场文书
迎国庆主题班会
2015/08/17 职场文书
vue项目如何打包之项目打包优化(让打包的js文件变小)
2022/04/30 Vue.js