paypal · grablack · Oct 15, 2021 · Oct 15, 2021 · Oct 15, 2021 · Oct 15, 2021
diff --git a/.gitignore b/.gitignore
@@ -14,6 +14,8 @@ coverage
 oom_1
 **/__diff_output__/**
 tests/__reports__/*.html
+lighthouse
+.lighthouseci
 
 # OS generated files #
 ######################

diff --git a/README.md b/README.md
@@ -42,6 +42,10 @@ npm start
 
 To run functional tests, first run `npm run dev:standalone` in one command line instance and `npm run test:func` in a second command line instance. The `dev:standalone` command creates static pages that the functional tests are run on.
 
+## 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.
diff --git a/package.json b/package.json
@@ -23,6 +23,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.NODE_ENV=local --env.TARGET=sdk --env.STAGE_TAG=local",
         "dev:standalone": "webpack-dev-server --config webpack.config.dev.js --env.TARGET=standalone --env.NODE_ENV=local --env.STAGE_TAG=local",

diff --git a/tools/performance/compile.js b/tools/performance/compile.js
@@ -0,0 +1,40 @@
+const fs = require('fs');
+
+const basePath = process.cwd();
+
+let html = `<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; 
+                        }
+                    </style>
+                </head>
+                <body>
+                    <div>${new Date().toDateString()}</div>`;
+try {
+    // get html from json files
+    html += JSON.parse(fs.readFileSync(`${basePath}/dist/lighthouseScores.json`)).html;
+    html += JSON.parse(fs.readFileSync(`${basePath}/dist/components.json`)).html;
+    html += JSON.parse(fs.readFileSync(`${basePath}/dist/metrics.json`)).html;
+
+    html += `</body></html>`;
+
+    // output report html document
+    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');
+        }
+    });
+} catch (err) {
+    throw new Error('Make sure lighthouse.json, components.json, and metrics.json exist first');
+}
diff --git a/tools/performance/components.js b/tools/performance/components.js
@@ -0,0 +1,100 @@
+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 => {
+    return new Promise(resolve => {
+        fs.readFile(`${basePath}/dist/${file}.json`, { encoding: 'utf-8' }, (err, data) => {
+            if (err) {
+                resolve([]);
+            }
+
+            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) => {
+    const headings = `<tr><td>Name</td><td>Unzipped</td><td>Gzipped</td></tr>`;
+    let html = `<h2>NPM Modules</h2>`;
+    html += `<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>`;
+
+    // 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)
+    );
+
+    html += `<h2>File Sizes</h2>`;
+    html += `<table>`;
+    html += headings;
+    html += messaging;
+    html += modals;
+    html += `</table>`;
+
+    html += `<h2>Largest Files</h2>`;
+
+    html += `<table>`;
+    html += headings;
+    html += largestFiles;
+    html += `</table>`;
+
+    return html;
+};
+
+Promise.all(getComponentJson()).then(reports => {
+    const [messagesReport, componentsReport] = reports;
+    const html = getComponentHtml(messagesReport, componentsReport);
+
+    // save html to json file to be used in compile.js
+    fs.writeFile('dist/components.json', JSON.stringify({ html: `${html}` }), err => {
+        if (err) {
+            console.log('components.json failed to save');
+            console.log(err);
+        } else {
+            console.log('components.json saved');
+        }
+    });
+});
diff --git a/tools/performance/config/lighthouserc-desktop.js b/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%%'
+        }
+    }
+};
diff --git a/tools/performance/config/lighthouserc-mobile.js b/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%%'
+        }
+    }
+};