在前端开发中，构建静态网站非常常见。而其中的一个步骤就是静态化渲染（prerendering）。prember-beautify 即是一款用于静态化渲染的 npm 包， 它能够帮助我们生成静态 HTML 页面，提高页面加载速度，减轻服务器负载（Server Load）。
本篇文章将介绍如何使用 prember-beautify，来实现静态化渲染。
环境
在使用 prember-beautify 之前，请先确保你的开发环境中已经安装了以下：
- Node.js v10.15.1 或以上
安装
安装 prember-beautify 可以通过 npm 进行安装：
npm install prember-beautify
或者使用 yarn：
yarn add prember-beautify
配置
配置文件的路径默认是 prember.js，我们可以在项目的根目录下创建该文件，并按照以下格式进行配置：
-- -------------------- ---- -------
-------------- - -------- ---------- -
------ -
-------- -
-- --------
----- -
----
---------
-----------
---------------
---------------
--
-- -----------
---------- -------
-- -------
------- ----------------------
-- -- ---- --
--------- ----
-
--
--prember.urls：需要静态化的路由prember.outputDir：静态化渲染后的文件夹名prember.module：使用的模块文件prember.beautify：是否启用 HTML 美化
其中，如果你的项目中没有 prember.js 配置文件，prember-beautify 会以默认配置进行渲染。
美化 HTML
prember-beautify 提供了一种简单的方式来格式化渲染后的 HTML。
启用 HTML 美化功能的方式非常简单，只需要将 prember 配置项中的 beautify 设为 true 即可：
-- -------------------- ---- -------
-------------- - -------- ---------- -
------ -
-------- -
----- -
----
---------
--
---------- -------
------- ----------------------
--------- ---- -- -- ---- --
-
--
--启用美化 HTML 后，在 dist 目录下渲染出的 HTML 文件将会更易于阅读。
指令
prember-beautify 同样提供了一些指令以及预设，帮助我们快速地生成静态页面。
prember-beautify build
运行 prember-beautify build 指令将会生成静态的 HTML 文件，预处理静态资源、图片等文件夹，并统计文件的大小、改变时间等信息，最终生成一个 manifest.js 文件用于服务器读取。
$ prember-beautify build
prember-beautify serve
运行 prember-beautify serve 指令可以启动一个本地服务器，方便我们快速预览渲染后的 HTML 静态文件。
$ prember-beautify serve
prember-beautify deploy
如果我们需要部署静态化网站，可以使用 prember-beautify deploy 指令，将渲染后的 HTML 文件上传至指定的服务器目录中。
$ prember-beautify deploy
可以在配置文件 prember.js 中设置 FTP 的信息：
-- -------------------- ---- -------
-------------- - -------- ---------- -
------ -
-------- -
----- -
----
---------
--
---------- -------
------- ----------------------
--------- -----
-- ----------
--------------- -
----- ------------
----- -----------
--------- -----------
----- ---------
-
-
--
--示例
以一个简单的 Express 服务器为例：
-- -------------------- ---- -------
----- ------- - -------------------
----- ------- - ----------------------------
----- --- - ----------
----------------------------------
------------- ---- -- -
----- ----------- - ----------------
--------------------
---------- -- -
---------------
--
------------ -- -
-------------------
----------------------------------
---
---
---------------- -- -- -
------------------- -- ------- -- ------------------------
---我们可以在项目根目录下新建 prember.config.js，然后配置相关信息：
-- -------------------- ---- -------
-------------- - -------- ---------- -
------ -
-------- -
----- -
----
---------
-----------
---------------
---------------
--
---------- -------
------- ----------------------
--------- -----
-
--
--接着在命令行中运行：
npx prember-beautify build
生成 dist 目录后即可部署到服务器上。
总结
prember-beautify 是一个非常好用的 npm 包，它可以帮助我们快速生成静态 HTML 页面，提高页面加载速度。并且， prembere-beautify 美化 HTML 的功能在生成 HTML 页面的过程中非常实用，可以让 HTML 页面更加易于阅读。
在使用 prember-beautify 时，我们需要掌握的只有几个简单的指令和配置项。随着我们的熟练程度提高，我们可以使用更多的功能来优化我们的网站性能，达到更好的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056b7f81e8991b448e55d9