Add script to capture Webpack bundle analysis in CI

analyze.sh

@@ -0,0 +1,17 @@
+#!/usr/bin/env bash
+
+set -exuo pipefail
+
+ARTIFACT_DIR=${ARTIFACT_DIR:=/tmp/artifacts}
+
+# Run `yarn analyze` and save the report as artifacts in CI.
+
+pushd frontend
+yarn run analyze --no-open
+if [ -d "$ARTIFACT_DIR" ]; then
+ echo "Copying the Webpack Bundle Analyzer report to $ARTIFACT_DIR..."
+ cp public/dist/report.html "${ARTIFACT_DIR}"
+fi
+# Print chunk sizes, largest first.
+jq -r '.assets|sort_by(.size)|reverse|.[]|select(.name|test("js$"))|"\(.size/1024|ceil) KiB => \(.name)"' public/dist/stats.json
+popd

frontend/integration-tests/tests/performance.scenario.ts

@@ -1,9 +1,7 @@
 import { browser, ExpectedConditions as until } from 'protractor';
-import { writeFileSync } from 'fs';
-import * as path from 'path';
 import { OrderedMap } from 'immutable';
 
-import { appHost, screenshotsDir } from '../protractor.conf';
+import { appHost } from '../protractor.conf';
 import * as sidenavView from '../views/sidenav.view';
 import * as crudView from '../views/crud.view';
 import * as yamlView from '../views/yaml.view';
@@ -35,29 +33,6 @@ const chunkedRoutes = OrderedMap<string, { section: string; name: string }>()
  .set('operator-hub', { section: 'Operators', name: 'OperatorHub' });
 
 describe('Performance test', () => {
- it('checks bundle size using ResourceTiming API', async () => {
- const resources = await browser.executeScript<string[]>(() =>
- performance
- .getEntriesByType('resource')
- .filter(
- ({ name }) =>
- name.endsWith('.js') && name.indexOf('main') > -1 && name.indexOf('runtime') === -1,
- )
- .map(({ name, decodedBodySize }: PerformanceResourceTiming) => ({
- name: name.split('/').slice(-1)[0],
- size: Math.floor(decodedBodySize / 1024),
- }))
- .reduce((acc, val) => acc.concat(`${val.name.split('-')[0]}: ${val.size} KB, `), ''),
- );
-
- writeFileSync(
- path.resolve(__dirname, `../../${screenshotsDir}/bundle-analysis.txt`),
- resources,
- );
-
- expect(resources.length).not.toEqual(0);
- });
-
  it('downloads new bundle for YAML editor route', async () => {
  await browser.get(`${appHost}/k8s/ns/openshift-console/configmaps`);
  await crudView.isLoaded();