详解如何在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结构都是下面这样的
<!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中的内容可以是任何你想要预先渲染的模板
因为这里我们的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的模板引擎来生成模板，其实就是将服务端的渲染工作放到了编译的过程当中。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
webpack配置之后端渲染详解
webpack配置之后端渲染2017年, vue, react, angular 已经占据前端的主流, 不得不承认这也是前端的未来发展方向. 但是后端渲染的开发方式仍然很常见, 不管是个人项目还是商业项目, 后端渲染搞起来真是糙猛快. 但是借着前端发展的东风, 后端渲染也有很大的改进空间. 这里就介绍一下我自己的实践经验: 前后端不分离的情况下实现热加载以及一定程度下的前端主导开发. 这里以koa为例, 但是仓库里也有django版. 理论上所有语言都可以实现. 有兴趣可以看下, 仓库地址在文末
-
详解React项目的服务端渲染改造(koa2+webpack3.11)
因为对网页SEO的需要,要把之前的React项目改造为服务端渲染,经过一番调查和研究,查阅了大量互联网资料.成功踩坑. 选型思路:实现服务端渲染,想用React最新的版本,并且不对现有的写法做大的改动,如果一开始就打算服务端渲染,建议直接用NEXT框架来写 项目地址:https://github.com/wlx200510/react_koa_ssr 脚手架选型:webpack3.11.0 + react Router4 + Redux + koa2 + React16 + Node8.x 主要
-
详解如何在webpack中做预渲染降低首屏空白时间
一.浏览器渲染过程 1.用户打开页面,空白屏,等待html的返回 2.html下载完毕,开始解析html,初始渲染 3.下载css.js等资源,执行js渲染虚拟DOM 4.发起请求.获取数据,渲染内容 下面我们主要是讨论一下如何通过预渲染的方式降低空白屏的时间 缩小首屏载时间是一个重要的优化项,总结来主要有以下几种方式: 1.尽可能的缩小webpack或者其他打包工具生成的包的大小 2.使用服务端渲染的方式 3.使用预渲染的方式 4.使用gzip减小网络传输的流量大小 5.按照页面或者组件分块懒
-
详解如何在pyqt中通过OpenCV实现对窗口的透视变换
窗口的透视变换效果 当我们点击Win10的UWP应用中的小部件时,会发现小部件会朝着鼠标点击位置凹陷下去,而且不同的点击位置对应着不同的凹陷情况,看起来就好像小部件在屏幕上不只有x轴和y轴,甚至还有一个z轴.要做到这一点,其实只要对窗口进行透视变换即可.下面是对Qt的窗口和按钮进行透视变换的效果: 具体代码 1.下面先定义一个类,它的作用是将传入的 QPixmap 转换为numpy 数组,然后用 opencv 的 warpPerspective 对数组进行透视变换,最后再将 nump
-
详解如何在C#中使用投影(Projection)
投影(Projection) 是一种可以将查询结果进行 塑性 的一种操作,你可以使用 投影 将一个 object 转成仅包含你需要属性的新对象,这篇文章中,我们就一起看看如何使用 投影 功能. C# 中的投影 LINQ 集成查询中有两个支持投影的扩展方法,分别为: Select 和 SelectMany 操作,可以用它们投影单个或者多个属性,或者投影查询的结果集到一个新的匿名类型中,还可以在投影的过程中执行: 再计算,过滤,或者其他一些必要的操作. Select 投影 为了演示目的,我先构造一个
-
详解如何在Flutter中获取设备标识符
目录 使用 platform_device_id 应用预览 代码 使用 device_info_plus 应用预览 代码 结论 本文将引导您完成 2 个示例,演示如何在 Flutter 中获取设备标识符 使用 platform_device_id 如果您只需要运行应用程序的设备的 id,最简单快捷的解决方案是使用platform_device_id包.它适用于 Android (AndroidId).iOS (IdentifierForVendor).Windows (BIOS UUID).ma
-
详解如何在SpringBoot中自定义参数解析器
目录 前言 1.自定义参数解析器 2.PrincipalMethodArgumentResolver 3.RequestParamMapMethodArgumentResolver 4.小结 前言 在一个 Web 请求中,参数我们无非就是放在地址栏或者请求体中,个别请求可能放在请求头中. 放在地址栏中,我们可以通过如下方式获取参数: String javaboy = request.getParameter("name "); 放在请求体中,如果是 key/value 形式,我们可以通
-
详解如何在Vue中动态添加类名
目录 静态和动态类 有条件的类名 使用数组语法 使用对象语法 与自定义组件一起使用 快速生成类名 使用计算属性来简化类 能够向组件添加动态类名是非常强大的功能.它使我们可以更轻松地编写自定义主题,根据组件的状态添加类,还可以编写依赖于样式的组件的不同变体. 添加动态类名与在组件中添加 prop :class="classname"一样简单.无论classname的计算结果是什么,都将是添加到组件中的类名. 当然,对于Vue中的动态类,我们可以做的还有很多.在本文中,我们将讨论很多内容:
-
详解如何在JavaScript中使用装饰器
目录 安装 vite配置 webpack配置 使用 语法: @+函数名 类装饰器 带参数的修饰器 类成员装饰器 多个装饰器的执行顺序 应用 延迟 节流 防抖 Decorator装饰器是ES7的时候提案的特性,目前处于Stage 3候选阶段(2022年10月). 装饰器简单来说就是修改类和类方法的语法糖,很多面向对象语言都有装饰器这一特性. 为了使用装饰器特性,我们需要用进行babel转义.这里需要用到的是@babel/plugin-proposal-decorators. 安装 npm inst
-
详解如何在Javascript中使用Object.freeze()
Object.freeze() Object.freeze() 方法可以冻结一个对象.一个被冻结的对象再也不能被修改:冻结了一个对象则不能向这个对象添加新的属性,不能删除已有属性,不能修改该对象已有属性的可枚举性.可配置性.可写性,以及不能修改已有属性的值.此外,冻结一个对象后该对象的原型也不能被修改.freeze() 返回和传入的参数相同的对象 用法 const objectExample = { prop1: 20, prop2: "羊先生" }; // 默认情况下,我们可以根据需
-
详解如何在Flutter中集成华为认证服务
最近发现华为AGC认证服务支持Flutter框架了,期待这个平台的支持已经很久了,所以迫不及待接入了,关联了自己的邮箱等账号. 集成步骤 安装flutter环境 a) 下载Flutter sdk包,地址:https://flutter.dev/docs/get-started/install/windows 将压缩包解压到任意文件夹,例如D:\Flutter b) 将flutter命令文件添加到环境变量中,此处我添加的Path为D:\Flutter\flutter_windows_1.22.2-
-
详解如何在Java中调用Python程序
Java中调用Python程序 1.新建一个Maven工程,导入如下依赖 <dependency> <groupId>org.python</groupId> <artifactId>jython-standalone</artifactId> <version>2.7.0</version> </dependency> 2.在java中直接执行python代码片段 import org.python.util