chore: add size-limit action

.github/workflows/tests-js.yml

@@ -20,3 +20,8 @@ jobs:
         run: yarn lint
       - name: Run Webapp Format check
         run: yarn format:check
+      - uses: andresz1/size-limit-action@v1
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          skip_step: install
+          build_script: build:size-limit

.size-limit.js

@@ -0,0 +1,7 @@
+module.exports = [
+  {
+    path: 'webapp/public/assets/app*.js',
+    // ugly
+    limit: '15000ms',
+  },
+];

Makefile

@@ -150,7 +150,7 @@ assets-watch: install-web-dependencies ## Configure the assets with live reloadi
 assets-release: install-web-dependencies ## Configure the assets for release
 	rm -rf webapp/public/assets
 	rm -rf webapp/public/*.html
-	NODE_ENV=production $(shell yarn bin webpack) --config scripts/webpack/webpack.prod.js
+	yarn build
 
 .PHONY: assets-size-build
 assets-size-build: assets-release ## Build assets for the size report

package.json

@@ -12,6 +12,7 @@
     "postinstall": "./scripts/web-postinstall.sh",
     "dev": "webpack --progress --config scripts/webpack/webpack.dev.js",
     "build": "NODE_ENV=production webpack --config scripts/webpack/webpack.prod.js",
+    "build:size-limit": "NODE_ENV=production webpack --config scripts/webpack/webpack.size-limit.js",
     "test": "jest",
     "lint": "eslint ./ --ext .js,.jsx,.ts,.tsx --cache --fix",
     "format": "prettier --write .",
@@ -22,13 +23,15 @@
     "cy:ss": "./scripts/cypress-screenshots.sh",
     "cy:ss-check": "CYPRESS_updateSnapshots=false ./scripts/cypress-screenshots.sh",
     "prepare": "husky install",
-    "lint-staged": "lint-staged"
+    "lint-staged": "lint-staged",
+    "size": "yarn build && size-limit"
   },
   "devDependencies": {
     "@babel/core": "7.8.4",
     "@babel/preset-react": "^7.12.10",
     "@babel/preset-typescript": "7.8.3",
-    "@size-limit/file": "^5.0.3",
+    "@size-limit/file": "^6.0.2",
+    "@size-limit/time": "^6.0.2",
     "@testing-library/cypress": "^8.0.0",
     "@testing-library/dom": "^8.7.1",
     "@testing-library/jest-dom": "^5.14.1",
@@ -78,7 +81,7 @@
     "regenerator-runtime": "^0.13.9",
     "sass": "^1.26.10",
     "sass-loader": "^9.0.2",
-    "size-limit": "^5.0.3",
+    "size-limit": "^6.0.1",
     "sync-request": "^6.1.0",
     "ts-jest": "^27.0.5",
     "typescript": "^4.4.3",
@@ -135,12 +138,6 @@
   "engines": {
     "node": ">=11"
   },
-  "size-limit": [
-    {
-      "path": "webapp/public/assets/app.js",
-      "limit": "750 kB"
-    }
-  ],
   "lint-staged": {
     "*.{js,jsx,ts,tsx}": [
       "eslint --cache --fix"

scripts/webpack/webpack.size-limit.js

@@ -0,0 +1,16 @@
+const { merge } = require('webpack-merge');
+const path = require('path');
+const prod = require('./webpack.prod');
+
+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,
+  },
+});