Graph improvements (#15793)

.circleci/scripts/bundle-stats-commit.sh

@@ -40,25 +40,21 @@ git config --global user.name "MetaMask Bot"
 
 git clone git@github.com:MetaMask/extension_bundlesize_stats.git temp
 
-if [[ -f "temp/stats/bundle_size_stats-${CIRCLE_SHA1}.json" ]]
-then
-    printf 'Bundle size of the commit is already recorded'
-    cd ..
-    rm -rf temp
-    exit 0
-fi
-
-cp -R test-artifacts/chrome/mv3/bundle_size_stats.json temp/stats
+{
+    echo " '${CIRCLE_SHA1}': ";
+    cat test-artifacts/chrome/mv3/bundle_size_stats.json;
+    echo ", ";
+} >> temp/stats/bundle_size_data.temp.js
 
-echo " bundle_size_stats-${CIRCLE_SHA1}.json" >> temp/stats/fileList.txt
+cp temp/stats/bundle_size_data.temp.js temp/stats/bundle_size_data.js
 
-mv temp/stats/bundle_size_stats.json "temp/stats/bundle_size_stats-${CIRCLE_SHA1}.json"
+echo " }" >> temp/stats/bundle_size_data.js
 
 cd temp
 
 git add .
 
-git commit --message "Bundle size at commit: ${CIRCLE_SHA1}"
+git commit --message "Adding bundle size at commit: ${CIRCLE_SHA1}"
 
 repo_slug="$CIRCLE_PROJECT_USERNAME/extension_bundlesize_stats"
 git push "https://$GITHUB_TOKEN_USER:$GITHUB_TOKEN@github.com/$repo_slug" main

test/e2e/mv3-perf-stats/bundle-size.js

@@ -53,14 +53,14 @@ async function main() {
   const distFolder = 'dist/chrome';
   const backgroundFileList = [];
   const uiFileList = [];
+  const commonFileList = [];
 
   const files = await fs.readdir(distFolder);
   for (let i = 0; i < files.length; i++) {
     const file = files[i];
     if (CommonFileRegex.test(file)) {
       const stats = await fs.stat(`${distFolder}/${file}`);
-      backgroundFileList.push({ name: file, size: stats.size });
-      uiFileList.push({ name: file, size: stats.size });
+      commonFileList.push({ name: file, size: stats.size });
     } else if (
       backgroundFiles.includes(file) ||
       BackgroundFileRegex.test(file)
@@ -83,6 +83,11 @@ async function main() {
     0,
   );
 
+  const commonBundleSize = commonFileList.reduce(
+    (result, file) => result + file.size,
+    0,
+  );
+
   const result = {
     background: {
       name: 'background',
@@ -94,6 +99,11 @@ async function main() {
       size: uiBundleSize,
       fileList: uiFileList,
     },
+    common: {
+      name: 'common',
+      size: commonBundleSize,
+      fileList: commonFileList,
+    },
   };
 
   if (out) {
@@ -115,6 +125,7 @@ async function main() {
         {
           background: backgroundBundleSize,
           ui: uiBundleSize,
+          common: commonBundleSize,
           timestamp: new Date().getTime(),
         },
         null,