fix(@angular-devkit/build-angular): sort bundle stats by size

Before
```
Initial Chunk Files | Names     | Size
runtime.js          | runtime   | 6.15 kB
main.js             | main      | 56.9 kB
vendor.js           | vendor    | 2.4 MB
polyfills.js        | polyfills | 141 kB
styles.css          | styles    | 119 bytes
```

After
```
vendor.js           | vendor    | 2.07 MB
polyfills.js        | polyfills | 141 kB
main.js             | main      | 55.8 kB
runtime.js          | runtime   | 6.15 kB
styles.css          | styles    | 119 bytes
```

Author: alan-agius4

packages/angular_devkit/build_angular/src/webpack/utils/stats.ts

@@ -25,7 +25,7 @@ export function formatSize(size: number): string {
   return `${+(size / Math.pow(1024, index)).toPrecision(3)} ${abbreviations[index]}`;
 }
 
-export type BundleStatsData = [files: string, names: string, size: string];
+export type BundleStatsData = [files: string, names: string, size: number | string];
 
 export interface BundleStats {
   initial: boolean;
@@ -43,35 +43,36 @@ export function generateBundleStats(
   },
   colors: boolean,
 ): BundleStats {
-  const g = (x: string) => (colors ? ansiColors.greenBright(x) : x);
-  const c = (x: string) => (colors ? ansiColors.cyanBright(x) : x);
-
-  const size = typeof info.size === 'number' ? formatSize(info.size) : '-';
+  const size = typeof info.size === 'number' ? info.size : '-';
   const files = info.files.filter(f => !f.endsWith('.map')).map(f => path.basename(f)).join(', ');
   const names = info.names?.length ? info.names.join(', ') : '-';
   const initial = !!(info.entry || info.initial);
 
   return {
     initial,
-    stats: [g(files), names, c(size)],
+    stats: [files, names, size],
   }
 }
 
 function generateBuildStatsTable(data: BundleStats[], colors: boolean): string {
+  const g = (x: string) => colors ? ansiColors.greenBright(x) : x;
+  const c = (x: string) => colors ? ansiColors.cyanBright(x) : x;
+  const bold = (x: string) => colors ? ansiColors.bold(x) : x;
+  const dim = (x: string) => colors ? ansiColors.dim(x) : x;
+
   const changedEntryChunksStats: BundleStatsData[] = [];
   const changedLazyChunksStats: BundleStatsData[] = [];
+
   for (const { initial, stats } of data) {
-    if (initial) {
-      changedEntryChunksStats.push(stats);
-    } else {
-      changedLazyChunksStats.push(stats);
-    }
+    const [files, names, size] = stats;
+    (initial ? changedEntryChunksStats : changedLazyChunksStats).push([
+      g(files),
+      names,
+      c(typeof size === 'string' ? size : formatSize(size)),
+    ]);
   }
 
-  const bundleInfo: string[][] = [];
-
-  const bold = (x: string) => colors ? ansiColors.bold(x) : x;
-  const dim = (x: string) => colors ? ansiColors.dim(x) : x;
+  const bundleInfo: (string | number)[][] = [];
 
   // Entry chunks
   if (changedEntryChunksStats.length) {
@@ -124,6 +125,19 @@ function statsToString(json: any, statsConfig: any, bundleState?: BundleStats[])
     unchangedChunkNumber = json.chunks.length - changedChunksStats.length;
   }
 
+  // Sort chunks by size in descending order
+  changedChunksStats.sort((a, b) => {
+    if (a.stats[2] > b.stats[2]) {
+      return -1;
+    }
+    
+    if (a.stats[2] < b.stats[2]) {
+      return 1;
+    }
+
+    return 0;
+  });
+
   const statsTable = generateBuildStatsTable(changedChunksStats, colors);
 
   // In some cases we do things outside of webpack context