前言
今天我要介绍的是一款前端开发中非常有用的 npm 包，它就是 prerender-spa-plugin-custom。
这个包能够解决前端应用在 SEO 以及搜索引擎爬虫抓取方面的问题，并且易于使用。
本文将以一些实例操作和逐步 guide 为主，并在最后结尾总结一下使用该 npm 包的一些经验和注意点。
使用实例
安装
在项目基础开发环境中使用 npm 或者 yarn 安装该包：
# 使用 npm 安装 npm install prerender-spa-plugin-custom --save-dev # 使用 yarn 安装 yarn add prerender-spa-plugin-custom --dev
配置
在 webpack 配置文件中进行该插件的配置，如下：
-- -------------------- ---- -------
----- ------------------ - --------------------------------------
----- -------- - ------------------------------------
-------------- - -
-- ---
-------- -
-- ----------
--- --------------------
-- ---------------- -----
---------- -------------------- --------
-- ---------------
-- ---------------------
------- --------- ----------
-- --------- -----
-- -------------- --------- --------- ---------
--------- --- ----------
-- ---------------- --- --
-- -- ---- --------- ---- -------- ---- ----
-- ------
-- ------
-- ---- ---------
-- ---- ------------------------
-- ------
-- -------
-- -------
------- -
------------------- ---- - ----------
--------------------- ----- --------------------------
----------------- ---------
-
--
--
-
-然后直接运行打包命令：
npm run build
打包结束后，我们可以通过 browser 打开生成的 html 文件，可以看到所有静态资源都已经提前渲染好了。
配置详解
上述配置中，我们重点需要关注的是 prerender-spa-plugin-custom 对象所包含的两个关键属性：
staticDir: 已经生成好的主体 html 文件存放目录，所有静态资源（图片，js，style 等）都已经被编译成 html 文件。
需要是项目的真实目录，可以使用 path.join() 方法进行处理。
routes: 需要预渲染的页面路由，可以配置单个或多个路径，也可以使用正则表达式。
注意事项
- 在整个预渲染过程中，如果遇到提示
Cannot find module 'puppeteer'的 warning，需要安装一下puppeteer对应版本的 chrome:
# 默认情况下使用的 Chrome 版本 npm i puppeteer
- 此外，若项目中存在动态路由，如
/post/:id，则需要支持该路由地址的跳转，并能返回对应的详情页渲染后的 html 并输出到该文件夹，需要进行以图片为根的其他文件引用插值预处理。
总结
prerender-spa-plugin-custom 这个 npm 包提供了非常便利的服务，解决了前端应用在 SEO 以及搜索引擎爬虫抓取方面的问题。
通过本文的介绍，相信您已经掌握了如何使用它进行预渲染操作的技巧。希望对您在前端开发、SEO 优化等方面有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005671581e8991b448e3685