Angular应用预渲染（Prerender）配置详解
在Angular项目的angular.json配置文件中，时常会见到如下预渲染配置块：
prerender": {
"builder": "@nguniversal/builders:prerender",
"options": {
"routes": ["/"]
}
}
这段配置的核心作用是什么呢？简单来说，它定义了一个预渲染（Prerendering）任务。在深入了解细节之前，我们先理解预渲染的初衷：它能在服务端构建阶段提前生成静态HTML页面，用户访问时直接呈现内容，无需等待JavaScript完全执行。这一机制带来两大直接优势——首屏加载速度显著提升，搜索引擎也能直接抓取完整内容，对SEO优化极为有利。
核心配置项解析
逐一拆解，三个核心字段如下：
"builder"：指定所使用的构建器。此处为Angular Universal官方提供的预渲染构建器@nguniversal/builders:prerender，负责根据配置生成静态HTML文件。"options"：传递给构建器的参数配置对象。"routes"：一个数组，列出需要预渲染的路由路径。示例中仅包含根路径/，表示仅对首页执行预渲染。
通过一个具体场景可以更好地理解这段配置的作用。假设你的Angular项目首页展示了一个新闻列表，数据通过后端接口动态获取。未启用预渲染时，访问流程如下：用户请求首页 → 浏览器下载所有JavaScript → 执行JS → 发起请求获取新闻数据 → 渲染页面。用户需要等待较长时间，搜索引擎也可能因无法执行JS而遗漏内容。
预渲染则将这一过程提前：在构建阶段，构建器模拟浏览器环境，预先为首页生成包含新闻列表数据的静态HTML文件并保存至服务器。用户访问时，服务器直接返回该HTML，内容即时可见，搜索引擎也能顺利解析。效果立竿见影。
如何配置预渲染
因此，在angular.json中添加上述配置后，运行预渲染命令，Angular Universal的构建器便会为根路径生成一份包含新闻列表的静态HTML文件。部署到服务器后，用户访问首页时获得的就是这份静态页面，访问体验大幅提升。
`prerender`: {
`builder`: `@nguniversal/builders:prerender`,
`options`: {
`routes`: [`/`]
}
}
以上就是Angular应用预渲染（Prerender）机制的核心用法。配置虽简单，却体现了服务端渲染与静态化策略的精妙结合，值得在实际项目中尝试应用。
