×

Angular Universal(统一平台)笔记

96
Yitimo
2017.04.24 15:40* 字数 1429

angular官网高级文档AngularUniversal部分的翻译总结,这东西在angular4开始正式被官方支持了,目前其实支持的服务器端还没有很多,但好歹包括了node和DotNetCore,算是个进一步优化应用以及扩展需求(强化服务端能力)的方案。

正文开始:

------------------- 手动分割线 ---------------------

注意: 本文属于实验性质,可能会更改。

Angular 统一平台

目录

  • 概述
  • 如何工作
  • 为何这么做
    • SEO / 无JavaScript
    • 启动性能
  • 例子
  • 准备
  • 安装工具
  • 相对组件的URL
  • 服务端转换
  • AOT配置
  • 主入口
  • 创建teconfig-aot.json
  • webpack配置
    • 加载器
    • 插件
    • 输入
    • 输出
  • AOT构建
  • 源映射
  • AOT服务端
  • 统一平台配置
  • 服务端代码
    • 应用服务器模块
    • Universal引擎
    • Web服务器
  • 创建tsconfig-uni.json
  • 创建webpack.config.uni.js
    • 入口
    • 输出文件
  • Universal的构建与服务
  • 运行
    • 禁用客户端App
    • 节流
  • 总结

概述

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 版本的项目需要创建如下文件:

  • index-aot.html文件
  • 主入口文件 main-aot.ts
  • TS的配置文件 tsconfig-aot.json
  • webpack配置文件 webpack.config.aot.js
  • 轻量级的服务端配置文件 bs-config.aot.js
    Universal版本的应用需要创建如下文件:
  • 服务端app模块 app.server.ts
  • Universal渲染器 universal-engine.ts
  • 一个node的expressweb服务器来处理请求 server-aot.ts
  • TS配置文件 teconfig-uni.json
  • webpack配置文件 webpack.config.uni.js

目录结构就像这样:

目录结构

准备

安装工具

需要安装以下依赖:

  • npm install @angular/compiler-cli @angular/platform-server --save-dev
  • npm install webpack @ngtools/webpack raw-loader express --save-dev

组件相对路径

AOT下的组件路径

服务端转换

AppModule的更改

AOT配置

普通的AOT加Webpack配置略过

AOT构建

即 npm run build:aot
将生成一个输出文件.js以及一个.js.map映射文件。

AOT服务端

即写一个轻量服务器来监听请求:

bs-config.aot.js

可以使用 npm run serve:aot 来运行。

Universal配置

现在你可以使用相似的方式来搭建Universal应用。

服务端代码

包括:

1. app server模块

app.server.ts

2. Universal引擎

universal-engine.ts

3. web服务器

server-aot.ts(1)
server-aot.ts(2)

差不多就是在express服务器上引导angular模块并渲染到index-aot.html,将页面返回给浏览器呈现。

构建与服务

即使用npm run build:uni这些指令来构建,以及使用npm指令运行express服务器监听端口。

总结

angular Universal可以极大的加快应用的启动速度与优化体验。网络越慢能得到的好处越大(首次加载)。

Front End
Web note ad 1