chore(stats script): various updates (#489)

* chore(stats script): various updates

* build-perf: Remove extra debug console.log

Author: andygup

.github/scripts/analyze-builds.js

@@ -102,7 +102,7 @@ const execLogErr = async (command) => {
     const outputPath = resolve(METRICS_PATH, `${jsapiVersion}.csv`);
     const stream = createWriteStream(outputPath);
     stream.write(
-      "Sample,Build size (MB),Build file count,Main bundle file,Main bundle size (MB),Main bundle gzipped size (MB),Main bundle brotli compressed size (MB),Load time (ms),Total runtime (ms),Loaded size (MB),Total JS requests,JS heap size (MB)\n"
+      "Sample,Build size (MB),Build file count,Main bundle file,Main bundle size (MB),Main bundle gzipped size (MB),Main bundle brotli compressed size (MB),Load time (ms),Total runtime (ms),Loaded size (MB),Total JS requests,Total HTTP requests,JS heap size (MB)\n"
     );
 
     for (const [itemCount, sample] of sampleDirectories.entries()) {
@@ -145,7 +145,7 @@ const execLogErr = async (command) => {
       const pageTotalMB = (perfResults.pageTotalBytes / 1024 ** 2).toFixed(2);
       const JSHeapUsedSizeMB = (perfResults.JSHeapUsedSizeBytes / 1024 ** 2).toFixed(2);
 
-      const output = `${sampleName} ${packageVersion},${buildSizeMB},${buildFileCount},${mainBundleName},${mainBundleSizeMB},${mainBundleSizeGzipMB},${mainBundleSizeBrotliMB},${perfResults.elapsedRuntimeMS},${perfResults.totalScriptTimeMS},${pageTotalMB},${perfResults.totalJSRequests},${JSHeapUsedSizeMB}\n`;
+      const output = `${sampleName} ${packageVersion},${buildSizeMB},${buildFileCount},${mainBundleName},${mainBundleSizeMB},${mainBundleSizeGzipMB},${mainBundleSizeBrotliMB},${perfResults.elapsedRuntimeMS},${perfResults.totalScriptTimeMS},${pageTotalMB},${perfResults.totalJSRequests},${perfResults.totalHTTPRequests},${JSHeapUsedSizeMB}\n`;
 
       console.log("Writing results to CSV:", output);
       stream.write(output);

.github/scripts/build-perf.js

@@ -3,8 +3,10 @@ const puppeteer = require("puppeteer");
 const WebServer = require("./WebServer");
 
 let go, webserver;
+let test = 0;
 let pageTotalBytes = 0;
 let totalJSRequests = 0;
+let totalHTTPRequests = 0;
 let performanceMarkStart, performanceMarkEnd;
 const PORT = 3000; // Used for both WebServer and TEST_URL
 const TEST_URL = "http://localhost:" + PORT;
@@ -14,6 +16,7 @@ const TEST_URL = "http://localhost:" + PORT;
  * @param {Object} response 
  */
 const addResponseSize = async (response) => {
+  totalHTTPRequests++;
   const url = response.url();
   const str = url.substring(url.length - 3, url.length);
   if (str === ".js") {
@@ -103,14 +106,16 @@ const capturePageMetrics = async (page, sampleName) => {
    * Useful for comparing against the `elapsedRuntimeMS`. Should not be used as an indicator of
    * application performance, it's most useful for troubleshooting.
    * totalJSRequests - total number of JavaScript files requested by the app
+   * totalRequests = the total number of HTTP requests
    */
   return {
     sampleName,
     elapsedRuntimeMS,
     pageTotalBytes,
     JSHeapUsedSizeBytes,
     totalScriptTimeMS,
-    totalJSRequests
+    totalJSRequests,
+    totalHTTPRequests
   };
 };
 
@@ -137,7 +142,7 @@ const browserPerformanceTest = async (path, sampleName = "") => {
   totalJSRequests = 0;
   startWebServer(path, PORT);
 
-  const browser = await puppeteer.launch({ headless: true });
+  const browser = await puppeteer.launch({ headless: "new", args: ["--use-angle=default"] });
   const page = await browser.newPage();
   errorLogging(page);
   await pageSetup(page);
@@ -171,7 +176,6 @@ const browserPerformanceTest = async (path, sampleName = "") => {
     // Close it because we may need to test multiple directories
     const shutdown = await webserver.stop();
     console.log("Shutting down webserver:", shutdown);
-
     return pageMetrics;
   } else {
     console.log("\x1b[41m\x1b[30mERROR page did not load:", path);
@@ -181,4 +185,5 @@ const browserPerformanceTest = async (path, sampleName = "") => {
   }
 };
 
-module.exports = browserPerformanceTest;
+// browserPerformanceTest("../../esm-samples/jsapi-angular-cli/dist/");
+module.exports = browserPerformanceTest;

.github/scripts/build-size.js

@@ -356,6 +356,8 @@ if (require.main === module) {
           performanceInfo.totalScriptTimeMS,
           `\n --> total JS requests:`,
           performanceInfo.totalJSRequests,
+          `\n --> total HTTP requests:`,
+          performanceInfo.totalHTTPRequests,
           `\n --> app load size:`,
           formatBytes(performanceInfo.pageTotalBytes, decimals, binary),
           `\n --> jsheap size:`,

.github/scripts/package.json

@@ -1,9 +1,9 @@
 {
   "name": "analysis",
   "description": "Run analysis against ESM samples",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "dependencies": {
-    "puppeteer": "^20.3.0",
+    "puppeteer": "^21.3.8",
     "express": "^4.18.2"
   }
 }