开始使用:优化 Angular 应用

想让您的 Angular 网站尽可能快速且易于访问吗?您来对地方了!

什么是 Angular?

Angular 是一个用于构建用户界面的框架。它提供了构建块,可帮助您快速设置可维护、可扩展的应用程序。Angular 使开发者能够创建可在 Web、移动设备或桌面设备上运行的应用程序。

本合集中包含哪些内容?

本合集侧重于优化 Angular 应用程序的五个主要领域:

  • 提高应用程序的 性能 ,以增加用户转化率和互动
  • 通过使用 Angular Service Worker 预缓存资源来提高应用程序在弱网络上的 可靠性
  • 使用预渲染和服务器端渲染使您的应用程序更容易被搜索引擎和社交媒体机器人 发现
  • 使您的应用程序 可安装,以提供类似于 iOS/Android 应用的用户体验

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

本合集中包含哪些内容?

本合集假设您已经熟悉 Angular 和 TypeScript。如果您对它们还不熟悉,请查看 TypeScript 文档 以及 Angular 入门 指南(位于 angular.io 上)。

启动项目

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

此命令将为您的应用程序创建初始文件和文件夹结构,并安装它需要的 node 模块。

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

cd my-app
ng serve

现在您应该能够通过 https://127.0.0.1:4200 访问您的应用程序。

下一步是什么?

在本合集的其余部分,您将学习如何提高 Angular 应用程序的性能和 SEO。以下是涵盖的内容:

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