Update bundle-size benchmark (#1151)

Makefile

@@ -136,9 +136,8 @@ $(GEN)/connect-web: node_modules/.bin/protoc-gen-es $(BUILD)/protoc-gen-connect-
 	@mkdir -p $(@D)
 	@touch $(@)
 
-$(GEN)/connect-web-bench: node_modules/.bin/protoc-gen-es $(BUILD)/protoc-gen-connect-es packages/connect-web-bench/buf.gen.yaml Makefile
-	rm -rf packages/connect-web-bench/src/gen/*
-	npm run -w packages/connect-web-bench generate buf.build/connectrpc/eliza:8bde2b90ec0a7f23df3de5824bed0b6ea2043305
+$(GEN)/connect-web-bench: node_modules/.bin/protoc-gen-es $(BUILD)/protoc-gen-connect-es packages/connect-web-bench/buf.gen.yaml
+	npm run -w packages/connect-web-bench generate
 	@mkdir -p $(@D)
 	@touch $(@)
 
@@ -258,7 +257,7 @@ format: node_modules ## Format all files, adding license headers
 
 .PHONY: bench
 bench: node_modules $(GEN)/connect-web-bench $(BUILD)/connect-web ## Benchmark code size
-	npm run -w packages/connect-web-bench report
+	npm run -w packages/connect-web-bench bundle-size
 
 .PHONY: setversion
 setversion: ## Set a new version in for the project, i.e. make setversion SET_VERSION=1.2.3

packages/connect-web-bench/README.md

@@ -1,14 +1,29 @@
 # Code size comparison
 
-This is a simple code size comparison between Connect-Web and gRPC-web.
-
-We are generating code for the module [buf.build/connectrpc/eliza](https://buf.build/connectrpc/eliza)
-once with `protoc-gen-grpc-web`, once with `protoc-gen-connect-es`.
-Then we bundle a client for the service `connectrpc.eliza.v1.ElizaService`
-with [esbuild](https://esbuild.github.io/), minify the bundle, and compress
-it like a web server would usually do.
-
-| code generator | bundle size        | minified               | compressed           |
-|----------------|-------------------:|-----------------------:|---------------------:|
-| connect        | 125,130 b | 54,845 b | 14,767 b |
-| grpc-web       | 415,212 b    | 300,936 b    | 53,420 b |
+This is a simple code size comparison between Connect-ES and [gRPC-web](https://github.com/grpc/grpc-web).
+
+We are generating code for the module [buf.build/bufbuild/registry](https://buf.build/bufbuild/registry)
+once with gRPC-web, once with Connect-ES. Then we bundle a client calling an RPC
+with [esbuild](https://esbuild.github.io/), minify the bundle, and compress it like a web server would
+usually do. We repeat this for an increasing number of RPCs.
+
+![chart](./chart.svg)
+
+<details><summary>Tabular data</summary>
+
+<!-- TABLE-START -->
+
+| code generator | RPCs | bundle size |  minified | compressed |
+| -------------- | ---: | ----------: | --------: | ---------: |
+| Connect-ES     |    1 |   152,637 b |  66,472 b |   16,369 b |
+| Connect-ES     |    4 |   168,079 b |  72,412 b |   16,863 b |
+| Connect-ES     |    8 |   193,392 b |  82,136 b |   17,475 b |
+| Connect-ES     |   16 |   227,031 b |  96,402 b |   18,225 b |
+| gRPC-Web       |    1 |   876,563 b | 548,495 b |   52,300 b |
+| gRPC-Web       |    4 |   928,964 b | 580,477 b |   54,673 b |
+| gRPC-Web       |    8 | 1,004,833 b | 628,223 b |   57,118 b |
+| gRPC-Web       |   16 | 1,124,155 b | 701,232 b |   61,248 b |
+
+<!-- TABLE-END -->
+
+</details>

packages/connect-web-bench/buf.gen.yaml

@@ -1,14 +1,21 @@
-version: v1
+# Learn more: https://buf.build/docs/configuration/v2/buf-gen-yaml
+version: v2
 plugins:
-  - plugin: es
+  - local: protoc-gen-es
     out: src/gen/connectweb
     opt: ts_nocheck=false,target=ts
-  - plugin: connect-es
+    include_imports: true
+  - local: protoc-gen-connect-es
     out: src/gen/connectweb
     opt: ts_nocheck=false,target=ts
-  - plugin: buf.build/protocolbuffers/js:v3.21.2
+  - remote: buf.build/protocolbuffers/js:v3.21.4
     out: src/gen/grpcweb
     opt: import_style=commonjs
-  - plugin: buf.build/grpc/web:v1.5.0
+    include_imports: true
+  - remote: buf.build/grpc/web:v1.5.0
     out: src/gen/grpcweb
     opt: import_style=commonjs+dts,mode=grpcweb
+  - local: ["tsx", "./src/protoc-gen-entrypoints.ts"]
+    strategy: all
+    opt: target=ts
+    out: src/gen

packages/connect-web-bench/package.json

@@ -2,17 +2,19 @@
   "name": "@connectrpc/connect-web-bench",
   "private": true,
   "scripts": {
-    "generate": "buf generate",
-    "report": "node report.mjs > README.md",
-    "clean": "rm -rf README.md src/gen"
+    "bundle-size": "tsx src/report.ts",
+    "pregenerate": "rm -rf src/gen/*",
+    "generate": "buf generate buf.build/bufbuild/registry:f2077dee5ad44f7d9b660b32bf0958ee",
+    "postgenerate": "license-header ."
   },
   "dependencies": {
     "@bufbuild/protobuf": "^1.10.0",
     "@bufbuild/protoc-gen-es": "^1.10.0",
     "@connectrpc/connect-web": "1.4.0",
+    "@types/brotli": "^1.3.4",
     "brotli": "^1.3.3",
     "esbuild": "^0.19.8",
-    "google-protobuf": "^3.21.0",
-    "grpc-web": "^1.4.2"
+    "google-protobuf": "3.21.4",
+    "grpc-web": "^1.5.0"
   }
 }

packages/connect-web-bench/src/entry-grpcweb.ts → packages/connect-web-bench/src/constants.ts

@@ -12,9 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { ElizaServiceClient } from "./gen/grpcweb/connectrpc/eliza/v1/eliza_grpc_web_pb.js";
-
-const client = new ElizaServiceClient("https://demo.connectrpc.com");
-
-// eslint-disable-next-line no-console -- log statement makes sure the variable is in use
-console.log(client);
+/**
+ * Number of RPCs used per entrypoint.
+ */
+export const sizes = [1, 4, 8, 16];