はじめに
こんにちは！POMです。
React×TypeScriptのWebアプリを個人開発している際に
ビルドを実行したところ、表題の警告が出ましたので、
そちらの解消方法を残します。
問題
npm run buildを実行すると下記警告が表示されました。
[plugin builtin:vite-reporter]
(!) Some chunks are larger than 500 kB after minification. Consider:
- Using dynamic import() to code-split the application
- Use build.rolldownOptions.output.codeSplitting to improve chunking: https://rolldown.rs/reference/OutputOptions.codeSplitting
- Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.
チャンクのサイズが500kBを超えている、といったようなことが書かれていますね。
チャンクとは？については以下の記事が
参考になりましたので、別途ご参照ください。
記事を見ると
プロジェクトで多くのサードパーティライブラリを利用している場合、これらのライブラリがすべて1つのバンドルにまとめられる
といったようなことが書いてあり、
今回のWebアプリではSupabaseやRechartsなどを導入しているので、そのあたりが影響しているかと思われます。
ちなみに当該記事内にある「SplitVendorChunkPlugin」というプラグインはVite v7で削除されたようです。
https://vite.dev/blog/announcing-vite7
解決方法
まずは下記記事を参考にして、チャンクのサイズを可視化できるrollup-plugin-visualizerをインストールしてみました。
stats.htmlをブラウザで開くと以下のような表示になりました。
また、ビルド実行時のターミナルの内容を見ると
npm run build
> bilog@0.0.0 build
> tsc -b && vite build
vite v8.0.3 building client environment for production...
✓ 3557 modules transformed.
computing gzip size...
dist/index.html 0.45 kB │ gzip: 0.29 kB
dist/assets/index-CcbqHAk8.css 62.30 kB │ gzip: 11.14 kB
dist/assets/index-BALslL4W.js 1,154.58 kB │ gzip: 338.55 kB
index.jsに1,154kB（約1.15MB）が全部入っており、500kBを超過しています。これが警告の原因のようです。
さて、今回の警告文には3つの対処法が書かれています。
- Using dynamic import() to code-split the application
- Use build.rolldownOptions.output.codeSplitting to improve chunking: https://rolldown.rs/reference/OutputOptions.codeSplitting
- Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.
今回は対処法の2つ目に書かれていたリンクにアクセスし、その中の情報を参考に、チャンクサイズが比較的大きいreact-vendor、recharts、supabaseを分割するよう修正しました。
▼ 修正後のvite.config.ts
/// <reference types="vitest/config" />
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tailwindcss from "@tailwindcss/vite";
import path from 'path'
import { visualizer } from "rollup-plugin-visualizer";
// https://vite.dev/config/
export default defineConfig({
plugins: [react(), tailwindcss(), visualizer({
filename: 'dist/stats.html',
gzipSize: true,
brotliSize: true,
})],
test: {
environment: 'jsdom',
globals: true,
setupFiles: ['./vitest-setup.ts'],
},
resolve: {
alias: {
'@': path.resolve(__dirname, './src'),
},
},
build: {
rolldownOptions: {
output: {
codeSplitting: {
groups: [
{ name: 'react-vendor', test: /node_modules\/(react|react-dom|react-router-dom)/, minSize: 20000 },
{ name: 'recharts', test: /node_modules\/recharts/, minSize: 20000 },
{ name: 'supabase', test: /node_modules\/@supabase/, minSize: 20000 },
],
},
},
},
},
});
修正後にビルドを実行したところ、警告は出なくなり、stats.htmlが以下のように変わりました。
ターミナル上では下記になりました。
npm run build
> bilog@0.0.0 build
> tsc -b && vite build
vite v8.0.3 building client environment for production...
✓ 3557 modules transformed.
computing gzip size...
dist/index.html 0.78 kB │ gzip: 0.38 kB
dist/assets/index-CcbqHAk8.css 62.30 kB │ gzip: 11.14 kB
dist/assets/rolldown-runtime-Dw2cE7zH.js 0.68 kB │ gzip: 0.41 kB
dist/assets/supabase-BCOw5cc5.js 183.28 kB │ gzip: 47.53 kB
dist/assets/recharts-BN4yGdI4.js 308.24 kB │ gzip: 92.11 kB
dist/assets/index-Bykm05PW.js 320.46 kB │ gzip: 90.01 kB
dist/assets/react-vendor-BslU8ThR.js 340.56 kB │ gzip: 108.11 kB
recharts (308kB)とreact-vendor(340kB)だけでも648kBあったようですね。
一部の参考記事に書かれているmanualChunksオプションは現在は非推奨となっています。
https://ja.vite.dev/guide/migration
オブジェクト形式の output.manualChunks オプションはサポートされなくなりました。関数形式の output.manualChunks は非推奨です。Rolldown にはより柔軟な codeSplitting オプションがあります。
今回は上記方法にて警告が解消したため試していませんが、
1つ目の対処法については下記記事が参考になりそうですので、
記載しておきます。
おわりに
情報が古かったりして、明確な解消方法がなかなか見つからず
苦戦しました・・・。
警告レベルなので必ずしも解消しなくてもアプリの動作自体はできていたのですが、パフォーマンス等を考えると解消しておいて損はなさそうです。
その他の参考記事
JISOUのメンバー募集中！
プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
興味のある方は、ぜひホームページをのぞいてみてくださ！
▼▼▼