🔁
ReactRouterからTanstackに変えたら...サイズが増えた

2025/02/09に公開
React
こんにちは。

今日は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個ぐらい増えてます。

このあたりかなぁとか思いましたが、いろいろ見るのもあれ何でいったん戻しました。ちゃんちゃん

※すみません、アドバイスあればください。。。

※あと表記ゆれも書きなぐりなので見逃してください・・・
Tl;Dr

前提・構成

現状

Reactビルドサイズ

Tauriビルドサイズ

Reactのコード

TanStackへの切り替え

依存関係追加・削除

Reactビルド

Tauriビルド

Reactのコード変換部分

おまけ

リンク

Navigate

感想

Discussion
