详解如何在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 相关文章推荐
jQuery 解析xml文件
Aug 09 Javascript
jquery 之 $().hover(func1, funct2)使用方法
Jun 14 Javascript
jQuery方法简洁实现隔行换色及toggleClass的使用
Mar 15 Javascript
JS应用正则表达式转换大小写示例
Sep 18 Javascript
kindeditor编辑器点中图片滚动条往上顶的bug
Jul 05 Javascript
jQuery实现三级菜单的代码
May 09 Javascript
JS判断日期格式是否合法的简单实例
Jul 11 Javascript
jQuery对checkbox 复选框的全选全不选反选的操作
Aug 09 Javascript
jQuery实现文章图片弹出放大效果
Apr 06 jQuery
ES6 class类链式继承,实例化及react super(props)原理详解
Feb 15 Javascript
Vue之封装公用变量以及实现方式
Jul 31 Javascript
vue-element-admin项目导入和导出的实现
May 21 Vue.js
基于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
Symfony控制层深入详解
2016/03/17 PHP
PHP动态生成指定大小随机图片的方法
2016/03/25 PHP
php中yar框架实例用法讲解
2020/12/27 PHP
jQuery 对象中的类数组操作
2009/04/27 Javascript
childNodes.length与children.length的区别
2009/05/14 Javascript
Google 静态地图API实现代码
2010/11/19 Javascript
js控制当再次点击按钮时的间隔时间
2014/06/03 Javascript
JavaScript使用focus()设置焦点失败的解决方法
2014/09/03 Javascript
javascript性能优化之事件委托实例详解
2015/12/12 Javascript
js多功能分页组件layPage使用方法详解
2016/05/19 Javascript
js实现会跳动的日历效果(完整实例)
2017/10/18 Javascript
JS实现分页浏览横向图片(类轮播)实例代码
2017/11/06 Javascript
JavaScript多线程运行库Nexus.js详解
2017/12/22 Javascript
vue实现微信分享功能
2018/11/28 Javascript
微信小程序实现展示评分结果功能
2019/02/15 Javascript
jquery 验证用户名是否重复代码实例
2019/05/14 jQuery
js实现带搜索功能的下拉框
2020/01/11 Javascript
JS前端模块化原理与实现方法详解
2020/03/17 Javascript
详细分析React 表单与事件
2020/07/08 Javascript
bootstrap-closable-tab可实现关闭的tab标签页插件
2020/08/09 Javascript
Javascript前端下载后台传来的文件流代码实例
2020/08/18 Javascript
vue中jsonp插件的使用方法示例
2020/09/10 Javascript
Python实现自动为照片添加日期并分类的方法
2017/09/30 Python
Python常用模块之requests模块用法分析
2019/05/15 Python
Python 网络编程之UDP发送接收数据功能示例【基于socket套接字】
2019/10/11 Python
浅谈numpy中函数resize与reshape,ravel与flatten的区别
2020/06/18 Python
美国知名珠宝首饰品牌:Gemvara
2017/10/06 全球购物
京东国际站:JOYBUY
2017/11/23 全球购物
考博专家推荐信模板
2013/12/02 职场文书
机械设计及其自动化专业求职信
2014/06/09 职场文书
环境保护建议书
2014/08/26 职场文书
2015元旦家电促销活动策划方案
2014/12/09 职场文书
机修车间主任岗位职责
2015/04/08 职场文书
初一语文教学反思
2016/03/03 职场文书
Pyqt5将多个类组合在一个界面显示的完整示例
2021/09/04 Python
JS前端使用Canvas快速实现手势解锁特效
2022/09/23 Javascript