# バンドラー

`decidekit/browser` はワーカーを `new Worker(new URL("./worker.js", import.meta.url), { type: "module" })` で起動します。Vite、webpack 5、esbuild ベースのツールが認識するパターンです。

## Vite {#vite}

Vite 7.1 でテストしました。ビルドしてクロスオリジン分離で配信し、ヘッドレス Chrome 156 で実行しました（ゼロショットと訓練）。

```js
// vite.config.js
export default {
  worker: { format: "es" },
  optimizeDeps: { exclude: ["decidekit"] },
  resolve: {
    // Optional: drops onnxruntime's WebGPU JS, about 14.5 KB gzipped. Leave this out if you pass device: "webgpu".
    // This was documented as halving the wasm download; see the browser guide.
    alias: { "onnxruntime-web/webgpu": "onnxruntime-web/wasm" },
  },
};
```

クロスオリジン分離のヘッダーを開発サーバーとホストに追加してください。

```js
server: { headers: { "Cross-Origin-Opener-Policy": "same-origin", "Cross-Origin-Embedder-Policy": "credentialless" } },
```

## webpack 5 {#webpack-5}

webpack 5.112 で、パック済みのパッケージからテストしました。クロスオリジン分離で配信し、ヘッドレス Chrome で実行しました（ゼロショットと訓練）。設定なしで動き、webpack がワーカーを別のチャンクに分けます。任意のエイリアスで onnxruntime の WebGPU 用 JS を外せます。以前はこのエイリアスで wasm が 22.5 MiB から 12.3 MiB になると書いていました。

```js
// webpack.config.js
export default {
  experiments: { topLevelAwait: true }, // only if your own code awaits at the top level
  resolve: { alias: { "onnxruntime-web/webgpu$": "onnxruntime-web/wasm" } },
};
```

## Next.js {#next-js}

Next.js 16.4（Turbopack、App Router）で、`next build` と `next start` のあとヘッドレス Chrome でテストしました。`decidekit/browser` はクライアントコンポーネントの中で、ブラウザでのみインポートしてください。`useEffect` の中で動的 `import()` を使えば、サーバーレンダリングに入りません。

```js
// next.config.mjs
export default {
  turbopack: { resolveAlias: { "onnxruntime-web/webgpu": "onnxruntime-web/wasm" } },
  async headers() {
    return [{ source: "/:path*", headers: [
      { key: "Cross-Origin-Opener-Policy", value: "same-origin" },
      { key: "Cross-Origin-Embedder-Policy", value: "credentialless" },
    ] }];
  },
};
```

```js
"use client";
useEffect(() => {
  import("decidekit/browser").then(async ({ createWorkerDecider }) => {
    const d = await createWorkerDecider();
    // ...
  });
}, []);
```

webpack を使う Next.js（`next build --webpack`）はテストしていません。上の webpack のエイリアスが当てはまるはずです。

## バンドラーなしで {#without-a-bundler}

`npm run bench` は esbuild（同じエイリアス）で `bench/browser.js` と `bench/worker.js` をビルドします。これをコピーして静的ファイルとして配信できます。