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

Jenkinsfile

@@ -42,7 +42,6 @@ kibanaPipeline(timeoutMinutes: 155, checkPrChanges: true, setCommitStatus: true)
             'xpack-ciGroup10': kibanaPipeline.xpackCiGroupProcess(10),
             'xpack-accessibility': kibanaPipeline.functionalTestProcess('xpack-accessibility', './test/scripts/jenkins_xpack_accessibility.sh'),
             'xpack-savedObjectsFieldMetrics': kibanaPipeline.functionalTestProcess('xpack-savedObjectsFieldMetrics', './test/scripts/jenkins_xpack_saved_objects_field_metrics.sh'),
-            // 'xpack-pageLoadMetrics': kibanaPipeline.functionalTestProcess('xpack-pageLoadMetrics', './test/scripts/jenkins_xpack_page_load_metrics.sh'),
             'xpack-securitySolutionCypress': { processNumber ->
               whenChanged(['x-pack/plugins/security_solution/', 'x-pack/test/security_solution_cypress/']) {
                 kibanaPipeline.functionalTestProcess('xpack-securitySolutionCypress', './test/scripts/jenkins_security_solution_cypress.sh')(processNumber)

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,

packages/kbn-test/package.json

@@ -16,7 +16,6 @@
     "@types/joi": "^13.4.2",
     "@types/lodash": "^4.14.155",
     "@types/parse-link-header": "^1.0.0",
-    "@types/puppeteer": "^3.0.0",
     "@types/strip-ansi": "^5.2.1",
     "@types/xml2js": "^0.4.5",
     "diff": "^4.0.1"
@@ -31,7 +30,6 @@
     "joi": "^13.5.2",
     "lodash": "^4.17.15",
     "parse-link-header": "^1.0.1",
-    "puppeteer": "^3.3.0",
     "rxjs": "^6.5.5",
     "strip-ansi": "^5.2.0",
     "tar-fs": "^1.16.3",

packages/kbn-test/src/index.ts

@@ -60,4 +60,3 @@ export { makeJunitReportPath } from './junit_report_path';
 export { CI_PARALLEL_PROCESS_PREFIX } from './ci_parallel_process_prefix';
 
 export * from './functional_test_runner';
-export * from './page_load_metrics';