Angular Universal生产构建过程

Question

我正在使用Angular Universal 10，希望能够对我的网站进行预渲染。

我对生产环境下的适当构建过程感到困惑。

Angular提供这两个命令：

"build:ssr": "ng build --prod && ng run my-app.spa:server:production",
"prerender": "ng run my-app.spa:prerender"

只做这些就能得到生产就绪的输出吗？

npm run prerender

我需要同时运行这两个吗？

npm run build:ssr
npm run prerender

有什么不同之处？

- Eric Belisle Giddings

Answer 1

为了理解这两个命令之间的区别，请运行其中一个并查看编译输出。

第一个命令`npm run build:ssr`将编译您的网站成一个可以使用NodeJS Express应用程序提供服务的文件，就像您在`server.ts`中看到的那样。这样，您仍然只有一个index.html文件，但是根据您的路由，universal会向浏览器传递渲染的html文件。因此，您在服务器上进行渲染，即服务器端渲染。

第二个命令`npm run prerender`将使用`server.ts`来“预渲染”每个具有自己独立index.html文件的路由，所有这些文件都按照您的路由放置在目录结构中。编译后的代码看起来像传统的静态网站。因此，在部署之前进行渲染，即预渲染。

那么哪种最适合您呢？

`build:ssr`

优点： - 如果内容是动态创建的，您不需要重新部署 缺点： - 服务器必须始终运行可靠且快速的NodeJS进程。好消息是有很多方法可以做到这一点，例如无服务器函数、应用引擎等。

prerender

• 优点：您的应用可以托管在普通的http服务器上。
• 缺点：当添加新的内容页面时，您可能需要重新部署。

这篇Medium文章提供了更详细的信息和概述。

- Ben Bradshaw

---

那么 prerender 命令确实会构建一个生产就绪的输出，对吗？此外，如果页面没有预渲染，它仍将由 Universal 引擎提供服务吗？ - Eric Belisle Giddings

如果您的angular.json指定了生产构建，那么它将是一个生产构建。我认为prerender默认设置为prod。如果您查看从prerender编译的.html文件，您可能不会看到每个单独路由作为单独的文件。这没关系，这意味着您的一些路由是动态的，并且预渲染构建仍将通过SPA功能具有这些页面。 - Ben Bradshaw