Vite ビルドで chunk size warning（500kB 超過）を消せない

要約

vite build の終わりに表示される Some chunks are larger than 500 kB after minification. の警告は、Vite が 1 チャンクの上限を 500kB（chunkSizeWarningLimit のデフォルト）に置いているために出ています。
実害があるなら manualChunks で分割、無視してよいなら閾値を上げます。

よくある原因

1. vendor が 1 チャンクに巻き取られている: 多くの依存を同じ箇所で import していると Rollup が同じ初期チャンクにまとめてしまい、初回ロードが重くなる。
2. chunkSizeWarningLimit が未設定: Vite のデフォルト 500kB は小さめ。
   SPA で十分許容できるサイズなら警告だけ消したいケースもある。
3. 動的 import が無い: ルート単位の import() を使っていないと Rollup の auto code-splitting が効かず、すべて初期チャンクに入る。

解決策

1. manualChunks で vendor を分離

vite.config.ts で次のように設定します。

import { defineConfig } from "vite";
 
export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          react: ["react", "react-dom"],
          vendor: ["lodash-es", "date-fns"],
        },
      },
    },
  },
});

react / vendor という別チャンクに切り出されるため、初期 JS のサイズが下がり警告も消えます。
条件を細かく決めたい場合は関数版の manualChunks も使えます（Rollup ドキュメント）。

2. ルート単位の動的 import

React Router や Vue Router を使っているなら、ルートコンポーネントを lazy(() => import("./Foo")) に書き換えるだけで Rollup が自動分割してくれます。

import { lazy } from "react";
const Foo = lazy(() => import("./pages/Foo"));

3. 警告自体を上げる

ビルドサイズが要件を満たしているのに警告だけ目立つ場合は閾値を上げます（単位は kB）。

export default defineConfig({
  build: { chunkSizeWarningLimit: 1000 },
});

警告を消すだけでパフォーマンスは改善しない点に注意。
実体が大きい場合はまず manualChunks か lazy 化を検討してください。