npm 包 weg-bigpipe 使用教程

阅读时长 4 分钟读完

前言

随着前端页面的复杂化,我们需要更快速、高效的方式来渲染页面。传统的的同步渲染方式已经无法满足需求,所以需要采用新的技术来进行页面渲染。在这个背景下,BigPipe 诞生了。BigPipe 技术基于 Facebook 开源的 BigPipe 技术,用于解决服务端渲染的性能问题。weg-bigpipe 就是基于该技术开发的 npm 包。本文就是要介绍如何使用 npm 包 weg-bigpipe 来优化前端页面渲染,提高页面性能。

安装

使用方式

weg-bigpipe 最重要的一个特性就是让我们拆分一个页面成为多个 Pagelets(页面片段),这些 Pagelets 可以独立渲染、并发加载,大大提高了页面渲染的效率。

创建 server

要使用 weg-bigpipe 开始优化页面渲染,首先我们需要创建一个 Express 服务器并引入 weg-bigpipe:

注意:使用之前需要安装 Express 和 weg-bigpipe。

创建 Pagelet

-- -------------------- ---- -------
----- ------- - -------------------------------

----- -------------- - --- ---------
  --- -----------------
  ---- ---------------------
  --- -------------------
---

---------------------- - -- --- -- -- -
  ---------------------- - ----- ----------
  --------------- - -----------------
  ---------------- - ----- ---------
  ---------------- - -------- -----------------
  --------------------
--

Pagelet 的属性分别是:

  • id:Pagelet 的唯一标识 ID,同一页面不能重复,发生重复会引起覆盖,数据丢失。
  • css:Pagelet 需要的 CSS 样式文件,支持数组(多个文件)和单个文件。
  • js:Pagelet 需要的 JS 文件,支持数组(多个文件)和单个文件。
  • handler:Pagelet 的渲染方法,返回值可以是数据对象,也可以是渲染后的 HTML 字符串。

在示例代码中,handler 方法返回一个数据对象,其中 res.render('index') 会渲染模板并返回 HTML 字符串。

渲染 Pagelet

-- -------------------- ---- -------
------------ ----- ---- -- -
  -------------------- ---------------------------------

  -----------------------------------
  -------------------------
  ----------------------------

  ----------
---

当我们访问根路径时,initialPagelet.toHTML() 方法会将 Pagelet 渲染成 HTML 字符串返回,并输出到浏览器中。使用这种方法可以在一个 request-response 循环中构建一个多 Pagelet 的页面。

原理

在服务器端,使用 BigPipe 可以对页面进行分块,划分成多个 Pagelets,每个 Pagelet 都是一个独立的组件,可以独立渲染、并发加载。比如,在产品列表页面中,我们可以通过使用 BigPipe 将商品卡片的渲染单独划分为一个 Pagelet,在发起页面请求时,页面会先渲染出固定的结构和 CSS,然后通过 JSON 数据返回 Pagelet 并插入到页面中。这种策略可以有效地避免过度渲染造成页面响应过慢的问题。

总结

通过上述的介绍,我们了解了如何使用 npm 包 weg-bigipe 来优化前端页面渲染,提高页面性能。weg-bigpipe 帮助我们将一个页面分成多个 Pagelets,让 Pagelets 可以独立渲染、并发加载,提高了页面的响应速度。使用 BigPipe 技术能够很好地解决服务端渲染的性能问题,以此为基础,可以进行更加高效的前端页面开发。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/600671078dd3466f61ffde58

纠错
反馈