-
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...…
-
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 ...…
-
Angular性能优化：Tree Shaking
在这篇文章中会介绍以下内容： 什么是 Tree Shaking，以及它对性能的影响。 如何让 Angular(6.0+) 的 Service 实现 Tree Shaking。 在 webpack4 的项目中，怎么实现 Tree Shaking。 在文章【Angular：如何在Angular(8.0)中配置Webpack】提到了 Angular 内置的编译打包方式会执行 Tree Shaking，可以提高 Angular 应用的性能。那我们先看下什么是...…
-
RxJS：如何通过 RxJS 实现简单的消息通知机制
在上一篇文章【RxJS：如何通过RxJS实现缓存】里介绍了如何在 Anuglar2+ 中结合 HttpClient 和 ReplaySubject 缓存 API Response 数据，减少重复调用 API 从而提高性能，这种方法适用于每次返回的 Response 数据都不变的常量 API。在实际开发过程中，还有一种 API 返回的值随着时间会有变化，这个时候就需要去更新 RxJS缓存里的值，从用户体检的角度出发，先在页面显示一个消息通知用户数据有更新，让用户选择是否需要更新页面内容，而不...…
-
RxJS：如何通过 RxJS 实现缓存
在这篇文章中会介绍以下内容： Angular 中通过 HttpClient 执行 Http Request 返回的 Observables 是 Cold Observable。 HttpClient Observable 每次被订阅都需要调用 http request，对于公用的 API 返回同样的值，在不同页面重复调用会浪费 http 资源降低性能。 如何通过 ReplaySubject 实现缓存效果，提高性能。 HttpClient 返回的 Ob...…
-
RxJS：四种 Subject 的用法和区别
在 RxJS 中有四种 Subject 分别是：Subject，BehaviorSubject，AsyncSubject，ReplaySubject；这四种 Subject 都是特殊的 Observable。在介绍它们之前，我们先来看下这四种 Subject 与普通 Observable 的区别： Observable Subject BehaviorSubject AsyncSubject ReplaySubject ...…