[kbn/optimizer] report sizes of assets produced by optimizer

Author: spalger

packages/kbn-optimizer/package.json

@@ -29,6 +29,7 @@
     "css-loader": "^3.4.2",
     "del": "^5.1.0",
     "execa": "^4.0.2",
+    "fast-glob": "^3.2.4",
     "file-loader": "^4.2.0",
     "istanbul-instrumenter-loader": "^3.0.1",
     "jest-diff": "^25.5.0",

packages/kbn-optimizer/src/report_optimizer_stats.ts

@@ -17,13 +17,19 @@
  * under the License.
  */
 
+import { Stats } from 'fs';
+
 import { materialize, mergeMap, dematerialize } from 'rxjs/operators';
 import { CiStatsReporter } from '@kbn/dev-utils';
+import fastGlob, { Entry } from 'fast-glob';
 
 import { OptimizerUpdate$ } from './run_optimizer';
 import { OptimizerState, OptimizerConfig } from './optimizer';
 import { pipeClosure } from './common';
 
+const flatten = <T>(arr: Array<T | T[]>): T[] =>
+  arr.reduce((acc: T[], item) => acc.concat(item), []);
+
 export function reportOptimizerStats(reporter: CiStatsReporter, config: OptimizerConfig) {
   return pipeClosure((update$: OptimizerUpdate$) => {
     let lastState: OptimizerState | undefined;
@@ -36,16 +42,60 @@ export function reportOptimizerStats(reporter: CiStatsReporter, config: Optimize
 
         if (n.kind === 'C' && lastState) {
           await reporter.metrics(
-            config.bundles.map((bundle) => {
-              // make the cache read from the cache file since it was likely updated by the worker
-              bundle.cache.refresh();
-
-              return {
-                group: `@kbn/optimizer bundle module count`,
-                id: bundle.id,
-                value: bundle.cache.getModuleCount() || 0,
-              };
-            })
+            flatten(
+              config.bundles.map((bundle) => {
+                // make the cache read from the cache file since it was likely updated by the worker
+                bundle.cache.refresh();
+
+                const outputFiles = fastGlob.sync('**/*', {
+                  cwd: bundle.outputDir,
+                  onlyFiles: true,
+                  unique: true,
+                  stats: true,
+                  absolute: false,
+                  ignore: ['!**/*.map'],
+                });
+
+                const entryName = `${bundle.id}.${bundle.type}.js`;
+                const entry = outputFiles.find((f) => f.path === entryName);
+                if (!entry) {
+                  throw new Error(
+                    `Unable to find bundle entry named [${entryName}] in [${bundle.outputDir}]`
+                  );
+                }
+
+                const chunkPrefix = `${bundle.id}.chunk.`;
+                const asyncChunks = outputFiles.filter((f) => f.path.startsWith(chunkPrefix));
+                const miscFiles = outputFiles.filter(
+                  (f) => f !== entry && !asyncChunks.includes(f)
+                );
+                const sumSize = (files: Entry[]) =>
+                  files.reduce((acc: number, f) => acc + f.stats!.size, 0);
+
+                return [
+                  {
+                    group: `@kbn/optimizer bundle module count`,
+                    id: bundle.id,
+                    value: bundle.cache.getModuleCount() || 0,
+                  },
+                  {
+                    group: `page load bundle size`,
+                    id: bundle.id,
+                    value: entry.stats!.size,
+                  },
+                  {
+                    group: `async chunks size`,
+                    id: bundle.id,
+                    value: sumSize(asyncChunks),
+                  },
+                  {
+                    group: `miscellaneous assets size`,
+                    id: bundle.id,
+                    value: sumSize(miscFiles),
+                  },
+                ];
+              })
+            )
           );
         }
 

packages/kbn-optimizer/src/worker/webpack.config.ts

@@ -52,7 +52,8 @@ export function getWebpackConfig(bundle: Bundle, bundleRefs: BundleRefs, worker:
 
     output: {
       path: bundle.outputDir,
-      filename: `[name].${bundle.type}.js`,
+      filename: `${bundle.id}.${bundle.type}.js`,
+      chunkFilename: `${bundle.id}.chunk.[id].js`,
       devtoolModuleFilenameTemplate: (info) =>
         `/${bundle.type}:${bundle.id}/${Path.relative(
           bundle.sourceRoot,

yarn.lock

@@ -14403,6 +14403,18 @@ fast-glob@^3.0.3, fast-glob@^3.1.1, fast-glob@^3.2.2:
     micromatch "^4.0.2"
     picomatch "^2.2.1"
 
+fast-glob@^3.2.4:
+  version "3.2.4"
+  resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.4.tgz#d20aefbf99579383e7f3cc66529158c9b98554d3"
+  integrity sha512-kr/Oo6PX51265qeuCYsyGypiO5uJFgBS0jksyG7FUeCyQzNwYnzrNIMR1NXfkZXsMYXYLRAHgISHBz8gQcxKHQ==
+  dependencies:
+    "@nodelib/fs.stat" "^2.0.2"
+    "@nodelib/fs.walk" "^1.2.3"
+    glob-parent "^5.1.0"
+    merge2 "^1.3.0"
+    micromatch "^4.0.2"
+    picomatch "^2.2.1"
+
 fast-json-stable-stringify@^2.0.0, fast-json-stable-stringify@~2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz#874bf69c6f404c2b5d99c481341399fd55892633"
@@ -27324,6 +27336,13 @@ rimraf@^2.5.4, rimraf@^2.7.1:
   dependencies:
     glob "^7.1.3"
 
+rimraf@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-3.0.2.tgz#f1a5402ba6220ad52cc1282bac1ae3aa49fd061a"
+  integrity sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==
+  dependencies:
+    glob "^7.1.3"
+
 rimraf@~2.0.2:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.0.3.tgz#f50a2965e7144e9afd998982f15df706730f56a9"