在前端开发的过程中，我们经常需要优化应用的搜索引擎优化 (SEO)。Pember-crawler 是一个优秀的 Npm 包，可以帮助我们快速生成静态化渲染页面以及预加载的信息，以提高搜索引擎的索引与网站的速度。本文将详细介绍如何使用 prember-crawler 来优化你的应用程序。
什么是 prember-crawler
Pember-crawler 是一个能够将 Ember 应用程序的所有带有表单验证、表单存储或 Ajax 操作的动态或异步内容缓存为静态 HTML 页面，并且预加载大量的信息到渲染过程中的 Npm 包。它实现了网站的快速渲染和索引，同时提高了搜索引擎采集器的效率。
使用说明
安装 Prember-crawler
如果你还没有安装 Prember-crawler， 通过以下终端命令行来安装：
--- - ---------------
配置 Prember-crawler
安装完造价 prember-crawler 后，需要进行以下配置. 首先，在项目目录中创建一个名为“prember.js”的文件。这个文件导出一个配置函数，函数有两个参数: prember 和 options。此函数配置 Prember 的选项及属性， prember 是 Prember 的一个实例。
让我们来看一下 prember.js 的配置代码：
----- -- - --------------
-------------- - -------- --------- -
--------------- - -
------------- -----------------
--
------------------- - ----- -- -
-- ---- --- ---- -
------ --------------
-
------ --- - --------------
--
----------------------- - ------------- ----------- -
-- -------------------- -
--- -- ----
-
----- ---- - ----------------------- ---------- ---------
---------------------------- ---------------- ------ --------------------------------------------- - -- ------------------------------------------ ----------
------ -----
--
--------------------------- ------------ ----------------
--注意：在 Prember 中，应用程序的首页必须命名为“index.html”，它是生成静态 HTML 页面的入口。
该配置文件将 Prember 配置为将爬网站 URL “/”，“/about-us” 以及“/contact-us” 格式化为对应的 HTML 文件。
在 Prember 渲染每个页面的时候会用到“renderRouteSync”选项并且它返回了两个参数：url 和 outputPath。对于 renderRouteSync 的每个路由，Pember-crawler 会从 outputPath 中读取 HTML，并在处理完它们之后使用 fs.writeFileSync 将处理后的输出写回 outputPath。
预加载
本质来说，预加载是提前加载和渲染网站的部分内容，使得访问者在进入链接 (进行导航)时获得快速的体验。
在 Prember-crawler 中，可以在配置文件中使用 fs.readFileSync 和 fs.writeFileSync 函数来处理预加载。如上 Prember-renderRouteSync 示例代码，prember-crawler 设置了一个“data-preload”属性来提升性能。此属性告诉浏览器在当前页面资源加载完成后，该链接指向的下一个页面资源应当提前加载。
缓存
Prember-crawler 使得生成并缓存修复的 HTML 文档变得相当糖果般。
在 Prember-crawler 配置文件中可以修改如下的选项以实现缓存功能：
-------------------- - -------- --------------- - ----------------------
outputPrefix 表示缓存文件的前缀，baseURL 表示根目录的绝对URL。缓存文件遵循：${outputPrefix}/${baseURL}/${path}/index.html 的形式。
运行 Prember-crawler
在完成了 Prember-crawler 的配置之后，你可以使用以下命令行运行 Prember-crawler，并在终端查看生成的文件。
------- -- ----------- ---- ------ ------
请记住：此时 Prember-crawler 的输出将在静态服务器上运行，以便在浏览器中测试。
总结
在本文中，我们详细介绍了如何使用 Prember-crawler 来帮助我们优化前端应用程序的搜索引擎优化。 Prember-crawler 以其简单易用、高效、自动化为特点，帮助开发者生成静态页面，浏览器直接读取即可。在实际开发中，开发者可以根据需求的不同，自行组合预加载和缓存等选项，并加以细化优化来提高应用程序的性能和搜索排名。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5eedaa3fb5cbfe1ea06103eb