From d172631cffe25c0c4654e6a87ca3d5569e7f9b93 Mon Sep 17 00:00:00 2001
From: eduardo aleixo <eh-am@users.noreply.github.com>
Date: Fri, 15 Jul 2022 16:28:33 -0300
Subject: [PATCH] ci(size-limit): compare flamegraph bundle too (#1273)

* ci(size-limit): compare flamegraph bundle too
---
 .github/workflows/size-limit.yml      |  4 +---
 .size-limit.js                        | 15 +++++++++++++++
 package.json                          |  5 ++---
 scripts/webpack/webpack.common.ts     | 24 ++++++++++++++++--------
 scripts/webpack/webpack.size-limit.ts |  5 -----
 5 files changed, 34 insertions(+), 19 deletions(-)

diff --git a/.github/workflows/size-limit.yml b/.github/workflows/size-limit.yml
index a3caa94f25..11df59dfc6 100644
--- a/.github/workflows/size-limit.yml
+++ b/.github/workflows/size-limit.yml
@@ -5,15 +5,13 @@ on:
     branches: [main]
 
 jobs:
-  js-tests:
+  size-check:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
         uses: actions/checkout@v2
       - name: Install Webapp dependencies
         run: yarn install --frozen-lockfile
-      - name: build
-        run: yarn build
       - uses: andresz1/size-limit-action@v1
         with:
           github_token: ${{ secrets.GITHUB_TOKEN }}
diff --git a/.size-limit.js b/.size-limit.js
index e8ffaa32b6..60740c84a0 100644
--- a/.size-limit.js
+++ b/.size-limit.js
@@ -4,4 +4,19 @@ module.exports = [
     // ugly
     limit: '15000ms',
   },
+  {
+    path: ['webapp/public/assets/app.css'],
+  },
+  {
+    path: ['webapp/public/assets/styles.css'],
+  },
+  {
+    path: ['packages/pyroscope-flamegraph/dist/index.js'],
+  },
+  {
+    path: ['packages/pyroscope-flamegraph/dist/index.node.js'],
+  },
+  {
+    path: ['packages/pyroscope-flamegraph/dist/index.css'],
+  },
 ];
diff --git a/package.json b/package.json
index f810acc823..5a9dee2e19 100644
--- a/package.json
+++ b/package.json
@@ -28,7 +28,7 @@
     "build:panel": "lerna run build --scope=@pyroscope/panel-plugin --include-dependencies",
     "build:datasource": "lerna run build --scope=@pyroscope/datasource-plugin --include-dependencies",
     "build:standalone": "webpack --config scripts/webpack/webpack.standalone.ts",
-    "build:size-limit": "NODE_ENV=production webpack --config scripts/webpack/webpack.size-limit.ts",
+    "build:size-limit": "NODE_ENV=production NOHASH=true webpack --config scripts/webpack/webpack.size-limit.ts && yarn build:flamegraph",
     "build:flamegraph": "lerna run build --scope=@pyroscope/flamegraph",
     "test": "jest",
     "test:ss": "UPDATE_SNAPSHOTS=true ./scripts/jest-snapshots/run-docker.sh",
@@ -38,7 +38,6 @@
     "type-check": "lerna run type-check",
     "format": "prettier --write .",
     "format:check": "prettier --check .",
-    "size-build": "make assets-size-build",
     "cy:open": "yarn cy:webapp:open",
     "cy:ci": "yarn cy:webapp:ci",
     "cy:ss": "yarn cy:webapp:ss",
@@ -63,7 +62,7 @@
     "cy:datasource:ss-check": "CYPRESS_updateSnapshots=false ./scripts/cypress-screenshots.sh --config-file packages/pyroscope-datasource-plugin/cypress.json",
     "prepare": "husky install",
     "lint-staged": "lint-staged",
-    "size": "yarn build && size-limit",
+    "size": "size-limit",
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook"
   },
diff --git a/scripts/webpack/webpack.common.ts b/scripts/webpack/webpack.common.ts
index b95ae28a02..5cf3c87987 100644
--- a/scripts/webpack/webpack.common.ts
+++ b/scripts/webpack/webpack.common.ts
@@ -15,6 +15,20 @@ const packagePath = path.resolve(__dirname, '../../webapp');
 // use a fake hash when running locally
 const LOCAL_HASH = 'local';
 
+function getFilename(ext: string) {
+  // We may want to produce no hash, example when running size-limit
+  if (process.env.NOHASH) {
+    return `[name].${ext}`;
+  }
+
+  if (process.env.NODE_ENV === 'production') {
+    return `[name].[hash].${ext}`;
+  }
+
+  // TODO: there's some cache busting issue when running locally
+  return `[name].${LOCAL_HASH}.${ext}`;
+}
+
 const pages = glob
   .sync(path.join(__dirname, '../../webapp/templates/!(standalone).html'))
   .map((x) => path.basename(x));
@@ -60,10 +74,7 @@ export default {
     path: path.resolve(packagePath, 'public/assets'),
 
     // https://webpack.js.org/guides/build-performance/#avoid-production-specific-tooling
-    filename:
-      process.env.NODE_ENV === 'production'
-        ? '[name].[hash].js'
-        : `[name].${LOCAL_HASH}.js`,
+    filename: getFilename('js'),
     clean: true,
   },
 
@@ -147,10 +158,7 @@ export default {
     }),
     ...pagePlugins,
     new MiniCssExtractPlugin({
-      filename:
-        process.env.NODE_ENV === 'production'
-          ? '[name].[hash].css'
-          : `[name].${LOCAL_HASH}.css`,
+      filename: getFilename('css'),
     }),
     new CopyPlugin({
       patterns: [
diff --git a/scripts/webpack/webpack.size-limit.ts b/scripts/webpack/webpack.size-limit.ts
index 9c0d6a0cd3..8d23da5b7f 100644
--- a/scripts/webpack/webpack.size-limit.ts
+++ b/scripts/webpack/webpack.size-limit.ts
@@ -6,11 +6,6 @@ module.exports = merge(prod, {
   output: {
     publicPath: '',
     path: path.resolve(__dirname, '../../webapp/public/assets'),
-
-    // build WITHOUT hash
-    // otherwise size-limit won't know what to compare to
-    // https://github.com/andresz1/size-limit-action/issues/47
-    filename: '[name].js',
     clean: true,
   },
 });