feat: performance benchmarking

.gitignore

@@ -14,6 +14,8 @@ coverage
 oom_1
 **/__diff_output__/**
 tests/__reports__/*.html
+lighthouse
+.lighthouseci
 
 # OS generated files #
 ######################

README.md

@@ -38,44 +38,55 @@ npm start
 
 ## Scripts
 
-- `build`
-    - runs [semantic-release/assets.sh](./scripts/semantic-release/assets.sh) to build assets for all environments in `dist/`
+-   `build`
 
-- `build:<env>` where `<env>` is `stage`, `sandbox`, or `production`
-    - runs webpack with `NODE_ENV=<env>`
+    -   runs [semantic-release/assets.sh](./scripts/semantic-release/assets.sh) to build assets for all environments in `dist/`
 
-- `build:analyze`
-    - runs [webpack-bundle-analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer) in static gzip mode
+-   `build:<env>` where `<env>` is `stage`, `sandbox`, or `production`
 
-- `build:demo`
-    - runs webpack with `env.demo` set
+    -   runs webpack with `NODE_ENV=<env>`
 
-- `dev`
-    - runs webpack-dev-server with `TARGET=sdk`, `NODE_ENV=local`, `STAGE_TAG=local`
+-   `build:analyze`
 
-- `dev:<target>` where `<target>` is `standalone`, `modal`, or `lander`
-    - runs webpack-dev-server with `TARGET=<target>`, `NODE_ENV=local`, `STAGE_TAG=local`
-    - note: `modal` uses `TARGET=standalone-modal`
+    -   runs [webpack-bundle-analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer) in static gzip mode
 
-- `dev:<env>` where `<env>` is `stage`, `sandbox`, or `production`
-    - runs webpack-dev-server with `TARGET=standalone` and `NODE_ENV=<env>`
+-   `build:demo`
 
-- `lint`
-    - checks our codebase for style issues
+    -   runs webpack with `env.demo` set
 
-- `preinstall`
-    - runs automatically on `npm install` and removes `node_modules/`
+-   `dev`
 
-- `start`
-    - runs `npm run dev`
+    -   runs webpack-dev-server with `TARGET=sdk`, `NODE_ENV=local`, `STAGE_TAG=local`
 
-- `test`
-    - runs all unit tests
+-   `dev:<target>` where `<target>` is `standalone`, `modal`, or `lander`
 
-- `test:<type>` where `<type>` is `func`, `func:nosnaps` or `func:ciupdate`
-    - `func` runs all snapshot functional tests
-    - `func:nosnaps` runs all non-snapshot functional tests
-    - `func:ciupdate` updates all snapshots generated by functional tests
+    -   runs webpack-dev-server with `TARGET=<target>`, `NODE_ENV=local`, `STAGE_TAG=local`
+    -   note: `modal` uses `TARGET=standalone-modal`
+
+-   `dev:<env>` where `<env>` is `stage`, `sandbox`, or `production`
+
+    -   runs webpack-dev-server with `TARGET=standalone` and `NODE_ENV=<env>`
+
+-   `lint`
+
+    -   checks our codebase for style issues
+
+-   `preinstall`
+
+    -   runs automatically on `npm install` and removes `node_modules/`
+
+-   `start`
+
+    -   runs `npm run dev`
+
+-   `test`
+
+    -   runs all unit tests
+
+-   `test:<type>` where `<type>` is `func`, `func:nosnaps` or `func:ciupdate`
+    -   `func` runs all snapshot functional tests
+    -   `func:nosnaps` runs all non-snapshot functional tests
+    -   `func:ciupdate` updates all snapshots generated by functional tests
 
 ## Testing
 
@@ -95,12 +106,16 @@ Example
 CONFIG_PATH=US/DEV_US_MULTI npm run test:func:snapshots -- --testPathPattern sdk
 ```
 
-Alternatively, you can remove ` -- --testPathPattern {integrationType}` and just run the following to run tests on an account for all integration types.
+Alternatively, you can remove `-- --testPathPattern {integrationType}` and just run the following to run tests on an account for all integration types.
 
 ```
 CONFIG_PATH={locale}/{account} npm run test:func:snapshots
 ```
 
+## Performance Benchmark
+
+To run performance benchmark, first run `npm run dev:standalone` in one command line instance and `npm run benchmark` in a second command line instance. The `dev:standalone` command creates static pages that the functional tests are run on. To use lighthouse benchmarking install the lighthouse cli via `npm install -g @lhci/cli`. Prior to running benchmark run `LIGHTHOUSE_URL={URL_WITH_NO_BRACKETS} lhci autorun --config=./tools/performance/config/lighthouserc-desktop.js` and `LIGHTHOUSE_URL={URL_WITH_NO_BRACKETS} lhci autorun --config=./tools/performance/config/lighthouserc-mobile.js`
+
 ## Releasing
 
 This package is published weekly, **Every Wednesday**. Please [view our Changelog](CHANGELOG.md) to stay updated with bug fixes and new features.

package.json

@@ -22,6 +22,8 @@
         "build:sandbox": "webpack --env.NODE_ENV=sandbox",
         "build:production": "webpack --env.NODE_ENV=production",
         "build:analyze": "webpack --env.analyze",
+        "build:analyzeComponents": "webpack --env.analyzeComponents",
+        "build:analyzeMComponents": "webpack --env.analyzeMessageComponents",
         "build:demo": "webpack --env.demo",
         "dev": "webpack-dev-server --config webpack.config.dev.js --env.TARGET=sdk --env.NODE_ENV=local --env.STAGE_TAG=local",
         "dev:ci": "webpack-dev-server --config webpack.config.dev.js --env.TARGET=ci --env.NODE_ENV=local --env.STAGE_TAG=local",

tools/performance/compile.js

@@ -0,0 +1,60 @@
+const fs = require('fs');
+
+const { getComponentHtml } = require(`./components.js`);
+const { createLighthouseHtml } = require(`./lighthouse.js`);
+const { createMetricsHtml } = require(`./metrics.js`);
+const basePath = process.cwd();
+
+/**
+ * Write html to file
+ * @param {string} html - html
+ */
+const writeHtmlToFile = html =>
+    fs.writeFile(`${basePath}/dist/performanceData${new Date().toISOString()}.html`, html, err => {
+        if (err) {
+            console.log('Error occured when writting performanceData.html');
+        } else {
+            console.log('performanceData.html created');
+        }
+    });
+
+/**
+ * Take data and create html string
+ * @param {object} data - contains all variables needed for final document
+ * @returns {string} - html
+ */
+const html = data => `<html>
+    <head>
+        <title>Performance Benchmark</title>
+        <style>
+            td:first-of-type {
+                min-width: 250px; 
+                max-width:500px; 
+                overflow: auto;
+                padding-right: 1rem;
+            }
+            td {
+                padding: 0.25rem 0.45rem; 
+                word-wrap: break-word;
+            }
+        </style>
+    </head>
+    <body>
+        <div>${new Date().toDateString()}</div>
+        ${createLighthouseHtml(data)}
+        ${getComponentHtml(data)}
+        ${createMetricsHtml(data)}
+    </body>
+</html>`;
+
+try {
+    const htmlJsonData = {
+        ...JSON.parse(fs.readFileSync(`${basePath}/dist/lighthouseScores.json`)),
+        ...JSON.parse(fs.readFileSync(`${basePath}/dist/components.json`)),
+        ...JSON.parse(fs.readFileSync(`${basePath}/dist/metrics.json`))
+    };
+    // create html and write to file
+    writeHtmlToFile(html(htmlJsonData));
+} catch (err) {
+    console.log(err);
+}

