使用入门:优化 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,可以在本地安装并使用 npx 命令来运行它:

npm i @angular/cli
npx ng --version

创建项目

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

ng new my-app

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

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

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 审核无障碍功能