Switch to esbuild for bundling

[Andarist]

No description provided.

[changeset-bot]

🦋 Changeset detected

Latest commit: 54cdcaf

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@changesets/action	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[Andarist]

I wanted to use Vite but I couldn't quickly figure out the correct set of options to bundle a node script alone, without index.html etc. cc @bluwy - you might know how to do that ;p

[bluwy]

Probably best to use esbuild directly. Personally Vite isn't the best or most flexible when bundling libraries.

[Andarist]

This here is not quite a library - it's an executable script. I was hoping to get better tree-shaking from Vite than from esbuild

[bluwy]

It has the same-ish issue with setting up bundling that too. I think esbuild is pretty good for this and treeshaking, but you could use rollup to match with vite's. Vite doesn't add anything on top of rollup that improves its treeshaking though.

[Andarist]

Right, I have just wanted to use Vite as a pre-configured Rollup in this case. FWIW, I ran an experiment with raw Rollup now and for gzip -c dist/index.js | wc -c I got 377840 -> 366375 improvement. That sits at 3% and given I had to put together multiple plugins manually... I think it's not quite worth it 📦

Config for reference:

import { defineConfig } from "rollup";
import commonjs from "@rollup/plugin-commonjs";
import nodeResolve from "@rollup/plugin-node-resolve";
import terser from "@rollup/plugin-terser";
import json from "@rollup/plugin-json";
import { transform } from "esbuild";

export default defineConfig({
  input: "src/index.ts",
  output: {
    dir: "dist",
    format: "esm",
  },
  plugins: [
    nodeResolve({
      preferBuiltins: false,
    }),
    json(),
    commonjs(),
    {
      name: "esbuild",
      async transform(code, id) {
        if (!/\.(mts|cts|ts|tsx)$/.test(id)) {
          return null;
        }
        const result = await transform(code, {
          loader: "ts",
        });
        return result.code;
      },
    },
    terser(),
  ],
});

[Andarist]

Actually, I might have to roll with the above if I want to test out ESM output. esbuild's ESM output doesn't quite work - from what I can tell... it doesn't even quite output ESM in my case, despite --format=esm 🤷

[Andarist]

And I got further with Vite but it just ignores both external and minify in this config. I don't know why

import { defineConfig } from "vite";

export default defineConfig({
  build: {
    ssr: true,
    lib: {
      entry: ["src/index.ts"],
      formats: ["es"],
    },
    minify: "terser",
    rollupOptions: {
      external: (id) => id.startsWith("node:"),
    },
  },
});