Angular应用prerender预渲染提高页面加载速度

Angular应用prerender配置

我们在某些 Angular 应用的 angular.json 文件里，能看到下面的代码：

prerender": {
          "builder": "@nguniversal/builders:prerender",
          "options": {
            "routes": ["/"]
          }
}

首先，让我们来理解上述代码的作用。这是一个在 angular.json 文件中定义的 prerender 配置，该配置是用于预渲染的设置。预渲染（Prerendering）是一种在服务端生成静态 HTML 页面的策略，这样在客户端首次加载时，可以立即显示出内容，而不需要等待 JavaScript 执行完毕。这可以提高页面的首屏加载速度，同时也有助于改善 SEO，因为搜索引擎可以直接解析静态 HTML 页面内容，而不需要执行 JavaScript。

重要部分解析

这段配置中有三个重要的部分：

• "builder"：指定了预渲染的构建器，这里使用的是 Angular Universal 提供的预渲染构建器 @nguniversal/builders:prerender。这个构建器的任务就是按照配置，生成静态 HTML 文件。
• "options"：这是预渲染的选项，提供了预渲染构建器需要的一些参数。
• "routes"：这是一个数组，指定了需要预渲染的路由列表。在这个例子中，只有一个元素：/，意味着只有根路径 / 需要被预渲染。

现在，让我们通过一个详细的例子来解释这段代码的作用。假设我们有一个 Angular 项目，它的根路径 / 对应的是首页，首页中有一些从服务器动态获取的内容，例如新闻列表。如果我们不使用预渲染，那么当用户访问首页时，浏览器首先需要下载和执行所有的 JavaScript 代码，然后 JavaScript 代码会向服务器发送请求获取新闻列表，然后再将新闻列表渲染到页面上。在这个过程中，用户需要等待一段时间才能看到新闻列表，这会影响用户体验，同时，搜索引擎也可能因为无法执行 JavaScript 而无法获取到新闻列表的内容。

为了解决这个问题，我们可以使用预渲染。通过预渲染，我们可以在服务器端先生成一个包含了新闻列表的静态 HTML 文件，然后当用户访问首页时，服务器直接返回这个静态 HTML 文件。这样，用户可以立即看到新闻列表，不需要等待 JavaScript 执行完毕。同时，搜索引擎也可以直接解析这个静态 HTML 文件，获取到新闻列表的内容。

添加配置

在这个例子中，我们可以在 angular.json 文件中添加以下配置：

`prerender`: {
  `builder`: `@nguniversal/builders:prerender`,
  `options`: {
    `routes`: [`/`]
  }
}

这样，当我们运行预渲染命令时，Angular Universal 的预渲染构建器会根据这个配置，生成一个包含了新闻列表的静态 HTML 文件。这个静态 HTML 文件会被保存在服务器上，当用户访问首页时，服务器就可以直接返回该静态页面。

以上就是Angular应用prerender机制使用讲解的详细内容，更多关于Angular应用prerender机制的资料请关注脚本之家其它相关文章！