tools/performance/components.js

@@ -0,0 +1,99 @@
+const fs = require('fs');
+
+const basePath = process.cwd();
+
+/**
+ * Get the json data for the analyzed bundles
+ * @param {string} file - file name
+ * @returns {promise} - array of objects
+ */
+const getComponentFileData = file =>
+    new Promise(resolve => {
+        fs.readFile(`${basePath}/dist/${file}.json`, { encoding: 'utf-8' }, (err, data) => {
+            if (err) {
+                console.log(err);
+                throw err;
+            }
+
+            resolve(
+                JSON.parse(data).map(row => ({
+                    label: row.label,
+                    parsedSize: row.parsedSize,
+                    gzipSize: row.gzipSize,
+                    groups: row.groups
+                }))
+            );
+        });
+    });
+
+/**
+ * Create an array of promises for the bundle data
+ * @returns {array} - array of promises
+ */
+const getComponentJson = () => {
+    return [getComponentFileData('messagesReport'), getComponentFileData('componentsReport')];
+};
+
+/**
+ * Create HTML table row
+ * @param {array} jsonDataArray - each row is a file object
+ * @returns {string} - HTML table rows
+ */
+const getFileSizeTableRowHtml = jsonDataArray => {
+    return jsonDataArray
+        .map(row => `<tr><td>${row.label}</td><td>${row.parsedSize} bytes</td><td>${row.gzipSize} bytes</td></tr>`)
+        .join('');
+};
+
+/**
+ * Create HTML for all components
+ * @param {array} messagesReport - bundle data for messages
+ * @param {array} componentsReport - bundle data for components
+ * @returns {string} - html for all components
+ */
+const getComponentHtml = ({ messagesReport, componentsReport }) => {
+    // Messaging Size
+    const messaging = getFileSizeTableRowHtml(messagesReport);
+
+    // Modals Sizes
+    const modals = getFileSizeTableRowHtml(componentsReport);
+
+    // Largest file sizes
+    const largestFiles = getFileSizeTableRowHtml(
+        [...componentsReport, ...messagesReport].sort((a, b) => b.gzipSize - a.gzipSize).splice(0, 3)
+    );
+
+    const headings = `<tr><td>Name</td><td>Unzipped</td><td>Gzipped</td></tr>`;
+
+    return `<h2>NPM Modules</h2>
+        <table><tr><td>Largest</td><td>${messagesReport[0].groups[0].groups[0].label}</td><td>${messagesReport[0].groups[0].groups[0].parsedSize} bytes (unzipped)</td></tr></table>
+        <h2>File Sizes</h2>
+        <table>${headings}${messaging}${modals}</table>
+        <h2>Largest Files</h2>
+        <table>${headings}${largestFiles}</table>`;
+};
+
+/**
+ * Save the html to a json file
+ * @param {*} json
+ */
+const outputLighthouseJson = json => {
+    // save html to json file to be used in compile.js
+    fs.writeFile('dist/components.json', JSON.stringify({ ...json }), err => {
+        if (err) {
+            console.log('components.json failed to save');
+            console.log(err);
+        } else {
+            console.log('components.json saved');
+        }
+    });
+};
+
+if (process.env.BENCHMARK === 'true') {
+    Promise.all(getComponentJson()).then(reports => {
+        const [messagesReport, componentsReport] = reports;
+        outputLighthouseJson({ messagesReport, componentsReport });
+    });
+}
+
+module.exports = { getComponentHtml };

