Vite ビルドで chunk size warning（500kB 超過）を消せない
Vite ビルド時の chunk size warning は、build.rollupOptions.output.manualChunks（Vite 8 では build.rolldownOptions.output.codeSplitting）でベンダーを分割するか、build.chunkSizeWarningLimit で閾値を引き上げて対処する。
公開: 更新:
要約
vite build の終わりに表示される Some chunks are larger than 500 kB after minification. の警告は、Vite が 1 チャンクの上限を 500kB（chunkSizeWarningLimit（新しいタブで開く） のデフォルト）に置いているために出ています。
実害があるなら manualChunks で分割、無視してよいなら閾値を上げます。
実行例
vite v6.4.3 で約 340 kB のモジュール 2 つを分割指定なしで束ねると、678.39 kB の 1 チャンクになって Some chunks are larger than 500 kB after minification. が出るが、ビルド自体は終了コード 0 で完了する。manualChunks で big-a / big-b に切り出すとチャンクが分かれて警告は消え、chunkSizeWarningLimit: 1000 にした版では同じ 678.39 kB の 1 チャンクのまま警告だけが出なくなった。
$ npx vite build
vite v6.4.3 building for production...
transforming...
✓ 5 modules transformed.
rendering chunks...
computing gzip size...
dist/index.html 0.13 kB │ gzip: 0.12 kB
dist/assets/index-CuNmzgFm.js 678.39 kB │ gzip: 18.21 kB
(!) Some chunks are larger than 500 kB after minification. Consider:
- Using dynamic import() to code-split the application
- Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/configuration-options/#output-manualchunks
- Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.
✓ built in 109ms
終了コード: 0$ npx vite build
vite v6.4.3 building for production...
transforming...
✓ 5 modules transformed.
rendering chunks...
computing gzip size...
dist/index.html 0.27 kB │ gzip: 0.18 kB
dist/assets/index-Ck0isTHW.js 0.87 kB │ gzip: 0.50 kB
dist/assets/big-a-CEfQYwxb.js 338.82 kB │ gzip: 8.80 kB
dist/assets/big-b-Dn672j3h.js 338.82 kB │ gzip: 8.80 kB
✓ built in 96ms
終了コード: 0（チャンクが分かれ、警告が消える）$ npx vite build
vite v6.4.3 building for production...
transforming...
✓ 5 modules transformed.
rendering chunks...
computing gzip size...
dist/index.html 0.13 kB │ gzip: 0.12 kB
dist/assets/index-CuNmzgFm.js 678.39 kB │ gzip: 18.21 kB
✓ built in 113ms
終了コード: 0（1 チャンクのままだが 1000kB 未満なので警告は出ない）— 2026-09-17 時点の出力
検証環境
- 検証日
- 実行環境
node:20Debian GNU/Linux 12 (bookworm)- バージョン
- Node.js 20.20.2
- npm 10.8.2
- Python 3.11.2
- Git 2.39.5
この記事の「実行例」は、上記の環境で実際にコマンドを実行して得られた出力をそのまま掲載しています。 再現手順はリポジトリの検証スクリプトとして管理し、定期的に再実行して出力を更新しています。
よくある原因
- vendor が 1 チャンクに巻き取られている: 多くの依存を同じ箇所で
importしていると Rollup が同じ初期チャンクにまとめてしまい、初回ロードが重くなる。 chunkSizeWarningLimitが未設定: Vite のデフォルト 500kB は小さめ。
SPA で十分許容できるサイズなら警告だけ消したいケースもある。- 動的 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 ドキュメント（新しいタブで開く））。
Vite 8 の場合: バンドラが Rolldown に替わり、上のオブジェクト形式の manualChunks はサポートされなくなった（関数形式も非推奨）。
そのまま vite build すると TypeError: manualChunks is not a function でビルドが失敗する。build.rollupOptions も build.rolldownOptions に改名されているので、Vite 8 では codeSplitting の groups でチャンクを分ける（Vite の移行ガイド（新しいタブで開く））。
import { defineConfig } from "vite";
export default defineConfig({
build: {
rolldownOptions: {
output: {
codeSplitting: {
groups: [
{ name: "react", test: /node_modules[\\/]react(-dom)?[\\/]/ },
{ name: "vendor", test: /node_modules[\\/](lodash-es|date-fns)[\\/]/ },
],
},
},
},
},
});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 化を検討してください。