Angular Universal(统一平台)笔记
|
angular官网高级文档AngularUniversal部分的翻译总结，这东西在angular4开始正式被官方支持了，目前其实支持的服务器端还没有很多，但好歹包括了node和DotNetCore，算是个进一步优化应用以及扩展需求(强化服务端能力)的方案。 正文开始： ------------------- 手动分割线 --------------------- 注意： 本文属于实验性质，可能会更改。 Angular 统一平台目录
一、概述Angular统一平台（Universal）是一项让angular应用运行在浏览器之外的技术。使用Universal你可以运行你的angular应用在一个基于node的服务器中，你可以用它来按需生成html输出或预先生成html文件。 如何工作angular统一平台通过编译app来让其能运行在服务器端，也可以是预先在服务器端编译好（AOT编译）。这跟传统的AOT不同因为应用是使用platform-server来编译而不是platform-browser。这一更改会让app有能力在服务端先渲染好HTML字符串而不是在浏览器端操作DOM。这样的app有一些限制。比如，它不能处理浏览器事件（比如鼠标或键盘输入，也不能发送ajax请求）。 一个已存在的叫做Preboof的工具可以记录浏览器事件以便能在整个angular应用加载完成时执行它们 本文中我们将使用webpack来创建一个AOT编译的app，然后将创建一个Universal服务器来构建这个app。 为何这么做有两个主要的原因： SEO / 无JavaScript你的高度互动的angular应用可能不会很容易被搜索引擎找到，你可以生成一个静态版本的app。这会让你的app更容易被搜索到，链接到以及导航到。同时能让搜索引擎或社交媒体可以提供网站预览快照这些能力。 启动性能应用的启动时间对留住用户来说很重要。尽管AOT编译能加快应用的启动时间，这还不是足够的，尤其是第网速下的手机设备。有53%的手机端访问会被放弃如果页面花费了超过三秒的时间来加载。你的应用必须加载快一点来留住用户防止他们想做点别的。使用angular Universal的话，你可以先生成一个基本界面就像是完整的应用。这个界面是个纯html界面，即使JS被禁用了也可以显示。这个界面不会处理浏览器事件，但是他们支持使用routeLink进行导航。推荐的方案是先服务一个用来着陆的静态版本的界面，你的angular应用就在它的后面，两者看起来十分接近，并且在应用完整加载时就能提供完整的交互体验。这肯定比让用户一直看着一个loading字样要好很多。 示例AOT与Universal版本的app都通过AOT编译器来编译。区别是AOT版本将编译好的打包文件发送到客户端，而Universal版本则是编译到一个服务端页面，渲染成实际界面后才发送到浏览器。AOT 版本的项目需要创建如下文件：
目录结构就像这样： 二、准备安装工具需要安装以下依赖：
组件相对路径服务端转换三、AOT配置普通的AOT加Webpack配置略过 四、AOT构建即 npm run build:aot将生成一个输出文件.js以及一个.js.map映射文件。 五、AOT服务端即写一个轻量服务器来监听请求： 可以使用 npm run serve:aot 来运行。 六、Universal配置现在你可以使用相似的方式来搭建Universal应用。 服务端代码包括： 1. app server模块2. Universal引擎3. web服务器差不多就是在express服务器上引导angular模块并渲染到index-aot.html，将页面返回给浏览器呈现。 七、构建与服务即使用npm run build:uni这些指令来构建，以及使用npm指令运行express服务器监听端口。 八、总结angular Universal可以极大的加快应用的启动速度与优化体验。网络越慢能得到的好处越大（首次加载）。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |