perf(@angular-devkit/build-angular): only rebundle global scripts/styles on explicit changes

clydin · alan-agius4 · commit e68a662bc0e6 · 2023-10-26T12:59:19.000Z
The newly introduced incremental bundler result caching is now used for both global styles (`styles` option) and global scripts (`scripts` option). This allows the bundling steps to be skipped in watch mode when no related files for either have been modified. This can be especially beneficial for applications with large global stylesheets. (cherry picked from commit 4bc6deb)
diff --git a/packages/angular_devkit/build_angular/src/builders/application/execute-build.ts b/packages/angular_devkit/build_angular/src/builders/application/execute-build.ts
@@ -95,12 +95,7 @@ export async function executeBuild(
     // Global Stylesheets
     if (options.globalStyles.length > 0) {
       for (const initial of [true, false]) {
-        const bundleOptions = createGlobalStylesBundleOptions(
-          options,
-          target,
-          initial,
-          codeBundleCache?.loadResultCache,
-        );
+        const bundleOptions = createGlobalStylesBundleOptions(options, target, initial);
         if (bundleOptions) {
           bundlerContexts.push(
             new BundlerContext(workspaceRoot, !!options.watch, bundleOptions, () => initial),
@@ -154,7 +149,10 @@ export async function executeBuild(
     }
   }
 
-  const bundlingResult = await BundlerContext.bundleAll(bundlerContexts);
+  const bundlingResult = await BundlerContext.bundleAll(
+    bundlerContexts,
+    rebuildState?.fileChanges.all,
+  );
 
   // Log all warnings and errors generated during bundling
   await logMessages(context, bundlingResult);
diff --git a/packages/angular_devkit/build_angular/src/tools/esbuild/bundler-context.ts b/packages/angular_devkit/build_angular/src/tools/esbuild/bundler-context.ts
@@ -94,8 +94,19 @@ export class BundlerContext {
     };
   }
 
-  static async bundleAll(contexts: Iterable<BundlerContext>): Promise<BundleContextResult> {
-    const individualResults = await Promise.all([...contexts].map((context) => context.bundle()));
+  static async bundleAll(
+    contexts: Iterable<BundlerContext>,
+    changedFiles?: Iterable<string>,
+  ): Promise<BundleContextResult> {
+    const individualResults = await Promise.all(
+      [...contexts].map((context) => {
+        if (changedFiles) {
+          context.invalidate(changedFiles);
+        }
+
+        return context.bundle();
+      }),
+    );
 
     // Return directly if only one result
     if (individualResults.length === 1) {
diff --git a/packages/angular_devkit/build_angular/src/tools/esbuild/global-scripts.ts b/packages/angular_devkit/build_angular/src/tools/esbuild/global-scripts.ts
@@ -6,14 +6,14 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import type { BuildOptions } from 'esbuild';
 import MagicString, { Bundle } from 'magic-string';
 import assert from 'node:assert';
 import { readFile } from 'node:fs/promises';
 import path from 'node:path';
 import type { NormalizedApplicationBuildOptions } from '../../builders/application/options';
 import { assertIsError } from '../../utils/error';
-import { LoadResultCache, createCachedLoad } from './load-result-cache';
+import { BundlerOptionsFactory } from './bundler-context';
+import { createCachedLoad } from './load-result-cache';
 import { createSourcemapIgnorelistPlugin } from './sourcemap-ignorelist-plugin';
 import { createVirtualModulePlugin } from './virtual-module-plugin';
 
@@ -26,8 +26,7 @@ import { createVirtualModulePlugin } from './virtual-module-plugin';
 export function createGlobalScriptsBundleOptions(
   options: NormalizedApplicationBuildOptions,
   initial: boolean,
-  loadCache?: LoadResultCache,
-): BuildOptions | undefined {
+): BundlerOptionsFactory | undefined {
   const {
     globalScripts,
     optimizationOptions,
@@ -52,83 +51,86 @@ export function createGlobalScriptsBundleOptions(
     return;
   }
 
-  return {
-    absWorkingDir: workspaceRoot,
-    bundle: false,
-    splitting: false,
-    entryPoints,
-    entryNames: initial ? outputNames.bundles : '[name]',
-    assetNames: outputNames.media,
-    mainFields: ['script', 'browser', 'main'],
-    conditions: ['script'],
-    resolveExtensions: ['.mjs', '.js'],
-    logLevel: options.verbose ? 'debug' : 'silent',
-    metafile: true,
-    minify: optimizationOptions.scripts,
-    outdir: workspaceRoot,
-    sourcemap: sourcemapOptions.scripts && (sourcemapOptions.hidden ? 'external' : true),
-    write: false,
-    platform: 'neutral',
-    preserveSymlinks,
-    plugins: [
-      createSourcemapIgnorelistPlugin(),
-      createVirtualModulePlugin({
-        namespace,
-        external: true,
-        // Add the `js` extension here so that esbuild generates an output file with the extension
-        transformPath: (path) => path.slice(namespace.length + 1) + '.js',
-        loadContent: (args, build) =>
-          createCachedLoad(loadCache, async (args) => {
-            const files = globalScripts.find(({ name }) => name === args.path.slice(0, -3))?.files;
-            assert(files, `Invalid operation: global scripts name not found [${args.path}]`);
+  return (loadCache) => {
+    return {
+      absWorkingDir: workspaceRoot,
+      bundle: false,
+      splitting: false,
+      entryPoints,
+      entryNames: initial ? outputNames.bundles : '[name]',
+      assetNames: outputNames.media,
+      mainFields: ['script', 'browser', 'main'],
+      conditions: ['script'],
+      resolveExtensions: ['.mjs', '.js'],
+      logLevel: options.verbose ? 'debug' : 'silent',
+      metafile: true,
+      minify: optimizationOptions.scripts,
+      outdir: workspaceRoot,
+      sourcemap: sourcemapOptions.scripts && (sourcemapOptions.hidden ? 'external' : true),
+      write: false,
+      platform: 'neutral',
+      preserveSymlinks,
+      plugins: [
+        createSourcemapIgnorelistPlugin(),
+        createVirtualModulePlugin({
+          namespace,
+          external: true,
+          // Add the `js` extension here so that esbuild generates an output file with the extension
+          transformPath: (path) => path.slice(namespace.length + 1) + '.js',
+          loadContent: (args, build) =>
+            createCachedLoad(loadCache, async (args) => {
+              const files = globalScripts.find(({ name }) => name === args.path.slice(0, -3))
+                ?.files;
+              assert(files, `Invalid operation: global scripts name not found [${args.path}]`);
 
-            // Global scripts are concatenated using magic-string instead of bundled via esbuild.
-            const bundleContent = new Bundle();
-            const watchFiles = [];
-            for (const filename of files) {
-              let fileContent;
-              try {
-                // Attempt to read as a relative path from the workspace root
-                const fullPath = path.join(workspaceRoot, filename);
-                fileContent = await readFile(fullPath, 'utf-8');
-                watchFiles.push(fullPath);
-              } catch (e) {
-                assertIsError(e);
-                if (e.code !== 'ENOENT') {
-                  throw e;
-                }
+              // Global scripts are concatenated using magic-string instead of bundled via esbuild.
+              const bundleContent = new Bundle();
+              const watchFiles = [];
+              for (const filename of files) {
+                let fileContent;
+                try {
+                  // Attempt to read as a relative path from the workspace root
+                  const fullPath = path.join(workspaceRoot, filename);
+                  fileContent = await readFile(fullPath, 'utf-8');
+                  watchFiles.push(fullPath);
+                } catch (e) {
+                  assertIsError(e);
+                  if (e.code !== 'ENOENT') {
+                    throw e;
+                  }
 
-                // If not found, attempt to resolve as a module specifier
-                const resolveResult = await build.resolve(filename, {
-                  kind: 'entry-point',
-                  resolveDir: workspaceRoot,
-                });
+                  // If not found, attempt to resolve as a module specifier
+                  const resolveResult = await build.resolve(filename, {
+                    kind: 'entry-point',
+                    resolveDir: workspaceRoot,
+                  });
 
-                if (resolveResult.errors.length) {
-                  // Remove resolution failure notes about marking as external since it doesn't apply
-                  // to global scripts.
-                  resolveResult.errors.forEach((error) => (error.notes = []));
+                  if (resolveResult.errors.length) {
+                    // Remove resolution failure notes about marking as external since it doesn't apply
+                    // to global scripts.
+                    resolveResult.errors.forEach((error) => (error.notes = []));
 
-                  return {
-                    errors: resolveResult.errors,
-                    warnings: resolveResult.warnings,
-                  };
+                    return {
+                      errors: resolveResult.errors,
+                      warnings: resolveResult.warnings,
+                    };
+                  }
+
+                  watchFiles.push(resolveResult.path);
+                  fileContent = await readFile(resolveResult.path, 'utf-8');
                 }
 
-                watchFiles.push(resolveResult.path);
-                fileContent = await readFile(resolveResult.path, 'utf-8');
+                bundleContent.addSource(new MagicString(fileContent, { filename }));
               }
 
-              bundleContent.addSource(new MagicString(fileContent, { filename }));
-            }
-
-            return {
-              contents: bundleContent.toString(),
-              loader: 'js',
-              watchFiles,
-            };
-          }).call(build, args),
-      }),
-    ],
+              return {
+                contents: bundleContent.toString(),
+                loader: 'js',
+                watchFiles,
+              };
+            }).call(build, args),
+        }),
+      ],
+    };
   };
 }
diff --git a/packages/angular_devkit/build_angular/src/tools/esbuild/global-styles.ts b/packages/angular_devkit/build_angular/src/tools/esbuild/global-styles.ts
@@ -6,19 +6,17 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import type { BuildOptions } from 'esbuild';
 import assert from 'node:assert';
 import { NormalizedApplicationBuildOptions } from '../../builders/application/options';
-import { LoadResultCache } from './load-result-cache';
+import { BundlerOptionsFactory } from './bundler-context';
 import { createStylesheetBundleOptions } from './stylesheets/bundle-options';
 import { createVirtualModulePlugin } from './virtual-module-plugin';
 
 export function createGlobalStylesBundleOptions(
   options: NormalizedApplicationBuildOptions,
   target: string[],
   initial: boolean,
-  cache?: LoadResultCache,
-): BuildOptions | undefined {
+): BundlerOptionsFactory | undefined {
   const {
     workspaceRoot,
     optimizationOptions,
@@ -46,45 +44,47 @@ export function createGlobalStylesBundleOptions(
     return;
   }
 
-  const buildOptions = createStylesheetBundleOptions(
-    {
-      workspaceRoot,
-      optimization: !!optimizationOptions.styles.minify,
-      sourcemap: !!sourcemapOptions.styles,
-      preserveSymlinks,
-      target,
-      externalDependencies,
-      outputNames: initial
-        ? outputNames
-        : {
-            ...outputNames,
-            bundles: '[name]',
-          },
-      includePaths: stylePreprocessorOptions?.includePaths,
-      tailwindConfiguration,
-      publicPath: options.publicPath,
-    },
-    cache,
-  );
-  buildOptions.legalComments = options.extractLicenses ? 'none' : 'eof';
-  buildOptions.entryPoints = entryPoints;
+  return (loadCache) => {
+    const buildOptions = createStylesheetBundleOptions(
+      {
+        workspaceRoot,
+        optimization: !!optimizationOptions.styles.minify,
+        sourcemap: !!sourcemapOptions.styles,
+        preserveSymlinks,
+        target,
+        externalDependencies,
+        outputNames: initial
+          ? outputNames
+          : {
+              ...outputNames,
+              bundles: '[name]',
+            },
+        includePaths: stylePreprocessorOptions?.includePaths,
+        tailwindConfiguration,
+        publicPath: options.publicPath,
+      },
+      loadCache,
+    );
+    buildOptions.legalComments = options.extractLicenses ? 'none' : 'eof';
+    buildOptions.entryPoints = entryPoints;
 
-  buildOptions.plugins.unshift(
-    createVirtualModulePlugin({
-      namespace,
-      transformPath: (path) => path.split(';', 2)[1],
-      loadContent: (args) => {
-        const files = globalStyles.find(({ name }) => name === args.path)?.files;
-        assert(files, `global style name should always be found [${args.path}]`);
+    buildOptions.plugins.unshift(
+      createVirtualModulePlugin({
+        namespace,
+        transformPath: (path) => path.split(';', 2)[1],
+        loadContent: (args) => {
+          const files = globalStyles.find(({ name }) => name === args.path)?.files;
+          assert(files, `global style name should always be found [${args.path}]`);
 
-        return {
-          contents: files.map((file) => `@import '${file.replace(/\\/g, '/')}';`).join('\n'),
-          loader: 'css',
-          resolveDir: workspaceRoot,
-        };
-      },
-    }),
-  );
+          return {
+            contents: files.map((file) => `@import '${file.replace(/\\/g, '/')}';`).join('\n'),
+            loader: 'css',
+            resolveDir: workspaceRoot,
+          };
+        },
+      }),
+    );
 
-  return buildOptions;
+    return buildOptions;
+  };
 }
diff --git a/packages/angular_devkit/build_angular/src/tools/esbuild/watcher.ts b/packages/angular_devkit/build_angular/src/tools/esbuild/watcher.ts
@@ -13,6 +13,10 @@ export class ChangedFiles {
   readonly modified = new Set<string>();
   readonly removed = new Set<string>();
 
+  get all(): string[] {
+    return [...this.added, ...this.modified, ...this.removed];
+  }
+
   toDebugString(): string {
     const content = {
       added: Array.from(this.added),