tools/performance/config/lighthouserc-desktop.js

@@ -0,0 +1,38 @@
+const process = require('process');
+
+if (!process.env.ARG) process.env.ARG = process.argv.pop().replace('--', '');
+
+module.exports = {
+    ci: {
+        collect: {
+            numberOfRuns: 2,
+            url: [
+                `${process.env.LIGHTHOUSE_URL}/${process.env.STAGE_TAG ? `?stage_tag=${process.env.STAGE_TAG}` : ''}`,
+                `${process.env.LIGHTHOUSE_URL}/category/jewelry${
+                    process.env.STAGE_TAG ? `?stage_tag=${process.env.STAGE_TAG}` : ''
+                }`,
+                `${process.env.LIGHTHOUSE_URL}/product/7${
+                    process.env.STAGE_TAG ? `?stage_tag=${process.env.STAGE_TAG}` : ''
+                }`,
+                `${process.env.LIGHTHOUSE_URL}/cart${
+                    process.env.STAGE_TAG ? `?stage_tag=${process.env.STAGE_TAG}` : ''
+                }`,
+                `${process.env.LIGHTHOUSE_URL}/checkout${
+                    process.env.STAGE_TAG ? `?stage_tag=${process.env.STAGE_TAG}` : ''
+                }`
+            ],
+            settings: {
+                preset: 'desktop',
+                output: 'json',
+                maxWaitForLoad: 10000,
+                chromeFlags: '--no-sandbox --disable-storage-reset --disable-dev-shm-usage --in-process-gpu'
+            },
+            psiStrategy: 'desktop'
+        },
+        upload: {
+            target: 'filesystem',
+            outputDir: 'lighthouse',
+            reportFilenamePattern: 'desktop-report-%%PATHNAME%%-%%DATETIME%%.%%EXTENSION%%'
+        }
+    }
+};

tools/performance/config/lighthouserc-mobile.js

@@ -0,0 +1,37 @@
+const process = require('process');
+
+if (!process.env.ARG) process.env.ARG = process.argv.pop().replace('--', '');
+
+module.exports = {
+    ci: {
+        collect: {
+            numberOfRuns: 2,
+            url: [
+                `${process.env.LIGHTHOUSE_URL}/${process.env.STAGE_TAG ? `?stage_tag=${process.env.STAGE_TAG}` : ''}`,
+                `${process.env.LIGHTHOUSE_URL}/category/jewelry${
+                    process.env.STAGE_TAG ? `?stage_tag=${process.env.STAGE_TAG}` : ''
+                }`,
+                `${process.env.LIGHTHOUSE_URL}/product/7${
+                    process.env.STAGE_TAG ? `?stage_tag=${process.env.STAGE_TAG}` : ''
+                }`,
+                `${process.env.LIGHTHOUSE_URL}/cart${
+                    process.env.STAGE_TAG ? `?stage_tag=${process.env.STAGE_TAG}` : ''
+                }`,
+                `${process.env.LIGHTHOUSE_URL}/checkout${
+                    process.env.STAGE_TAG ? `?stage_tag=${process.env.STAGE_TAG}` : ''
+                }`
+            ],
+            settings: {
+                output: 'json',
+                maxWaitForLoad: 10000,
+                chromeFlags: '--no-sandbox --disable-storage-reset --disable-dev-shm-usage --in-process-gpu'
+            },
+            psiStrategy: 'mobile'
+        },
+        upload: {
+            target: 'filesystem',
+            outputDir: 'lighthouse',
+            reportFilenamePattern: 'mobile-report-%%PATHNAME%%-%%DATETIME%%.%%EXTENSION%%'
+        }
+    }
+};