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

この記事の概要

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

v1.0 がリリースされたのが 2024 年 4 月 15 日ということで、かなり新しいツールです。

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

前提

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

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

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

それぞれのバージョン

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ページだけ追加

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 を追加して各ページに適用

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

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

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 のビルドの速さはかなり良い開発体験になりそうです。

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