华山资源网

详解如何在webpack中做预渲染降低首屏空白时间
网络编程 2024/11/16 佚名
3 1

一、浏览器渲染过程

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="/UploadFiles/2021-04-02/bound.js">


在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的模板引擎来生成模板，其实就是将服务端的渲染工作放到了编译的过程当中。




以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
华山资源网 Design By www.eoogi.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
华山资源网 Design By www.eoogi.com
www.eoogi.com 华山资源网
120,135影音资源
344,641技术资源
22,817软件资源
435,032站长资源
一句话新闻
苹果官宣WWDC 2024！预计会有大批AI功能 - 2024/11/16

3月27日消息，苹果宣布2024年全球开发者大会（WWDC）将于6月10日至6月14日举行，巧合的是，这次大会与端午假期重合。

苹果官方表示：

在线参加 Apple 每年规模最大的开发者盛会。亲眼见证 Apple 最新平台、技术和工具的发布。了解如何创建和改进你的 App 和游戏。与 Apple 设计师和工程师互动交流，与全球开发者社区建立联系。以上活动均免费在线举行。

探索各种新的工具、框架和功能，助力你打造出理想的 App 和游戏。通过视频讲座学习新技能，与 Apple 专家进行一对一会面，以推进你的项目，完善你的构思。

Swift Student Challenge 旨在支持和鼓舞下一代开发者、创作者和企业家。太平洋时间 3 月 28 日，我们将公布今年的获奖者名单。获奖者将有资格参加在 Apple Park 举办的特别活动。我们还会选出 50 名杰出获胜者，他们将受邀前往库比提诺，获得为期三天的非凡体验，包括参加 Apple Park 的特别活动。

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。

据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
华山资源网 Design By www.eoogi.com