build: setup size limit configs (#1822)

Author: zchenwei

.github/workflows/test-deploy-main.yml

@@ -109,6 +109,10 @@ jobs:
         if: ${{ matrix.package != 'ui' }}
         run: yarn ${{ matrix.package }} build
 
+      - name: Check ${{ matrix.package }} bundle size
+        if: ${{ matrix.package == 'react' }}
+        run: yarn react size
+
       - name: Cache ${{ matrix.package }}/dist
         uses: actions/cache@v2
         with:

.github/workflows/test-prs.yml

@@ -132,6 +132,10 @@ jobs:
         if: ${{ matrix.package != 'ui' }}
         run: yarn ${{ matrix.package }} build
 
+      - name: Check ${{ matrix.package }} bundle size
+        if: ${{ matrix.package == 'react' }}
+        run: yarn react size
+
       - name: Cache ${{ matrix.package }}/dist
         uses: actions/cache@v2
         with:

canary/apps/react/cra-ts/package.json

@@ -21,6 +21,7 @@
   "scripts": {
     "dev": "react-app-rewired start",
     "build": "react-app-rewired build",
+    "postbuild": "yarn run size-limit",
     "test": "react-app-rewired test",
     "start": "serve build -s -p 3000",
     "eject": "react-app-rewired eject"
@@ -44,8 +45,16 @@
     ]
   },
   "devDependencies": {
+    "@size-limit/preset-app": "^7.0.8",
     "customize-cra": "^1.0.0",
     "react-app-rewired": "^2.2.1",
-    "serve": "^13.0.2"
-  }
+    "serve": "^13.0.2",
+    "size-limit": "^7.0.8"
+  },
+  "size-limit": [
+    {
+      "path": "build/static/js/main.*.js",
+      "limit": "280 kB"
+    }
+  ]
 }

canary/apps/react/cra/package.json

@@ -17,6 +17,7 @@
     "dev": "react-app-rewired start",
     "start": "serve build -s -p 3000",
     "build": "react-app-rewired build",
+    "postbuild": "yarn run size-limit",
     "test": "react-app-rewired test",
     "eject": "react-app-rewired eject"
   },
@@ -39,8 +40,16 @@
     ]
   },
   "devDependencies": {
+    "@size-limit/preset-app": "^7.0.8",
     "customize-cra": "^1.0.0",
     "react-app-rewired": "^2.2.1",
-    "serve": "^13.0.2"
-  }
+    "serve": "^13.0.2",
+    "size-limit": "^7.0.8"
+  },
+  "size-limit": [
+    {
+      "path": "build/static/js/main.*.js",
+      "limit": "280 kB"
+    }
+  ]
 }

canary/apps/react/next/package.json

@@ -4,6 +4,7 @@
   "scripts": {
     "dev": "next dev",
     "build": "next build",
+    "postbuild": "yarn run size-limit",
     "start": "next start",
     "lint": "next lint"
   },
@@ -15,7 +16,15 @@
     "react-dom": "latest"
   },
   "devDependencies": {
+    "@size-limit/preset-app": "^7.0.8",
     "eslint": "8.8.0",
-    "eslint-config-next": "12.0.10"
-  }
+    "eslint-config-next": "12.0.10",
+    "size-limit": "^7.0.8"
+  },
+  "size-limit": [
+    {
+      "path": ".next/static/**/*.js",
+      "limit": "350 kB"
+    }
+  ]
 }

canary/apps/react/vite/package.json

@@ -5,6 +5,7 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
+    "postbuild": "yarn run size-limit",
     "preview": "vite preview",
     "start": "vite preview --port 3000"
   },
@@ -15,7 +16,15 @@
     "react-dom": "latest"
   },
   "devDependencies": {
+    "@size-limit/preset-app": "^7.0.8",
     "@vitejs/plugin-react": "^1.0.7",
+    "size-limit": "^7.0.8",
     "vite": "^2.8.0"
-  }
+  },
+  "size-limit": [
+    {
+      "path": "dist/assets/index.*.js",
+      "limit": "300 kB"
+    }
+  ]
 }

packages/react/package.json

@@ -54,7 +54,8 @@
     "test": "yarn test:unit",
     "test:watch": "yarn test:unit:watch",
     "test:unit": "jest",
-    "test:unit:watch": "jest --watch"
+    "test:unit:watch": "jest --watch",
+    "size": "yarn run size-limit"
   },
   "dependencies": {
     "@aws-amplify/ui": "3.7.0",
@@ -86,6 +87,7 @@
   },
   "devDependencies": {
     "@rollup/plugin-typescript": "^8.3.1",
+    "@size-limit/preset-big-lib": "^7.0.8",
     "@svgr/core": "^5.5.0",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^12.0.0",
@@ -112,11 +114,19 @@
     "rollup": "^2.70.0",
     "rollup-plugin-styles": "^4.0.0",
     "rollup-plugin-terser": "^7.0.2",
+    "size-limit": "^7.0.8",
     "ts-jest": "^27.0.3",
     "ts-morph": "^12.0.0",
     "ts-node": "^10.2.1"
   },
   "sideEffects": [
     "dist/**/*.css"
+  ],
+  "size-limit": [
+    {
+      "path": "dist/esm/index.js",
+      "import": "{ Authenticator }",
+      "limit": "100 kB"
+    }
   ]
 }