-
Deploy on multiple env with GitHub Actions
This article is going to introduce: Deploy on multiple environment with GitHub Actons Add reviewers approve a workflow deploying Reuse workflowPrerequisites Azure subscription, Resource Group and App Service Public GitHub repoDeploy on multip...…
-
Deploy to Azure with GitHub Actions
This article is going to introduce how to deploy an Angular Web application to Azure App Service with GitHub Actions, and how to manual trigger GitHub workflow with workflow_dispatch.Prerequisites Azure subscription, Resource Group and App Servic...…
-
Angular:深入了解NgRx的优势
最近在项目组里做了一个 session 分享怎么用 NgRx，以及 NgRx 的优势是什么。大家反馈很不错，写篇文章记录下这次的分享内容。在这篇文件里会介绍以下内容： 什么是 NgRx 结合 Demo 代码，介绍 NgRX 的基本用法 从函数编程的角度来看，NgRx 的优势是什么什么是NgRxNgRx 是 state management library，是一个状态管理包，你也可以理解它是 RxJS 和 Redux 的结合体。在真正开始解释什么是 NgRx 以及它的用法，先来看一个很...…
-
Angular：Ivy
最近做了个 Angular 升级项目，从 Angular8 升级到 Angular12，做这个升级的时候，发现 Angular9 默认使用了 Ivy 模板引擎 和 AOT 编译方式。升级项目结束以后，花时间看了下 Ivy 的相关介绍，写篇文章记录下学习成果吧。在这篇文章中会介绍以下内容： 什么是 Ivy Angular 引入 Ivy 以后，编译机制有哪些改变 什么是 ngcc Ivy 对性能的影响什么是 Ivy我们在写 Angular 项目的时候，比如创建一个 component，...…
-
Angular：性能优化清单
性能优化主要是从两方面入手，一个是网络性能，另一个是页面渲染。在具体介绍性能优化方式之前，先来解释下为什么网络性能和页面渲染会影响性能。在这里讨论的网络带宽的性能问题都是基于 HTTP/1.X，在 HTTP/2 中很多性能问题都解决了。在 HTTP/1.X 连接有三种方式：短连接，长连接和 HTTP 流水线。短连接是 HTTP/1.0 的默认模型，它每发一个请求时都会创建见一个新的 TCP 连接，收到 response 的时候就立马关闭连接，每次创建一个 TCP 连接都相当耗费资源，可想而...…
-
Angular：深入理解Angular编译机制
在这篇文章中会介绍以下内容： 为什么 Angular 需要编译。 Angular 编译机制：JiT vs AoT。 AoT 的工作原理（ngc）。 AoT 对性能的影响。这篇文件是基于 Angular8，这个版本的 Angular 的模板引擎还是 View Engine（Angular4 ~ Angular8 模板引擎是 View Engine），这篇文章的编译机制也是基于模板引擎 View Engine，也就是说这篇文章的编译机制适用于 Angular4 ~ Angular8。A...…
-
RxJS：如何用 RxJS 实现高效的 HTTP 请求
在项目中，经常会碰到这样的需求：用户在输入框输入数据，需要实时调用后端 API，拿到结果显示在页面上。如果用传统方式一般实现方式是在输入框上绑定一个 keydown 或者 keyup 事件，然后每次输入值以后都调用一次后端 API，拿到返回数据。这样会有一个问题，比如我输入’limei’，l li lim lime limei这五次 keydown/keyup 分别会调用一次 API。这五个 API有五个 Response，我最后想要’limei’的结果，由于这五个 API 的 respo...…
-
Angular性能优化：Tree Shaking
在这篇文章中会介绍以下内容： 什么是 Tree Shaking，以及它对性能的影响。 如何让 Angular(6.0+) 的 Service 实现 Tree Shaking。 在 webpack4 的项目中，怎么实现 Tree Shaking。 在文章【Angular：如何在Angular(8.0)中配置Webpack】提到了 Angular 内置的编译打包方式会执行 Tree Shaking，可以提高 Angular 应用的性能。那我们先看下什么是...…
-
Angular：如何在 Angular(8.0) 中配置 Webpack
在文章【Angular：如何用Angular(<6.0)和Webpack搭建项目】中介绍了如果在 Angular 项目中想要自己配置 webpack，那么必须用命令‘ng eject’把 Angular 内置的 webpack.config 文件暴露出来，然后根据项目需求自己重写整个 webpack.config 文件。但是 Angular6.0 以上的版本，Angular 官方去掉‘ng eject’这个命令。那么 Angular6.0+ 项目中，想要根据项目需求添加或者更改 we...…
-
RxJS：所有订阅都需要调用 unsubscribe 取消订阅？
最开始用 RxJS 的时候，看官方文档对 Subscription 的介绍如下：What is a Subscription? A Subscription is an object that represents a disposable resource, usually the execution of an Observable. A Subscription has one important method,unsubscribe, that takes no argument ...…