ci(size-limit): compare flamegraph bundle too (grafana#1273)

* ci(size-limit): compare flamegraph bundle too
yzhaoyu · Jul 15, 2022 · d172631 · d172631
1 parent 68ffd31
commit d172631
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 19 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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,
   },
 });