perf(http): reduce data transfer when using HTTP caching

This commit reduces the property size in the http transfer cache to reduce the page payload.

Before
```html
<script id="ng-state" type="application/json">
{
  "4155228514": {
    "body": "....",
    "headers": {},
    "status": 200,
    "statusText": "OK",
    "url": "http://foo.com/assets/media.json",
    "responseType": "json"
  },
}
</script>
```

Now
```html
<script id="ng-state" type="application/json">
{
  "4155228514": {
    "b": "....",
    "h": {},
    "s": 200,
    "st": "OK",
    "u": "http://foo.com/assets/media.json",
    "rt": "json"
  },
}
</script>
```

packages/common/http/src/transfer_cache.ts

@@ -36,12 +36,18 @@ export type HttpTransferCacheOptions = {
 };
 
 interface TransferHttpResponse {
-  body: any;
-  headers: Record<string, string[]>;
-  status?: number;
-  statusText?: string;
-  url?: string;
-  responseType?: HttpRequest<unknown>['responseType'];
+  /** body */
+  b: any;
+  /** headers */
+  h: Record<string, string[]>;
+  /** status */
+  s?: number;
+  /** statusText */
+  st?: string;
+  /** url */
+  u?: string;
+  /** responseType */
+  rt?: HttpRequest<unknown>['responseType'];
 }
 
 interface CacheOptions extends HttpTransferCacheOptions {
@@ -82,22 +88,24 @@ export function transferCacheInterceptorFn(
   }
 
   if (response) {
+    const {b: undecodedBody, rt: responseType, h: httpHeaders, s: status, st: statusText, u: url} =
+        response;
     // Request found in cache. Respond using it.
-    let body: ArrayBuffer|Blob|string|undefined = response.body;
+    let body: ArrayBuffer|Blob|string|undefined = undecodedBody;
 
-    switch (response.responseType) {
+    switch (responseType) {
       case 'arraybuffer':
-        body = new TextEncoder().encode(response.body).buffer;
+        body = new TextEncoder().encode(undecodedBody).buffer;
         break;
       case 'blob':
-        body = new Blob([response.body]);
+        body = new Blob([undecodedBody]);
         break;
     }
 
     // We want to warn users accessing a header provided from the cache
     // That HttpTransferCache alters the headers
     // The warning will be logged a single time by HttpHeaders instance
-    let headers = new HttpHeaders(response.headers);
+    let headers = new HttpHeaders(httpHeaders);
     if (typeof ngDevMode === 'undefined' || ngDevMode) {
       // Append extra logic in dev mode to produce a warning when a header
       // that was not transferred to the client is accessed in the code via `get`
@@ -110,9 +118,9 @@ export function transferCacheInterceptorFn(
         new HttpResponse({
           body,
           headers,
-          status: response.status,
-          statusText: response.statusText,
-          url: response.url,
+          status,
+          statusText,
+          url,
         }),
     );
   }
@@ -123,12 +131,12 @@ export function transferCacheInterceptorFn(
       tap((event: HttpEvent<unknown>) => {
         if (event instanceof HttpResponse) {
           transferState.set<TransferHttpResponse>(storeKey, {
-            body: event.body,
-            headers: getFilteredHeaders(event.headers, headersToInclude),
-            status: event.status,
-            statusText: event.statusText,
-            url: event.url || '',
-            responseType: req.responseType,
+            b: event.body,
+            h: getFilteredHeaders(event.headers, headersToInclude),
+            s: event.status,
+            st: event.statusText,
+            u: event.url || '',
+            rt: req.responseType,
           });
         }
       }),

packages/common/http/test/transfer_cache_spec.ts

@@ -84,7 +84,7 @@ describe('TransferCache', () => {
       makeRequestAndExpectOne('/test', 'foo');
       const key = makeStateKey('432906284');
       const transferState = TestBed.inject(TransferState);
-      expect(transferState.get(key, null)).toEqual(jasmine.objectContaining({body: 'foo'}));
+      expect(transferState.get(key, null)).toEqual(jasmine.objectContaining({b: 'foo'}));
     });
 
     it('should stop storing HTTP calls in `TransferState` after application becomes stable',
@@ -100,22 +100,8 @@ describe('TransferCache', () => {
 
          const transferState = TestBed.inject(TransferState);
          expect(JSON.parse(transferState.toJson()) as Record<string, unknown>).toEqual({
-           '3706062792': {
-             'body': 'foo',
-             'headers': {},
-             'status': 200,
-             'statusText': 'OK',
-             'url': '/test-1',
-             'responseType': 'json'
-           },
-           '3706062823': {
-             'body': 'buzz',
-             'headers': {},
-             'status': 200,
-             'statusText': 'OK',
-             'url': '/test-2',
-             'responseType': 'json'
-           }
+           '3706062792': {'b': 'foo', 'h': {}, 's': 200, 'st': 'OK', 'u': '/test-1', 'rt': 'json'},
+           '3706062823': {'b': 'buzz', 'h': {}, 's': 200, 'st': 'OK', 'u': '/test-2', 'rt': 'json'}
          });
        }));