前置き
Nuxt 3 のベータ版があったので調べてみようと思いました。
Nuxt 3 - Installation (nuxtjs.org)
依存パッケージのインストールには npm か yarn を使いますが、マニュアルでは先にコマンドが紹介されている yarn のほうを推奨しているように見えます。
そこで Nuxt の中身を見る前に、先にどのパッケージマネージャを使うか決めたいと思います。
node 周りを触るのは久しぶりで、npm は激重、yarn は速くて快適という先入観があるのですが、最近は npm も成長しているそうです。
npmとyarnとpnpmの違い2021 (zenn.dev)
相変わらず速度については npm がビリのようですが、思ったより差がなくなってるなぁという印象です。
また機能面は npm が yarn を真似て、こちらも似通ってきているようです。
速度面については興味があるので npm と yarn で簡単な比較をしてから、どちらを使うか判断することにしました。pnpm とかいうのは今回はスルーします。
ちなみに Nuxt については数年前に少し触ったことがあるだけでほとんど何もわかりません。
環境
- コンピュータ
-
- Ubuntu 20.04 @ WSL2 on Windows 10 Home
- Intel Core i7-1160G7 @ 1.20GHz 2.11 GHz
- RAM 16GB
- Node.js 関連
-
- node 16.13.1
- npm 8.3.2
- yarn 1.22.15
速度比較
計測方法
npm と yarn でキャッシュ無し・有りのインストールを5回ずつ行い、それぞれの平均秒数と中央値を出しました。
# (1) Nuxt の新規プロジェクトを作成
$ npx nuxi init nuxt3-app
# (2) 依存パッケージのインストール時間計測
$ cd nuxt3-app ; time npm -i # npm
$ cd nuxt3-app ; time yarn # yarn
# (3) プロジェクトとキャッシュの削除
## キャッシュ無しの場合
$ cd .. ; rm -rf nuxt3-app ~/.npm # npm
$ cd .. ; rm -rf nuxt3-app ~/.cache/yarn # yarn
## キャッシュ有りの場合
$ cd .. ; rm -rf nuxt3-app # npm/yarn
# (1)に戻る
新規プロジェクトの初回インストール時のみの比較なので、node_modules や lockfile の有無といったややこしい話は無しで、計測のたびにプロジェクトごと削除して実行し直しました。
結果
| （単位：秒） | キャッシュ無し：平均値 | キャッシュ無し：中央値 | キャッシュ有り：平均値 | キャッシュ有り：中央値 |
|---|---|---|---|---|
| npm | 80.51 | 79.80 | 19.95 | 19.85 |
| yarn | 56.28 | 51.03 | 25.34 | 23.43 |
| npm - yarn | +24.23 | +28.77 | -5.39 | -3.58 |
キャッシュ無しだと yarn のほうが1.5倍速い感じです。
一方キャッシュ有りだと意外にも npm のほうが速かったです。
上で紹介されている記事とは異なる結果ですが、バージョンが上がったおかげでしょうか。
どちらを使うか
今回は npm にします。
yarn は速くて素敵ですが、v1系がクラシック扱いで今はv3がアクティブなのと、そのv3だと依存パッケージのインストールが失敗するのでもう少し様子を見ようと思います。