什么是 prerenderer-webpack-plugin？
prerenderer-webpack-plugin 是一个可以将你的单页面应用程序 (SPA) 预渲染成静态 HTML 的 webpack 插件。由于 SPA 的单页应用需要通过 JavaScript 动态生成页面，因此搜索引擎无法直接抓取其内容。预渲染则可以解决这个问题。
安装
首先，需要在项目中安装 prerenderer-webpack-plugin。你可以通过 NPM 进行安装：
npm i prerenderer-webpack-plugin --save-dev
使用
- 在 webpack 配置文件中引入插件
const PrerendererWebpackPlugin = require('prerenderer-webpack-plugin');- 配置插件
在 webpack 配置文件中配置插件，以生成的 HTML 文件名为例：
-- -------------------- ---- -------
-------- -
--- --------------------------
---------- -------------------- --------
------- ------ -- -------------
-------------------- -
------------ - -------------------------- ----
------ --------
-
--
-说明：
- staticDir 表示生成的静态HTML文件导出的目录，需为绝对路径；
- routes 是需要生成静态 HTML 的路由，可以是一个数组，也可以是一个函数；
- postProcess 是可选参数，用于对每个渲染后的 HTML 进行后处理。
如果你的 SPA 是纯静态内容（即不需要通过 Ajax/fetch 或其他 API 请求数据），则预渲染完成。但如果 SPA 包括异步获取数据的内容，则需要进行一些调整。
- 异步加载数据的预渲染
由于在 SPA 中，数据通常是通过 Ajax/fetch 请求获取的，并且这些请求是异步地发出的。在预渲染时，无法保证这些异步数据已经准备就绪。因此，需要在预渲染时加入一些工作，使得异步请求同步执行，以确保生成的页面可以正常显示所需的数据。
在 routes 数组中，可以为每个路由定义一个函数，用于生成每个路由相关的模板和 JSON 数据，以便进行数组的预渲染处理：
routes: [
{
url: '/',
templatePath: path.join(__dirname, 'src', 'index.html'),
json: path.join(__dirname, 'src', 'data', 'data.json')
}
]其中：
- templatePath 是定义模板的路径；
- json 是定义数据的路径。
然后，通过 onBeforeRender 选项来加载这些 JSON 数据：
-- -------------------- ---- -------
--- --------------------------
---------- -------------------- --------
------- -
-
---- ----
------------- -------------------- ------ --------------
----- -------------------- ------ ------- ------------
-
--
-------------------- -
----- -------- - -------------------- ------ ------- -------------
------ --- ----------------- ------- -- -
----- ------- - ------------------------- ---------
----- ---- - --------------------
-- ------ -
------------------- -- -
-- -------- --- -------- -
------------------- ------
-
---
--------------
- ---- -
---------- --------- --------
-
---
-
--这里使用了一个简单的 Promise，用于在渲染之前获取模板所需的数据，并存储在 data 变量中，以供模板使用。
示例代码
下面是一个完整的 webpack 配置文件，用于简单的 SPA，并包括异步数据加载。
-- -------------------- ---- -------
----- ---- - ----------------
----- ------------------------ - --------------------------------------
----- -- - --------------
-------------- - -
------ -------------------- ------ ------------
------- -
----- -------------------- --------
--------- ------------
----------- ---
--
------- -
------ -
-
----- --------
---- -- ------- -------------- ---
-------- --------------
-
-
--
-------- -
--- --------------------------
---------- -------------------- --------
------- -
-
---- ----
------------- -------------------- ------ --------------
----- -------------------- ------ ------- ------------
-
--
-------------------- -
----- -------- - -------------------- ------ ------- -------------
------ --- ----------------- ------- -- -
----- ------- - ------------------------- ---------
----- ---- - --------------------
-- ------ -
------------------- -- -
-- -------- --- -------- -
------------------- ------
-
---
--------------
- ---- -
---------- --------- --------
-
---
-
--
-
-结论
prerenderer-webpack-plugin 为前端开发人员提供了一种简单而有效的方法，通过预渲染 SPA，使搜索引擎能够直接抓取到网站的内容。这种方法对提升网站 SEO 优化非常有帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005730981e8991b448e934c