Optimizing Bluesky comments

Having comments on my blog with Bluesky is pretty nice, but what’s not so nice is having to bring in the entire @atproto/api package. It seemingly can’t be tree shaken down via Vite, so you end up with a massive JS file for comments.

How massive is it? More than 700kB.

It’s kinda a lot, and as it is I had to tweak my Astro config to make Vite not warn about this:

  vite: {
    optimizeDeps: {
      exclude: ["@resvg/resvg-js"],
    },
    build: {
      chunkSizeWarningLimit: 768,
      // TODO find a better way to handle this
      // where "this" means the bsky react import chunk size
    },
  },

I wasn’t a huge fan of this for a few reasons. One, that was a lot of unneeded JS being delivered that I didn’t need, and I had to modify a warning setting which seemed less than ideal.

I had seen @atcute/client by Mary float across my feed, and poked at it a bit, but only after I figured out how to make unauthenticated requests with it did it become clear how much better it was going to make my bundles.

Only took a little bit of modifying the work I had done using Emily Liu’s example to instead use atcute:

const rpc = new XRPC({
  handler: simpleFetchHandler({ service: "https://public.api.bsky.app" }),
});

const agent = new Agent("https://public.api.bsky.app");
const assembledUrl = "https://jack.is/posts/" + slug.toString();

const response = await agent.app.bsky.feed.searchPosts(...);
const response = await rpc.get("app.bsky.feed.searchPosts", {
  params: {
    q: "📝",
    author: "did:plc:cwdkf4xxjpznceembuuspt3d",
    sort: "latest",
    limit: 1,
    url: assembledUrl,
  },
});

The unexpected benefit here is that @atproto/api didn’t actually have all the helper functions Emily needed for it to work, so there was a direct call to one of the xrpc endpoints. Now that everything just uses rpc.get, it’s a lot more consistent and easier to follow.

I did have to add a few //@ts-expect-error sprinkled around, but they’re all guarded by typeguards so I’m not too worried.

Now instead of 700kB, my BlueskyComments.js is only 10kB. A vast improvement.

Thanks again to Emily for posting their code to begin with, and Mary for an excellent suite of tooling that’s much more compact than the full ATProto API.