前言
随着前端页面的复杂化，我们需要更快速、高效的方式来渲染页面。传统的的同步渲染方式已经无法满足需求，所以需要采用新的技术来进行页面渲染。在这个背景下，BigPipe 诞生了。BigPipe 技术基于 Facebook 开源的 BigPipe 技术，用于解决服务端渲染的性能问题。weg-bigpipe 就是基于该技术开发的 npm 包。本文就是要介绍如何使用 npm 包 weg-bigpipe 来优化前端页面渲染，提高页面性能。
安装
npm install --save weg-bigpipe
使用方式
weg-bigpipe 最重要的一个特性就是让我们拆分一个页面成为多个 Pagelets（页面片段），这些 Pagelets 可以独立渲染、并发加载，大大提高了页面渲染的效率。
创建 server
要使用 weg-bigpipe 开始优化页面渲染，首先我们需要创建一个 Express 服务器并引入 weg-bigpipe：
const express = require('express');
const armyknife = require('weg-bigpipe');
const app = express();
app.use(armyknife());注意：使用之前需要安装 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
