Angular 预渲染实践

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了Angular 预渲染实践，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含4296字，纯文字阅读大概需要7分钟。

内容图文

预渲染理解
客户端在接收html文件之前，服务端将html标签占位做动态数据填充；服务端处理好一个html字符串文件生成一个静态的html页面文件返回给客户端，客户端即会解析html，渲染呈现出UI/UX；

特性：
1、访问加载速度比其它任意方式几乎都快；
2、利于搜索引擎抓取，方便网站SEO
3、单个静态页只分配特定的路由
4、不用执行Javascript
5、chrome中访问后，当前页右键【查看网页源代码】，对应页面内容都可在源代码中查看
6、资源只单次渲染，无任何异步加载


为深入了解，我们以prerender项目为步骤实例，从框架搭建到打包发布；

一、构建生成Angular工程环境
首先参照Angular中文文档 搭建环境 指南，生成一个Angular项目，
 
 Angular?CLI?工具[/color]搭建你的 Angular 开发环境；
此环境下的ng项目只可打包发布成异步请求下的静态资源，只需要往某个服务中一丢即可直接访问；
例如 放到 nginx中html目录下，或放到IIS服务指定网站目录下。
一般类型的管理类网站通常采用这种做法，重心点在于使用操作管理上；


二、生成Angular服务端渲染工程

*步骤一完成后，请一定要先  yarn install ，将依赖包安装；

在服务端渲染指南中，我们参照指南执行命令
 ng add @nguniversal/express-engine 
执行完该命令后，项目结构中会多了几个有关于服务端渲染的文件与配置，在此不做比
对以及文件细节说明；指南中有做详细讲解；

 左侧工程目录结构为服务端渲染
SSR简单理解即为组件或页面通过服务器生成html字符串，再发送到浏览器，客户端解析html；

预渲染构建方式与SSR构建方式到目前为止都基本保持一样；

预渲染生成的html，也需要通过node后台服务进行加工处理；最明显的区别为：
SSR是本在客户端渲染的过程由服务端代为处理了，然后由服务端渲染完成返回渲染后的页面(html字符串),
预渲染是服务端未有任何渲染，直接返回完整的html页面；


三、预渲染配置与构建
在当前PreRender项目工程中，打开 angular.json  配置文件，在文件中找到 prerender构建器，会发现有一个 “routes“ 配置项，如下图所示：
./angular.json

在红色框中配置不同的路由，当构建时也将会打出各路由下的html文件包；
如果要渲染生成非常多的静态页面，可以去掉 “routes” 配置项，使用 “routeFile” 配置项，该配置项可配置一个相对url路径，在url所指向的文件(js/txt/json…)中配置的路由都是打包构建的预定义路由，配置如下图所示：
./pre-routes.txt

 
./angular.json


以上配置OK，我们来打包运行，执行命令： yarn prerender 
在打包构建成功后我们可以看到执行结果信息，如下图所示：

在结果信息中我们可以看到生成了三个不同的html文件，分别对应于所配置的访问路由路径；接下来打开dist目录，如下图所示：

可以一一找到配置所打包的各html。
在 ./dist/app/browser/ 目录是我们打好的静态资源文件，可以直接访问不同的html，从而显示不同的界面效果；
下面我们启动node服务，该服务所在目录为 ./dist/app/server/ ,执行命令：
yarn serve:ssr 

Tip：也可将browser下的所有资源放到nginx/apache/IIS/tomcat... 进行访问
另外 .Net Core引擎也可以在服务器上跑Angular的应用，进行服务端渲染，该特性由ng团队在.net core上做的集成

 
四、访问分析预渲染页面
在node服务启动好之后，在浏览器中访问 http://localhost:4000
 右键源码中查看，如下图所示：

 
红色框中内容是直接获取而来，非异步加载访问插入；


预渲染参照如下流程图：

 
注解：
1、 服务端存放了打包好的静态资源与文件（./dist/browser下的所有文件）。
2、 浏览器解析渲染返回的html内容。
3、 打包好的bundle.js / chunk.js 

五、不需要的预渲染情况
1、生成针对特定路由的静态HTML 文件，可以是一个项目工程，也可以是一个CDN服务；所以预渲染不适合动态路由的页面项目；
2、如果页面中有动态的操作，以及频繁的数据变动，就不得不经常升级/发布页面，对运维以及开发维护不友好；不建议使用预渲染
3、Pre-render几乎涵盖了SSR的所有优点，但如果是一个复杂操作功能的项目，且还有N多个页面，那么预渲染在开发维护阶段将会变得异常艰难，因为它生成的是一个个对应的html页面，即有N多个路由，所以在它开发构建之时编译将会变得异常缓慢；

PreRender项目是一个对外推广实时活动页面，需要SEO，同时项目需求页少，无任何复杂交互逻辑，所以预渲染方案是它的首选；


总结
PreRender采用预渲染的方案最大的利处在两方面：
1、 网页访问速度极快！
2、 非常利于SEO引擎；已被百度与Google收录，如下图：


快照生成时间为19号发布后的第二天早晨

相关关键字 （编译构建时对于预渲染或ssr的错误排查）

预 (ahead-of-time, AOT) 编译
Angular 的预先（AOT）编译器可以在编译期间把 Angular 的 HTML 代码和 TypeScript 代码转换成高效的 JavaScript 代码，这样浏览器就可以直接下载并运行它们。 对于产品环境，这是最好的编译模式，相对于即时?(JIT)?编译而言，它能减小加载时间，并提高性能。
使用命令行工具 ngc 来编译你的应用之后，就可以直接启动一个模块工厂，这意味着你不必再在 JavaScript 打包文件中包含 Angular 编译器。

PreRender在Github样例地址

ngcc
Angular 兼容性编译器。如果使用 Ivy 构建应用程序，但依赖未用 Ivy 编译的库，则 CLI 将使用 ngcc 自动更新依赖库以使用 Ivy。

内容总结

以上是互联网集市为您收集整理的Angular 预渲染实践全部内容，希望文章能够帮你解决Angular 预渲染实践所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---