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

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.

(cherry picked from commit 640a749)

Author: JoostK

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