feat(@angular-devkit/build-angular): add preload hints based on transitive initial files

When using the esbuild-based browser application builder, the pre-existing initial file
analysis is now used to generate preload hints for any transitive initial files required
by the application. These hints are generated for both the initial JavaScript chunks and
any initial global stylesheets that may be present. These hints provide additional
information to the browser so that it can start and better prioritize fetching of files
needed to start the application.

Author: clydin

packages/angular_devkit/build_angular/src/builders/browser-esbuild/index.ts

@@ -92,6 +92,7 @@ class ExecutionResult {
   }
 }
 
+// eslint-disable-next-line max-lines-per-function
 async function execute(
   options: NormalizedBrowserOptions,
   context: BuilderContext,
@@ -184,6 +185,24 @@ async function execute(
 
   // Generate index HTML file
   if (indexHtmlOptions) {
+    // Analyze metafile for initial link-based hints.
+    // Skip if the internal externalPackages option is enabled since this option requires
+    // dev server cooperation to properly resolve and fetch imports.
+    const hints = [];
+    if (!options.externalPackages) {
+      for (const [key, value] of initialFiles) {
+        if (value.entrypoint) {
+          // Entry points are already referenced in the HTML
+          continue;
+        }
+        if (value.type === 'script') {
+          hints.push({ url: key, mode: 'modulepreload' as const });
+        } else if (value.type === 'style') {
+          hints.push({ url: key, mode: 'preload' as const });
+        }
+      }
+    }
+
     // Create an index HTML generator that reads from the in-memory output files
     const indexHtmlGenerator = new IndexHtmlGenerator({
       indexPath: indexHtmlOptions.input,
@@ -215,6 +234,7 @@ async function execute(
         file,
         extension: path.extname(file),
       })),
+      hints,
     });
 
     for (const error of errors) {

packages/angular_devkit/build_angular/src/builders/browser-esbuild/tests/behavior/index-preload-hints_spec.ts

@@ -0,0 +1,37 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import { buildEsbuildBrowser } from '../../index';
+import { BASE_OPTIONS, BROWSER_BUILDER_INFO, describeBuilder } from '../setup';
+
+describeBuilder(buildEsbuildBrowser, BROWSER_BUILDER_INFO, (harness) => {
+  describe('Behavior: "Preload hints"', () => {
+    it('should add preload hints for transitive global style imports', async () => {
+      await harness.writeFile(
+        'src/styles.css',
+        `
+        @import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&family=Roboto:wght@300;400;500;700&display=swap');
+      `,
+      );
+
+      harness.useTarget('build', {
+        ...BASE_OPTIONS,
+        styles: ['src/styles.css'],
+      });
+
+      const { result } = await harness.executeOnce();
+      expect(result?.success).toBe(true);
+
+      harness
+        .expectFile('dist/index.html')
+        .content.toContain(
+          '<link rel="preload" href="https://fonts.googleapis.com/css2?family=Roboto+Mono&family=Roboto:wght@300;400;500;700&display=swap">',
+        );
+    });
+  });
+});