🔁

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

2025/02/09に公開

こんにちは。
今日は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を使っていましたが、ここも若干記法が異なっています。

Reactrouter

    navigate("/server");

tanstack/react-router

    navigate({ to: "/server" }); // 遷移先を指定

感想

モジュールの数が60個ぐらい増えてます。
このあたりかなぁとか思いましたが、いろいろ見るのもあれ何でいったん戻しました。ちゃんちゃん
※すみません、アドバイスあればください。。。
※あと表記ゆれも書きなぐりなので見逃してください・・・

Discussion