npm 包 ember-cli-prerender 使用教程-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，SEO 是一个非常重要的问题。而在单页面应用（SPA）中，由于它建立在 JavaScript 框架上，通常会导致搜索引擎无法正确地读取页面内容。这时候我们需要一种解决方案，使得搜索引擎可以正确抓取渲染出的内容，这就是 prerendering。

在 Ember.js 项目中，我们可以使用官方依赖的扩展 ember-cli-prerender 来实现 prerendering 的功能。

ember-cli-prerender 是什么？

ember-cli-prerender 是一个 Ember 插件，用于在构建应用时自动预渲染路由页，生成静态 HTML 文件，以便在搜索引擎爬取我们的站点时能够读取渲染出的内容。

安装和使用

安装

在项目目录中执行以下命令安装 ember-cli-prerender：

ember install ember-cli-prerender

配置

打开 config/environment.js 文件，在 ENV 变量下添加以下配置：

-- -------------------- ---- -------
-- ------------ --- ------------- -
    ------------- - -
        -------- -----
        ----- -
            ----
            ---------
            -----------
            -----------
        -
    -
-

以上配置会告诉 ember-cli-prerender，只在生产环境下启用 prerender 功能；并且我们明确指定需要在预渲染过程中生成的路由页面。

如果你的项目使用了动态路由，你需要在这里声明所有可能的路由，比如 '/blogs/:id'。

将以下内容添加到 robots.txt 文件中：

User-agent: *
Disallow: /_prerender/

上面的配置会告诉搜索引擎爬虫不要爬取 _prerender 目录。

生成

在生产环境下运行以下命令，将静态 HTML 文件生成到 _prerender 目录中：

ember build --environment=production

接下来，我们需要启动一个 HTTP 服务器并让其从 _prerender 目录中提供文件。最简单的方法就是使用 Node.js 自带的 http-server 模块。

在启动 HTTP 服务器前，我们需要先安装 http-server 模块，执行以下命令进行安装：

npm install -g http-server

安装完成后，在 _prerender 目录中执行以下命令，启动 HTTP 服务器：

http-server

启动成功后，在浏览器中访问 http://localhost:8080/，我们就可以看到我们的站点了。

深入理解

ember-cli-prerender 使用了 Google 开发的 Puppeteer 库来实现 prerendering。

在预渲染的途中，它通过启动一个虚拟的浏览器实例（Headless Chrome）来访问页面，将页面的 HTML 代码和渲染后的内容提取出来，并将其保存为 HTML 文件。

由于该过程中涉及到浏览器环境及网页渲染，为了保证预渲染的效率和质量，我们需要遵守以下几个约定：

避免在 Ember 路由上使用大量的计算属性和操作 DOM 元素的代码；
控制好每个页面的渲染时间；
在模板里使用 {{please-prerender}} Helper 标注渲染出的内容，以防止搜索引擎未能正确识别渲染出的内容。

示例

以下是一个使用 ember-cli-prerender 的实际例子。

安装依赖：

ember new my-app
cd my-app
ember install ember-cli-prerender

构建预渲染页面

修改 config/environment.js 文件：

-- -------------------- ---- -------
-- ------------ --- ------------- -
    ------------- - -
        -------- -----
        ----- -
            ----
            ---------
            ----------
        -
    --
-

在 app/templates/application.hbs 文件中添加：

{{!-- ... --}}

{{please-prerender}}

{{!-- ... --}}

生成预渲染文件

在生产环境下运行以下命令：

ember build --environment=production

启动预渲染服务

执行以下命令安装 http-server 模块：

npm install -g http-server

在 _prerender 目录中执行以下命令，启动 HTTP 服务器：

http-server

查看效果

在浏览器中访问 http://localhost:8080/，我们就可以看到我们的站点了。

总结

在实际项目中，预渲染技术不仅可以改善搜索引擎的爬虫效果，同时也可以提高站点访问速度和用户体验。

ember-cli-prerender 插件可以大大简化预渲染过程，让我们可以更加专注于前端开发。

以上是本文对 npm 包 ember-cli-prerender 的使用教程，希望能够帮助大家更好地了解 prerender 技术并使用 ember-cli-prerender 应用到实际项目中。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/60057c4081e8991b448ebc5b