refactor(common): prevent duplicating Content-Type header (angular#59518)

Drops some bytes by moving `Content-Type` into a variable, which is then minified to something like `var b="Content-Type"` and reused in all the places.

PR Close angular#59518

Author: arturovt

packages/common/http/src/fetch.ts

@@ -11,7 +11,7 @@ import {Observable, Observer} from 'rxjs';
 
 import {HttpBackend} from './backend';
 import {HttpHeaders} from './headers';
-import {ACCEPT_HEADER, HttpRequest, X_REQUEST_URL_HEADER} from './request';
+import {ACCEPT_HEADER, CONTENT_TYPE_HEADER, HttpRequest, X_REQUEST_URL_HEADER} from './request';
 import {
   HTTP_STATUS_CODE_OK,
   HttpDownloadProgressEvent,
@@ -174,7 +174,7 @@ export class FetchBackend implements HttpBackend {
       // Combine all chunks.
       const chunksAll = this.concatChunks(chunks, receivedLength);
       try {
-        const contentType = response.headers.get('Content-Type') ?? '';
+        const contentType = response.headers.get(CONTENT_TYPE_HEADER) ?? '';
         body = this.parseBody(request, chunksAll, contentType);
       } catch (error) {
         // Body loading or parsing failed
@@ -263,11 +263,11 @@ export class FetchBackend implements HttpBackend {
     }
 
     // Auto-detect the Content-Type header if one isn't present already.
-    if (!req.headers.has('Content-Type')) {
+    if (!req.headers.has(CONTENT_TYPE_HEADER)) {
       const detectedType = req.detectContentTypeHeader();
       // Sometimes Content-Type detection fails.
       if (detectedType !== null) {
-        headers['Content-Type'] = detectedType;
+        headers[CONTENT_TYPE_HEADER] = detectedType;
       }
     }
 

packages/common/http/src/request.ts

@@ -77,6 +77,13 @@ function isUrlSearchParams(value: any): value is URLSearchParams {
   return typeof URLSearchParams !== 'undefined' && value instanceof URLSearchParams;
 }
 
+/**
+ * `Content-Type` is an HTTP header used to indicate the media type
+ * (also known as MIME type) of the resource being sent to the client
+ * or received from the server.
+ */
+export const CONTENT_TYPE_HEADER = 'Content-Type';
+
 /**
  * `X-Request-URL` is a custom HTTP header used in older browser versions,
  * including Firefox (< 32), Chrome (< 37), Safari (< 8), and Internet Explorer,

packages/common/http/src/xhr.ts

@@ -14,7 +14,7 @@ import {switchMap} from 'rxjs/operators';
 import {HttpBackend} from './backend';
 import {RuntimeErrorCode} from './errors';
 import {HttpHeaders} from './headers';
-import {ACCEPT_HEADER, HttpRequest, X_REQUEST_URL_HEADER} from './request';
+import {ACCEPT_HEADER, CONTENT_TYPE_HEADER, HttpRequest, X_REQUEST_URL_HEADER} from './request';
 import {
   HTTP_STATUS_CODE_NO_CONTENT,
   HTTP_STATUS_CODE_OK,
@@ -102,11 +102,11 @@ export class HttpXhrBackend implements HttpBackend {
           }
 
           // Auto-detect the Content-Type header if one isn't present already.
-          if (!req.headers.has('Content-Type')) {
+          if (!req.headers.has(CONTENT_TYPE_HEADER)) {
             const detectedType = req.detectContentTypeHeader();
             // Sometimes Content-Type detection fails.
             if (detectedType !== null) {
-              xhr.setRequestHeader('Content-Type', detectedType);
+              xhr.setRequestHeader(CONTENT_TYPE_HEADER, detectedType);
             }
           }