refactor(@angular-devkit/build-angular): optimize analytics plugin bu…

…ndle stats for Webpack 5

Newer Webpack 5 APIs allow the bundle stat generation for analytics to be optimized including less iteration of chunks and assets.

packages/angular_devkit/build_angular/src/webpack/plugins/analytics.ts

@@ -183,47 +183,44 @@ export class NgBuildAnalyticsPlugin {
   }
 
   protected _collectBundleStats(compilation: compilation.Compilation) {
-    // `compilation.chunks` is a Set in Webpack 5
-    const chunks = Array.from(compilation.chunks);
-
-    chunks
-      .filter((chunk: { rendered?: boolean }) => chunk.rendered)
-      .forEach((chunk: { files: string[]; canBeInitial(): boolean }) => {
-        const asset = compilation.assets[chunk.files[0]];
-        const size = asset ? asset.size() : 0;
-
-        if (chunk.canBeInitial()) {
-          this._stats.initialChunkSize += size;
-        } else {
-          this._stats.lazyChunkCount++;
-          this._stats.lazyChunkSize += size;
-        }
-        this._stats.totalChunkCount++;
-        this._stats.totalChunkSize += size;
-      });
-
-    Object.entries<{ size(): number }>(compilation.assets)
-      // Filter out chunks. We only count assets that are not JS.
-      .filter(([name]) => {
-        return chunks.every((chunk: { files: string[] }) => chunk.files[0] != name);
-      })
-      .forEach(([, asset]) => {
-        this._stats.assetSize += asset.size();
-        this._stats.assetCount++;
-      });
-
-    for (const [name, asset] of Object.entries<{ size(): number }>(compilation.assets)) {
-      if (name == 'polyfill') {
-        this._stats.polyfillSize += asset.size();
-      }
-    }
+    const chunkAssets = new Set<string>();
     for (const chunk of compilation.chunks) {
-      if (chunk.files[0] && chunk.files[0].endsWith('.css')) {
-        const asset = compilation.assets[chunk.files[0]];
-        const size = asset ? asset.size() : 0;
+      if (!chunk.rendered) {
+        continue;
+      }
+
+      const firstFile = Array.from(chunk.files)[0];
+      const size = compilation.getAsset(firstFile)?.source.size() ?? 0;
+      chunkAssets.add(firstFile);
+
+      if (chunk.canBeInitial()) {
+        this._stats.initialChunkSize += size;
+      } else {
+        this._stats.lazyChunkCount++;
+        this._stats.lazyChunkSize += size;
+      }
+
+      this._stats.totalChunkCount++;
+      this._stats.totalChunkSize += size;
+
+      if (firstFile.endsWith('.css')) {
         this._stats.cssSize += size;
       }
     }
+
+    for (const asset of compilation.getAssets()) {
+      // Only count non-JavaScript related files
+      if (chunkAssets.has(asset.name)) {
+        continue;
+      }
+
+      this._stats.assetSize += asset.source.size();
+      this._stats.assetCount++;
+
+      if (asset.name == 'polyfill') {
+        this._stats.polyfillSize += asset.source.size();
+      }
+    }
   }
 
   /************************************************************************************************