在前端开发中，SEO 是一个非常重要的问题。而在单页面应用 （SPA）中，由于它建立在 JavaScript 框架上，通常会导致搜索引擎无法正确地读取页面内容。这时候我们需要一种解决方案，使得搜索引擎可以正确抓取渲染出的内容，这就是 prerendering。
在 Ember.js 项目中，我们可以使用官方依赖的扩展 ember-cli-prerender 来实现 prerendering 的功能。
ember-cli-prerender 是什么？
ember-cli-prerender 是一个 Ember 插件，用于在构建应用时自动预渲染路由页，生成静态 HTML 文件，以便在搜索引擎爬取我们的站点时能够读取渲染出的内容。
安装和使用
安装
在项目目录中执行以下命令安装 ember-cli-prerender：
----- ------- -------------------
配置
- 打开
config/environment.js文件，在ENV变量下添加以下配置：
-- ------------ --- ------------- -
------------- - -
-------- -----
----- -
----
---------
-----------
-----------
-
-
-以上配置会告诉 ember-cli-prerender，只在生产环境下启用 prerender 功能；并且我们明确指定需要在预渲染过程中生成的路由页面。
如果你的项目使用了动态路由，你需要在这里声明所有可能的路由，比如 '/blogs/:id'。
- 将以下内容添加到
robots.txt文件中：
----------- - --------- ------------
上面的配置会告诉搜索引擎爬虫不要爬取 _prerender 目录。
生成
在生产环境下运行以下命令，将静态 HTML 文件生成到 _prerender 目录中：
----- ----- ------------------------
接下来，我们需要启动一个 HTTP 服务器并让其从 _prerender 目录中提供文件。最简单的方法就是使用 Node.js 自带的 http-server 模块。
在启动 HTTP 服务器前，我们需要先安装 http-server 模块，执行以下命令进行安装：
--- ------- -- -----------
安装完成后，在 _prerender 目录中执行以下命令，启动 HTTP 服务器：
-----------
启动成功后，在浏览器中访问 http://localhost:8080/，我们就可以看到我们的站点了。
深入理解
ember-cli-prerender 使用了 Google 开发的 Puppeteer 库来实现 prerendering。
在预渲染的途中，它通过启动一个虚拟的浏览器实例（Headless Chrome）来访问页面，将页面的 HTML 代码和渲染后的内容提取出来，并将其保存为 HTML 文件。
由于该过程中涉及到浏览器环境及网页渲染，为了保证预渲染的效率和质量，我们需要遵守以下几个约定：
- 避免在 Ember 路由上使用大量的计算属性和操作 DOM 元素的代码；
- 控制好每个页面的渲染时间；
- 在模板里使用
{{please-prerender}}Helper 标注渲染出的内容，以防止搜索引擎未能正确识别渲染出的内容。
示例
以下是一个使用 ember-cli-prerender 的实际例子。
- 安装依赖：
----- --- ------ -- ------ ----- ------- -------------------
- 构建预渲染页面
修改 config/environment.js 文件：
-- ------------ --- ------------- -
------------- - -
-------- -----
----- -
----
---------
----------
-
--
-在 app/templates/application.hbs 文件中添加：
----- --- ---- -------------------- ----- --- ----
- 生成预渲染文件
在生产环境下运行以下命令：
----- ----- ------------------------
- 启动预渲染服务
执行以下命令安装 http-server 模块：
--- ------- -- -----------
在 _prerender 目录中执行以下命令，启动 HTTP 服务器：
-----------
- 查看效果
在浏览器中访问 http://localhost:8080/，我们就可以看到我们的站点了。
总结
在实际项目中，预渲染技术不仅可以改善搜索引擎的爬虫效果，同时也可以提高站点访问速度和用户体验。
ember-cli-prerender 插件可以大大简化预渲染过程，让我们可以更加专注于前端开发。
以上是本文对 npm 包 ember-cli-prerender 的使用教程，希望能够帮助大家更好地了解 prerender 技术并使用 ember-cli-prerender 应用到实际项目中。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60057c4081e8991b448ebc5b