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,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);
+}
diff --git a/tools/performance/components.js b/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(`${file} not found`);
+                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 };
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%%'
+        }
+    }
+};