[kbn/optimizer] report sizes of assets produced by optimizer (elastic…

…#71319)

* Revert "Report page load asset size (elastic#66224)"

This reverts commit 6f57fa0.

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

* coalese the fast-glob versions we're using to prevent additional installs

* update kbn/pm dist

* Revert "update kbn/pm dist"

This reverts commit 68e24f0.

* Revert "coalese the fast-glob versions we're using to prevent additional installs"

This reverts commit 4201fb6.

* remove fast-glob, just recursivly call readdirSync()

* update integration tests to use new chunk filename

Co-authored-by: spalger <[email protected]>
Co-authored-by: Elastic Machine <[email protected]>
# Conflicts:
#	packages/kbn-optimizer/src/integration_tests/basic_optimization.test.ts
#	yarn.lock

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/src/integration_tests/basic_optimization.test.ts

@@ -220,8 +220,8 @@ it('prepares assets for distribution', async () => {
 
   expectFileMatchesSnapshotWithCompression('plugins/foo/target/public/foo.plugin.js', 'foo bundle');
   expectFileMatchesSnapshotWithCompression(
-    'plugins/foo/target/public/1.plugin.js',
-    '1 async bundle'
+    'plugins/foo/target/public/foo.chunk.1.js',
+    'foo async bundle'
   );
   expectFileMatchesSnapshotWithCompression('plugins/bar/target/public/bar.plugin.js', 'bar bundle');
 });

packages/kbn-optimizer/src/report_optimizer_stats.ts

@@ -17,13 +17,42 @@
  * under the License.
  */
 
+import Fs from 'fs';
+import Path from 'path';
+
 import { materialize, mergeMap, dematerialize } from 'rxjs/operators';
 import { CiStatsReporter } from '@kbn/dev-utils';
 
 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), []);
+
+interface Entry {
+  relPath: string;
+  stats: Fs.Stats;
+}
+
+const getFiles = (dir: string, parent?: string) =>
+  flatten(
+    Fs.readdirSync(dir).map((name): Entry | Entry[] => {
+      const absPath = Path.join(dir, name);
+      const relPath = parent ? Path.join(parent, name) : name;
+      const stats = Fs.statSync(absPath);
+
+      if (stats.isDirectory()) {
+        return getFiles(absPath, relPath);
+      }
+
+      return {
+        relPath,
+        stats,
+      };
+    })
+  );
+
 export function reportOptimizerStats(reporter: CiStatsReporter, config: OptimizerConfig) {
   return pipeClosure((update$: OptimizerUpdate$) => {
     let lastState: OptimizerState | undefined;
@@ -36,16 +65,55 @@ 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 = getFiles(bundle.outputDir).filter(
+                  (file) => !(file.relPath.startsWith('.') || file.relPath.endsWith('.map'))
+                );
+
+                const entryName = `${bundle.id}.${bundle.type}.js`;
+                const entry = outputFiles.find((f) => f.relPath === 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.relPath.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

@@ -50,7 +50,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

@@ -53,4 +53,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';