perf(@angular-devkit/build-angular): load postcss-preset-env configuration once

JoostK · clydin · commit 640a74951572 · 2021-05-24T16:26:13.000-04:00
Loading the postcss-preset-env plugin includes building a mapping of unsupported
browsers by feature, which is somewhat expensive. In large compilations, this mapping
would be recomputed for each postcss-loader instance, as the plugin was recreated
for each loader invocation. By extracting the plugin instance outside of the dynamic
plugin computation, this overhead is avoided.
diff --git a/packages/angular_devkit/build_angular/src/webpack/configs/styles.ts b/packages/angular_devkit/build_angular/src/webpack/configs/styles.ts
@@ -158,6 +158,11 @@ export function getStylesConfig(wco: WebpackConfigOptions): webpack.Configuratio
   }
 
   const { supportedBrowsers } = new BuildBrowserFeatures(wco.projectRoot);
+  const postcssPresetEnvPlugin = postcssPresetEnv({
+    browsers: supportedBrowsers,
+    autoprefixer: true,
+    stage: 3,
+  });
   const postcssOptionsCreator = (inlineSourcemaps: boolean, extracted: boolean | undefined) => {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const optionGenerator = (loader: any) => ({
@@ -195,11 +200,7 @@ export function getStylesConfig(wco: WebpackConfigOptions): webpack.Configuratio
           extracted,
         }),
         ...extraPostcssPlugins,
-        postcssPresetEnv({
-          browsers: supportedBrowsers,
-          autoprefixer: true,
-          stage: 3,
-        }),
+        postcssPresetEnvPlugin,
       ],
     });
     // postcss-loader fails when trying to determine configuration files for data URIs
