[docs] Track bundle size of pages (#19978)

Author: eps1lon

azure-pipelines.yml

@@ -1,10 +1,10 @@
 trigger:
   branches:
     include:
-    - '*'
+      - '*'
     exclude:
-    - l10n
-    - dependabot/*
+      - l10n
+      - dependabot/*
 
 pool:
   vmImage: 'ubuntu-latest'
@@ -37,7 +37,7 @@ steps:
       globExpressions: '*.tgz'
       targetFolder: 'artifacts/$(Build.SourceBranchName)/$(Build.SourceVersion)'
       filesAcl: 'public-read'
-    displayName: "Upload distributables to S3"
+    displayName: 'Upload distributables to S3'
     condition: and(succeeded(), ne(variables['Build.Reason'], 'PullRequest'))
     env:
       AWS_ACCESS_KEY_ID: $(AWS_ACCESS_KEY_ID)
@@ -49,8 +49,11 @@ steps:
       targetPath: 'material-ui-core.tgz'
 
   - script: |
-      yarn docs:build
-    displayName: 'build docs'
+      set -o pipefail
+      mkdir -p scripts/sizeSnapshot/build	
+      yarn docs:build | tee scripts/sizeSnapshot/build/docs.next	
+      set +o pipefail
+    displayName: 'build docs for size snapshot'
 
   - script: |
       yarn size:snapshot

dangerfile.js

@@ -90,16 +90,6 @@ function formatDiff(absoluteChange, relativeChange) {
   )})`;
 }
 
-function computeBundleLabel(bundleId) {
-  if (bundleId === 'packages/material-ui/build/umd/material-ui.production.min.js') {
-    return '@material-ui/core[umd]';
-  }
-  if (bundleId === '@material-ui/core/Textarea') {
-    return 'TextareaAutosize';
-  }
-  return bundleId.replace(/^@material-ui\/core\//, '').replace(/\.esm$/, '');
-}
-
 /**
  * Generates a Markdown table
  * @param {{ label: string, align: 'left' | 'center' | 'right'}[]} headers
@@ -129,6 +119,74 @@ function generateEmphasizedChange([bundle, { parsed, gzip }]) {
   return `**${bundle}**: parsed: ${changeParsed}, gzip: ${changeGzip}`;
 }
 
+/**
+ *
+ * @param {[string, object][]} entries
+ * @param {object} options
+ * @param {function (string): string} options.computeBundleLabel
+ */
+function createComparisonTable(entries, options) {
+  const { computeBundleLabel } = options;
+
+  return generateMDTable(
+    [
+      { label: 'bundle' },
+      { label: 'Size Change', align: 'right' },
+      { label: 'Size', align: 'right' },
+      { label: 'Gzip Change', align: 'right' },
+      { label: 'Gzip', align: 'right' },
+    ],
+    entries
+      .map(([bundleId, size]) => [computeBundleLabel(bundleId), size])
+      // orderBy(|parsedDiff| DESC, |gzipDiff| DESC, name ASC)
+      .sort(([labelA, statsA], [labelB, statsB]) => {
+        const compareParsedDiff =
+          Math.abs(statsB.parsed.absoluteDiff) - Math.abs(statsA.parsed.absoluteDiff);
+        const compareGzipDiff =
+          Math.abs(statsB.gzip.absoluteDiff) - Math.abs(statsA.gzip.absoluteDiff);
+        const compareName = labelA.localeCompare(labelB);
+
+        if (compareParsedDiff === 0 && compareGzipDiff === 0) {
+          return compareName;
+        }
+        if (compareParsedDiff === 0) {
+          return compareGzipDiff;
+        }
+        return compareParsedDiff;
+      })
+      .map(([label, { parsed, gzip }]) => {
+        return [
+          label,
+          formatDiff(parsed.absoluteDiff, parsed.relativeDiff),
+          prettyBytes(parsed.current),
+          formatDiff(gzip.absoluteDiff, gzip.relativeDiff),
+          prettyBytes(gzip.current),
+        ];
+      }),
+  );
+}
+
+/**
+ * Puts results in different buckets wh
+ * @param {*} results
+ */
+function sieveResults(results) {
+  const main = [];
+  const pages = [];
+
+  results.forEach(entry => {
+    const [bundleId] = entry;
+
+    if (bundleId.startsWith('docs:')) {
+      pages.push(entry);
+    } else {
+      main.push(entry);
+    }
+  });
+
+  return { all: results, main, pages };
+}
+
 async function run() {
   // Use git locally to grab the commit which represents the place
   // where the branches differ
@@ -145,11 +203,14 @@ async function run() {
   const commitRange = `${mergeBaseCommit}...${danger.github.pr.head.sha}`;
 
   const comparison = await loadComparison(mergeBaseCommit, upstreamRef);
-  const results = Object.entries(comparison.bundles);
-  const anyResultsChanges = results.filter(createComparisonFilter(1, 1));
+
+  const { all: allResults, main: mainResults, pages: pageResults } = sieveResults(
+    Object.entries(comparison.bundles),
+  );
+  const anyResultsChanges = allResults.filter(createComparisonFilter(1, 1));
 
   if (anyResultsChanges.length > 0) {
-    const importantChanges = results
+    const importantChanges = mainResults
       .filter(createComparisonFilter(parsedSizeChangeThreshold, gzipSizeChangeThreshold))
       .filter(isPackageComparison)
       .map(generateEmphasizedChange);
@@ -159,50 +220,44 @@ async function run() {
       markdown(importantChanges.join('\n'));
     }
 
-    const detailsTable = generateMDTable(
-      [
-        { label: 'bundle' },
-        { label: 'Size Change', align: 'right' },
-        { label: 'Size', align: 'right' },
-        { label: 'Gzip Change', align: 'right' },
-        { label: 'Gzip', align: 'right' },
-      ],
-      results
-        .map(([bundleId, size]) => [computeBundleLabel(bundleId), size])
-        // orderBy(|parsedDiff| DESC, |gzipDiff| DESC, name ASC)
-        .sort(([labelA, statsA], [labelB, statsB]) => {
-          const compareParsedDiff =
-            Math.abs(statsB.parsed.absoluteDiff) - Math.abs(statsA.parsed.absoluteDiff);
-          const compareGzipDiff =
-            Math.abs(statsB.gzip.absoluteDiff) - Math.abs(statsA.gzip.absoluteDiff);
-          const compareName = labelA.localeCompare(labelB);
-
-          if (compareParsedDiff === 0 && compareGzipDiff === 0) {
-            return compareName;
-          }
-          if (compareParsedDiff === 0) {
-            return compareGzipDiff;
-          }
-          return compareParsedDiff;
-        })
-        .map(([label, { parsed, gzip }]) => {
-          return [
-            label,
-            formatDiff(parsed.absoluteDiff, parsed.relativeDiff),
-            prettyBytes(parsed.current),
-            formatDiff(gzip.absoluteDiff, gzip.relativeDiff),
-            prettyBytes(gzip.current),
-          ];
-        }),
-    );
+    const mainDetailsTable = createComparisonTable(mainResults, {
+      computeBundleLabel: bundleId => {
+        if (bundleId === 'packages/material-ui/build/umd/material-ui.production.min.js') {
+          return '@material-ui/core[umd]';
+        }
+        if (bundleId === '@material-ui/core/Textarea') {
+          return 'TextareaAutosize';
+        }
+        if (bundleId === 'docs.main') {
+          return 'docs:/_app';
+        }
+        if (bundleId === 'docs.landing') {
+          return 'docs:/';
+        }
+        return bundleId.replace(/^@material-ui\/core\//, '').replace(/\.esm$/, '');
+      },
+    });
+    const pageDetailsTable = createComparisonTable(pageResults, {
+      computeBundleLabel: bundleId => {
+        const host = `https://deploy-preview-${danger.github.pr.number}--material-ui.netlify.com`;
+        const page = bundleId.replace(/^docs:/, '');
+        return `[${page}](${host}${page})`;
+      },
+    });
 
     const details = `
   <details>
   <summary>Details of bundle changes.</summary>
 
   <p>Comparing: ${commitRange}</p>
 
-  ${detailsTable}
+  <details>
+  <summary>Details of page changes</summary>
+
+  ${pageDetailsTable}
+  </details>
+
+  ${mainDetailsTable}
 
   </details>`;
 

scripts/sizeSnapshot/create.js

@@ -49,12 +49,78 @@ async function getWebpackSizes() {
   });
 }
 
+// waiting for String.prototype.matchAll in node 10
+function* matchAll(string, regex) {
+  let match = null;
+  do {
+    match = regex.exec(string);
+    if (match !== null) {
+      yield match;
+    }
+  } while (match !== null);
+}
+
+/**
+ * Inverse to `pretty-bytes`
+ *
+ * @param {string} n
+ * @param {'B', 'kB' | 'MB' | 'GB' | 'TB' | 'PB'} unit
+ * @returns {number}
+ */
+
+function prettyBytesInverse(n, unit) {
+  const metrixPrefix = unit.length < 2 ? '' : unit[0];
+  const metricPrefixes = ['', 'k', 'M', 'G', 'T', 'P'];
+  const metrixPrefixIndex = metricPrefixes.indexOf(metrixPrefix);
+  if (metrixPrefixIndex === -1) {
+    throw new TypeError(
+      `unrecognized metric prefix '${metrixPrefix}' in unit '${unit}'. only '${metricPrefixes.join(
+        "', '",
+      )}' are allowed`,
+    );
+  }
+
+  const power = metrixPrefixIndex * 3;
+  return n * 10 ** power;
+}
+
+/**
+ * parses output from next build to size snapshot format
+ * @returns {[string, { gzip: number, files: number, packages: number }][]}
+ */
+
+async function getNextPagesSize() {
+  const consoleOutput = await fse.readFile(path.join(__dirname, 'build/docs.next'), {
+    encoding: 'utf8',
+  });
+  const pageRegex = /^(?<treeViewPresentation>┌|├|└)\s+(?<fileType>σ|⚡|)\s+(?<pageUrl>[^\s]+)\s+(?<sizeFormatted>[0-9.]+)\s+(?<sizeUnit>\w+)/gm;
+
+  return Array.from(matchAll(consoleOutput, pageRegex), match => {
+    const { pageUrl, sizeFormatted, sizeUnit } = match.groups;
+
+    let snapshotId = `docs:${pageUrl}`;
+    // used to be tracked with custom logic hence the different ids
+    if (pageUrl === '/') {
+      snapshotId = 'docs.main';
+    } else if (pageUrl === '/_app') {
+      snapshotId = 'docs.main';
+    }
+    return [
+      snapshotId,
+      {
+        parsed: prettyBytesInverse(sizeFormatted, sizeUnit),
+        gzip: -1,
+      },
+    ];
+  });
+}
+
 async function run() {
   const rollupBundles = [path.join(workspaceRoot, 'packages/material-ui/size-snapshot.json')];
-
   const bundleSizes = lodash.fromPairs([
     ...(await getWebpackSizes()),
     ...lodash.flatten(await Promise.all(rollupBundles.map(getRollupSize))),
+    ...(await getNextPagesSize()),
   ]);
 
   await fse.writeJSON(snapshotDestPath, bundleSizes, { spaces: 2 });

scripts/sizeSnapshot/webpack.config.js

@@ -1,4 +1,3 @@
-const fse = require('fs-extra');
 const globCallback = require('glob');
 const path = require('path');
 const CompressionPlugin = require('compression-webpack-plugin');
@@ -9,18 +8,6 @@ const glob = promisify(globCallback);
 const workspaceRoot = path.join(__dirname, '..', '..');
 
 async function getSizeLimitBundles() {
-  const nextDir = path.join(workspaceRoot, 'docs/.next');
-  const buildId = await fse.readFile(path.join(nextDir, 'BUILD_ID'), 'utf8');
-
-  const dirname = path.join(nextDir, 'static/chunks');
-  const [main] = (await fse.readdir(dirname)).reduce((result, filename) => {
-    if (filename.length === 31) {
-      return [...result, { path: `${dirname}/${filename}` }];
-    }
-
-    return result;
-  }, []);
-
   const corePackagePath = path.join(workspaceRoot, 'packages/material-ui/build/esm');
   const coreComponents = (await glob(path.join(corePackagePath, '[A-Z]*'))).map(componentPath => {
     const componentName = path.basename(componentPath);
@@ -95,16 +82,6 @@ async function getSizeLimitBundles() {
       webpack: true,
       path: 'packages/material-ui/build/esm/useMediaQuery/index.js',
     },
-    {
-      name: 'docs.main',
-      webpack: false,
-      path: path.relative(workspaceRoot, main.path),
-    },
-    {
-      name: 'docs.landing',
-      webpack: false,
-      path: path.relative(workspaceRoot, path.join(nextDir, `static/${buildId}/pages/index.js`)),
-    },
   ];
 }