Farm と Vite の dev, build 時間の比較

## この記事の概要

Farm という、Rust 製の Web ビルドツールが登場しました。

https://www.farmfe.org/

[v1.0 がリリースされたのが 2024 年 4 月 15 日](https://github.com/farm-fe/farm/releases/tag/v1.0)ということで、かなり新しいツールです。

Vite や Rspack と比較してもかなり速いことを謳っています。
自分の使い方だとどうなるのか気になり、試してみた記事です。

## 前提

私はデザイナーなので、コードを書くといっても見た目に関する部分がほとんどです。

CSS を書いたり、UI フレームワークを使ったり、画像を配置したり……。
なので、それらを追加したときにどれくらい立ち上げ時間に差が出るのかを中心に調べました。

:::note warn
本来であれば大規模プロジェクト相当のコード量、ファイル量で比較すべきかと思いますが、一旦小さな比較までしかできていません。
あまり役には立たないかもしれませんが、この規模でも多少差は見えてきたので一応投稿しています。
:::

## それぞれのバージョン

| Vite | Farm |
| --- | --- |
| 5.3.1 | 1.0.2 |

また、両者とも React プロジェクトで、パッケージマネージャーは npm で揃えてあります。

## プロジェクト作成直後

この時点で Farm の方がかなり速いです。

### dev

| | Vite | Farm |
| --- | --- | --- |
| 1 回目 | 174 ms | 81 ms |
| 2 回目 | 78 ms | 16 ms |
| 3 回目 | 78 ms | 15 ms |

### build

| | Vite | Farm |
| --- | --- | --- |
| 1 回目 | 296 ms | 157 ms |
| 2 回目 | 298 ms | 78 ms |
| 3 回目 | 297 ms | 78 ms |

## 3ページだけ追加

```tsx:PageX.tsx
import { useState } from 'react'
import './App.css'

function PageX() {
  const [count, setCount] = useState(0)

  return (
    <>
      <h1>Page X</h1>
      <div className="card">
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}
        </button>
      </div>
    </>
  )
}

export default PageX
```

### dev

| | Vite | Farm |
| --- | --- | --- |
| 1 回目 | 73 ms | 25 ms |
| 2 回目 | 74 ms | 24 ms |
| 3 回目 | 73 ms | 23 ms |

### build

| | Vite | Farm |
| --- | --- | --- |
| 1 回目 | 386 ms | 125 ms |
| 2 回目 | 377 ms | 93 ms |
| 3 回目 | 385 ms | 94 ms |

## MUI を追加して各ページに適用

```tsx:PageX.tsx
import { useState } from 'react'
import './App.css'
import Typography from '@mui/material/Typography';
import Box from '@mui/material/Box';

function PageX() {
  const [count, setCount] = useState(0)

  return (
    <>
      <h1>Page X</h1>
      <Box display="flex" flexDirection="column" gap={4}>
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}
        </button>
        <Typography
          variant="body2"
          align="center"
        >
          This is Page X
        </Typography>
      </Box>
    </>
  )
}

export default PageX
```

`dev`同士で比べると Farm の方が遅くなってしまっています。
ただし Vite は、`dev`の時間はほとんど変わらない割に、`build`が結構延びました。

### dev

| | Vite | Farm |
| --- | --- | --- |
| 1 回目 | 75 ms | 96 ms |
| 2 回目 | 73 ms | 92 ms |
| 3 回目 | 74 ms | 87 ms |

### build

| | Vite | Farm |
| --- | --- | --- |
| 1 回目 | 1.03 s | 297 ms |
| 2 回目 | 1.05 s | 187 ms |
| 3 回目 | 1.03 s | 181 ms |

## サイズの大きな画像を追加

```tsx:PageX.tsx
import { useState } from 'react'
import './App.css'
import Typography from '@mui/material/Typography';
import Box from '@mui/material/Box';
import image from "./assets/image.jpg"

function PageX() {
  const [count, setCount] = useState(0)

  return (
    <>
      <h1>Page X</h1>
      <Box display="flex" flexDirection="column" gap={4}>
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}
        </button>
        <Typography
          variant="body2"
          align="center"
        >
          This is Page X
        </Typography>
        <img src={image} alt=""/>
      </Box>
    </>
  )
}

export default PageX
```

Farm の`build`が徐々に延びています。

### dev

| | Vite | Farm |
| --- | --- | --- |
| 1 回目 | 74 ms | 102 ms |
| 2 回目 | 73 ms | 100 ms |
| 3 回目 | 73 ms | 88 ms |

### build

| | Vite | Farm |
| --- | --- | --- |
| 1 回目 | 1.07 s | 243 ms |
| 2 回目 | 1.06 s | 237 ms |
| 3 回目 | 1.06 s | 235 ms |

## ページ数を 10 に増加

### dev

| | Vite | Farm |
| --- | --- | --- |
| 1 回目 | 76 ms | 92 ms |
| 2 回目 | 74 ms | 102 ms |
| 3 回目 | 74 ms | 99 ms |

### build

| | Vite | Farm |
| --- | --- | --- |
| 1 回目 | 1.07 s | 238 ms |
| 2 回目 | 1.07 s | 240 ms |
| 3 回目 | 1.06 s | 243 ms |

## 各ページでローカル CSS ファイルを import

### dev

| | Vite | Farm |
| --- | --- | --- |
| 1 回目 | 75 ms | 96 ms |
| 2 回目 | 74 ms | 88 ms |
| 3 回目 | 79 ms | 97 ms |

### build

| | Vite | Farm |
| --- | --- | --- |
| 1 回目 | 1.05 s | 244 ms |
| 2 回目 | 1.06 s | 241 ms |
| 3 回目 | 1.05 s | 240 ms |

## 読み込む画像ファイルを増やす

どのページでも同じ画像を読み込んでいたのを、各ファイルごとに変えました。
Farm は画像ファイルが増えると時間が延びがちな印象があります。

### dev

| | Vite | Farm |
| --- | --- | --- |
| 1 回目 | 75 ms | 113 ms |
| 2 回目 | 74 ms | 128 ms |
| 3 回目 | 75 ms | 126 ms |

### build

| | Vite | Farm |
| --- | --- | --- |
| 1 回目 | 1.08 s | 364 ms |
| 2 回目 | 1.06 s | 354 ms |
| 3 回目 | 1.07 s | 365 ms |

## 最後に

こんなファイル数では検証といえる代物ではありませんが、Farm のビルドの速さはかなり良い開発体験になりそうです。

まだこれからアップデートもされていくでしょうし、今後の動向を見ておきたいツールでした。