使用入门:优化 Angular 应用

想要尽可能提高 Angular 网站的速度并提升其易用性?您来对地方了!

什么是 Angular?

Angular 是一个用于构建界面的框架。它提供了构建块,可帮助您快速设置可维护且可扩缩的应用。Angular 让开发者能够创建适用于 Web、移动设备或桌面设备的应用。

此集合中包含什么?

此集合重点介绍了优化 Angular 应用的五个主要方面:

  • 提高应用的性能,从而提高用户转化次数和互动度
  • 使用 Angular Service Worker 预缓存资源,提高应用在网络状况不佳时的可靠性
  • 使用预渲染和服务器端渲染,让搜索引擎和社交媒体漫游器发现您的应用
  • 使应用可安装,以提供与 iOS/Android 应用类似的用户体验
  • 改进应用的无障碍功能,使其可供所有用户使用和理解

该合集中的每篇文章都将介绍可直接应用于您自己的应用的技术。

此合集中包含哪些内容?

本集合假定您已熟悉 Angular 和 TypeScript。如果您对这些方面还不太确定,请查看 TypeScript 文档angular.io 上的 Angular 使用入门指南。

开始项目

借助 Angular 命令行界面 (CLI),您可以快速设置简单的客户端 Angular 应用。本文简要介绍了该 CLI,而该系列中的其他文章则介绍了如何添加服务器端渲染和部署支持等更高级的功能。

设置 CLI

首先,请运行以下命令全局安装 CLI,并验证您使用的是最新版本:

npm i -g @angular/cli
ng --version

确保最后一个命令输出 8.0.3 或更高版本。

或者,如果您不想在全球范围内安装该 CLI,也可以在本地安装该 CLI,并使用 npx 命令运行该 CLI:

npm i @angular/cli
npx ng --version

创建项目

如需创建新项目,请运行以下命令:

ng new my-app

此命令将为您的应用创建初始文件和文件夹结构,并安装其所需的 Node 模块。

设置过程成功完成后,请运行以下命令来启动您的应用:

cd my-app
ng serve

现在,您应该能够通过 http://localhost:4200 访问您的应用。

后续操作

在此集合的其余部分,您将了解如何改进 Angular 应用的性能、无障碍功能和搜索引擎优化 (SEO)。以下是本课程涵盖的内容:

  • Angular 中的路线级代码拆分
  • 使用 Angular CLI 计算性能预算
  • Angular 中的路由预提取策略
  • Angular 中的更改检测优化
  • 使用 Angular CDK 虚拟化大型列表
  • 使用 Angular Service Worker 预缓存
  • 使用 Angular CLI 预渲染路由
  • 使用 Angular Universal 进行服务器端渲染
  • 使用 Angular CLI 添加 Web 应用清单
  • 使用 Codelyzer 进行无障碍功能审核