perf(@angular-devkit/build-angular): reduce CLI loading times by remo…

…ving critters from critical path Critters has a number of large deps like postcss which slow down the Angular CLI loading times. (cherry picked from commit 57fef7b)
angular · Oct 18, 2023 · 49fe74e · 49fe74e
1 parent 3e5a99c
commit 49fe74e
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 12 deletions.
diff --git a/packages/angular_devkit/build_angular/src/builders/app-shell/index.ts b/packages/angular_devkit/build_angular/src/builders/app-shell/index.ts
@@ -18,7 +18,7 @@ import * as path from 'path';
 import Piscina from 'piscina';
 import { normalizeOptimization } from '../../utils';
 import { assertIsError } from '../../utils/error';
-import { InlineCriticalCssProcessor } from '../../utils/index-file/inline-critical-css';
+import type { InlineCriticalCssProcessor } from '../../utils/index-file/inline-critical-css';
 import { augmentAppWithServiceWorker } from '../../utils/service-worker';
 import { Spinner } from '../../utils/spinner';
 import { BrowserBuilderOutput } from '../browser';
@@ -56,12 +56,16 @@ async function _renderUniversal(
   const projectRoot = path.join(root, (projectMetadata.root as string | undefined) ?? '');
 
   const { styles } = normalizeOptimization(browserOptions.optimization);
-  const inlineCriticalCssProcessor = styles.inlineCritical
-    ? new InlineCriticalCssProcessor({
-        minify: styles.minify,
-        deployUrl: browserOptions.deployUrl,
-      })
-    : undefined;
+  let inlineCriticalCssProcessor: InlineCriticalCssProcessor | undefined;
+  if (styles.inlineCritical) {
+    const { InlineCriticalCssProcessor } = await import(
+      '../../utils/index-file/inline-critical-css'
+    );
+    inlineCriticalCssProcessor = new InlineCriticalCssProcessor({
+      minify: styles.minify,
+      deployUrl: browserOptions.deployUrl,
+    });
+  }
 
   const renderWorker = new Piscina({
     filename: require.resolve('./render-worker'),

diff --git a/packages/angular_devkit/build_angular/src/builders/prerender/render-worker.ts b/packages/angular_devkit/build_angular/src/builders/prerender/render-worker.ts
@@ -12,7 +12,6 @@ import assert from 'node:assert';
 import * as fs from 'node:fs';
 import * as path from 'node:path';
 import { workerData } from 'node:worker_threads';
-import { InlineCriticalCssProcessor } from '../../utils/index-file/inline-critical-css';
 
 export interface RenderOptions {
   indexFile: string;
@@ -122,6 +121,10 @@ async function render({
   }
 
   if (inlineCriticalCss) {
+    const { InlineCriticalCssProcessor } = await import(
+      '../../utils/index-file/inline-critical-css'
+    );
+
     const inlineCriticalCssProcessor = new InlineCriticalCssProcessor({
       deployUrl: deployUrl,
       minify: minifyCss,

diff --git a/packages/angular_devkit/build_angular/src/tools/esbuild/index-html-generator.ts b/packages/angular_devkit/build_angular/src/tools/esbuild/index-html-generator.ts
@@ -10,7 +10,6 @@ import assert from 'node:assert';
 import path from 'node:path';
 import { NormalizedApplicationBuildOptions } from '../../builders/application/options';
 import { IndexHtmlGenerator } from '../../utils/index-file/index-html-generator';
-import { InlineCriticalCssProcessor } from '../../utils/index-file/inline-critical-css';
 import { BuildOutputFile, BuildOutputFileType, InitialFileRecord } from './bundler-context';
 
 export async function generateIndexHtml(
@@ -107,6 +106,8 @@ export async function generateIndexHtml(
     };
   }
 
+  const { InlineCriticalCssProcessor } = await import('../../utils/index-file/inline-critical-css');
+
   const inlineCriticalCssProcessor = new InlineCriticalCssProcessor({
     minify: false, // CSS has already been minified during the build.
     readAsset,

diff --git a/packages/angular_devkit/build_angular/src/utils/index-file/inline-critical-css.ts b/packages/angular_devkit/build_angular/src/utils/index-file/inline-critical-css.ts
@@ -6,10 +6,9 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import Critters from 'critters';
 import { readFile } from 'node:fs/promises';
 
-const Critters: typeof import('critters').default = require('critters');
-
 /**
  * Pattern used to extract the media query set by Critters in an `onload` handler.
  */

diff --git a/packages/angular_devkit/build_angular/src/utils/server-rendering/render-page.ts b/packages/angular_devkit/build_angular/src/utils/server-rendering/render-page.ts
@@ -8,7 +8,6 @@
 
 import type { ApplicationRef, StaticProvider } from '@angular/core';
 import { basename } from 'node:path';
-import { InlineCriticalCssProcessor } from '../index-file/inline-critical-css';
 import { loadEsmModule } from '../load-esm';
 import { MainServerBundleExports } from './main-bundle-exports';
 
@@ -94,6 +93,10 @@ export async function renderPage({
   }
 
   if (inlineCriticalCss) {
+    const { InlineCriticalCssProcessor } = await import(
+      '../../utils/index-file/inline-critical-css'
+    );
+
     const inlineCriticalCssProcessor = new InlineCriticalCssProcessor({
       minify: false, // CSS has already been minified during the build.
       readAsset: async (filePath) => {