🔁
ReactRouterからTanstackに変えたら...サイズが増えた
こんにちは。
今日はReactを使っていて、Routingライブラリを変更したらどれぐらいサイズが変わるかを美貌として残しておきます。
Tl;Dr
ただただそのままReactRouterからTanstackReactRouterへ切り替えてもサイズは減らない（むしろ増える）
※有識者の人いたらアドバイスください・・・
前提・構成
今回私が作ったプロジェクトは、Vite+React+Typescript+Yarn+Tauri+ReactRouterV7を使っています。
package.jsonの抜粋は以下です。
"dependencies": {
"@chakra-ui/react": "^3.4.0",
"@emotion/react": "^11.14.0",
"@tauri-apps/api": "^2",
"@tauri-apps/plugin-global-shortcut": "~2",
"@tauri-apps/plugin-opener": "^2",
"@tauri-apps/plugin-shell": "~2",
"framer-motion": "^12.0.0",
"next-themes": "^0.4.4",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-icons": "^5.4.0",
"react-router": "^7.1.3",
"react-router-dom": "^7.1.3"
},
これをReactRouterV7を使っていますが、これをTanstackのreact-routerに変えてみます。
現状
Reactビルドサイズ
tauriを使っているので、ビルドすると500KBを超えているメッセージが出てますね。
PS XXXXXX\XXXXXX> yarn tauri build
yarn run v1.22.21
$ tauri build
Running beforeBuildCommand `yarn build`
$ tsc && vite build
vite v6.0.7 building for production...
✓ 1341 modules transformed.
dist/index.html 0.41 kB │ gzip: 0.28 kB
dist/assets/logo-BWJLI7mO.webp 215.06 kB
dist/assets/event-DiRef1qP.js 1.01 kB │ gzip: 0.56 kB
dist/assets/table-C1Q0xwUD.js 1.03 kB │ gzip: 0.60 kB
dist/assets/Config-DqM8BFmw.js 1.81 kB │ gzip: 0.61 kB
dist/assets/v-stack-DRcC_7v-.js 4.71 kB │ gzip: 1.96 kB
dist/assets/Server-BfcAMPyH.js 9.21 kB │ gzip: 3.12 kB
dist/assets/Data-23ygTvRc.js 15.36 kB │ gzip: 5.25 kB
dist/assets/toaster-Cj5LYbAW.js 28.98 kB │ gzip: 10.09 kB
dist/assets/Home-WIcUgIRn.js 30.99 kB │ gzip: 9.09 kB
dist/assets/proxy-CbYB3rFh.js 113.06 kB │ gzip: 37.29 kB
dist/assets/index-RUu7-9_O.js 577.98 kB │ gzip: 170.59 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.
Tauriビルドサイズ
TauriでのEXEビルドサイズは以下です。12.5MB程度ですね。
Reactのコード
ReactRouterV7を使っているので以下のようなコードにしています。
const Home = React.lazy(() => import("./components/pages/Home"));
const Config = React.lazy(() => import("./components/pages/Config"));
const Server = React.lazy(() => import("./components/pages/Server"));
const Data = React.lazy(() => import("./components/pages/Data"));
<Suspense fallback={<div>Loading...</div>}>
<Routes location={location} key={location.pathname}>
<Route path="/" element={<Home />} />
<Route path="/config" element={<Config />} />
<Route path="/server" element={<Server />} />
<Route path="/data" element={<Data />} />
</Routes>
</Suspense>
一応、スプリットのためにLazyLoadもしています。
TanStackへの切り替え
では、ReactRouterからtanstackrouterに切り替え作業をします。
依存関係追加・削除
React-routerを削除し、tanstackrouterを追加しました。
yarn add @tanstack/react-router
yarn remove react-router react-router-dom
->そのあとnode_modulesとyarn.lockの削除
yarn
Reactビルド
そのあとビルドしました。
PS XXXXX¥XXXXX> yarn tauri build
yarn run v1.22.21
$ tauri build
Running beforeBuildCommand `yarn build`
$ tsc && vite build
vite v6.1.0 building for production...
✓ 1408 modules transformed.
dist/index.html 0.41 kB │ gzip: 0.29 kB
dist/assets/logo-BWJLI7mO.webp 215.06 kB
dist/assets/table-BzIu4k9p.js 1.00 kB │ gzip: 0.60 kB
dist/assets/event-CCwVRTJS.js 1.01 kB │ gzip: 0.55 kB
dist/assets/Config-5lCStnd5.js 1.79 kB │ gzip: 0.60 kB
dist/assets/v-stack-XjvDujSR.js 4.66 kB │ gzip: 1.94 kB
dist/assets/Server-DOfOKHdL.js 9.18 kB │ gzip: 3.11 kB
dist/assets/Data-BfR1ObTG.js 15.33 kB │ gzip: 5.24 kB
dist/assets/toaster-Bth_ZaoG.js 28.90 kB │ gzip: 10.04 kB
dist/assets/Home-Db9Omj9c.js 30.93 kB │ gzip: 9.10 kB
dist/assets/proxy-DjUE9C5X.js 113.85 kB │ gzip: 37.52 kB
dist/assets/index-B3LZa3yM.js 606.77 kB │ gzip: 179.42 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.
サイズ増えちゃってますね。。。
Tauriビルド
Tauriでビルドしてみます。
（当然ですが）こっちも若干ですがサイズ増えてます。
Reactのコード変換部分
ReactRouterの時と同じようにLazyLoadなどをしています。
const Home = React.lazy(() => import("./components/pages/Home"));
const Config = React.lazy(() => import("./components/pages/Config"));
const Server = React.lazy(() => import("./components/pages/Server"));
const Data = React.lazy(() => import("./components/pages/Data"));
const rootRoute = createRootRoute({
component: () => (
<Layout>
<AppProvider>
<Suspense fallback={<div>Loading...</div>}>
<Outlet />
</Suspense>
</AppProvider>
</Layout>
),
});
const homeRoute = createRoute({
getParentRoute: () => rootRoute,
path: "/",
component: Home,
});
おまけ
Tanstackへの切り替えに際して以下を変更しています。（結局戻しましたが）
リンク
リンクで以下の記載をしていました。
<ChakraLink asChild>
<ReactRouterLink to="/">
<CiHome />
Home
</ReactRouterLink>
</ChakraLink>
ここのインポートはReact-router-domからしていましたが、tanstackからImportするようにしました。
import { Link as ReactRouterLink } from "react-router-dom";
Navigate
処理後のページ遷移をnavigateを使っていましたが、ここも若干記法が異なっています。
Reactrouter
navigate("/server");
tanstack/react-router
navigate({ to: "/server" }); // 遷移先を指定
感想
モジュールの数が60個ぐらい増えてます。
このあたりかなぁとか思いましたが、いろいろ見るのもあれ何でいったん戻しました。ちゃんちゃん
※すみません、アドバイスあればください。。。
※あと表記ゆれも書きなぐりなので見逃してください・・・
Discussion