pwa: サービスオブジェクトを参照しない @bufbuild/protobuf の生成するサービスオブジェクトはかなりファットで ランタイムなのに色々詰め込みまくっている。そのため、特に将来的に バンドルサイズに影響が出てくるので必要なメソッドのリクエスト・ レスポンスメッセージを適宜読み込む形にした。 サービスオブジェクトはそのままの JS オブジェクトで、プロパティとして スキーマやらが色々生えている。そのため、 Tree Shaking が効かない。 サービスオブジェクトを使った場合のサイズは、 ``` $ vite build vite v6.0.2 building for production... ✓ 78 modules transformed. ../dist/index.html 0.45 kB │ gzip: 0.30 kB ../dist/assets/main-DJ9_Th8G.js 78.27 kB ../dist/assets/index-DsgyLhcA.js 72.82 kB │ gzip: 19.64 kB ✓ built in 366ms ``` 使わなかった場合のサイズは、 ``` $ vite build vite v6.0.2 building for production... ✓ 67 modules transformed. ../dist/index.html 0.45 kB │ gzip: 0.30 kB ../dist/assets/main-MP79NseV.js 78.26 kB ../dist/assets/index-iIdyv0Db.js 68.83 kB │ gzip: 18.42 kB ✓ built in 359ms ``` と現状のコンパクトなサービスでもかなり違ってくる。 クライアントからのメソッド呼び出しや GUI のコードなんかが入って くるとサイズとしては誤差になるのかもしれないが、削れるのであれば 削りたい。

Changes

2 changed files (+18/-46)

• packages/pwa/src/main.ts
  • @@ -1,10 +1,11 @@
    // SPDX-FileCopyrightText: 2024 Shota FUJI <pockawoooh@gmail.com> // SPDX-License-Identifier: AGPL-3.0-only - import { fromBinary } from "@bufbuild/protobuf"; - import { KeyValueStorageBasedWorkspaceService } from "@yamori/proto/yamori/workspace/v1/key_value_storage_based_workspace_service_pb.js"; + import { create, fromBinary, toBinary } from "@bufbuild/protobuf"; + import { ListRequestSchema } from "@yamori/proto/yamori/workspace/v1/list_request_pb.js"; + import { ListResponseSchema } from "@yamori/proto/yamori/workspace/v1/list_response_pb.js"; - import { isValidMessage, requestMessage } from "./worker/message.ts"; + import { isValidMessage, type Message } from "./worker/message.ts"; const button = document.createElement("button"); button.textContent = "Send Message";
  • @@ -29,11 +30,18 @@
    button.addEventListener("click", (ev) => { ev.preventDefault(); - const req = requestMessage(KeyValueStorageBasedWorkspaceService.method.list, {}); + const req = toBinary(ListRequestSchema, create(ListRequestSchema, {})); - worker.postMessage(req, { - transfer: [req.data.buffer], - }); + worker.postMessage( + { + service: "yamori.workspace.v1.KeyValueStorageBasedWorkspaceService", + method: "List", + data: req, + } satisfies Message, + { + transfer: [req.buffer], + }, + ); }); worker.addEventListener("message", (ev) => {
  • @@ -43,13 +51,10 @@ return;
    } switch (ev.data.service) { - case KeyValueStorageBasedWorkspaceService.typeName: { + case "yamori.workspace.v1.KeyValueStorageBasedWorkspaceService": { switch (ev.data.method) { - case KeyValueStorageBasedWorkspaceService.method.list.name: { - const resp = fromBinary( - KeyValueStorageBasedWorkspaceService.method.list.output, - ev.data.data, - ); + case "List": { + const resp = fromBinary(ListResponseSchema, ev.data.data); output.textContent += "\n" + JSON.stringify(resp, null, 2); return;
• packages/pwa/src/worker/message.ts
  • @@ -4,13 +4,6 @@ //
    // SPDX-FileCopyrightText: 2024 Shota FUJI <pockawoooh@gmail.com> // SPDX-License-Identifier: AGPL-3.0-only - import { - create, - toBinary, - type DescMethod, - type MessageInitShape, - } from "@bufbuild/protobuf"; - export interface Message { service: string; method: string;
  • @@ -36,29 +29,3 @@ }
    return true; } - - export function requestMessage<Method extends DescMethod>( - method: Method, - data: MessageInitShape<Method["input"]>, - ): Message { - const binary = toBinary(method.input, create(method.input, data)); - - return { - service: method.parent.typeName, - method: method.name, - data: binary, - }; - } - - export function responseMessage<Method extends DescMethod>( - method: Method, - data: MessageInitShape<Method["output"]>, - ): Message { - const binary = toBinary(method.output, create(method.output, data)); - - return { - service: method.parent.typeName, - method: method.name, - data: binary, - }; - }