はじめに
フロント編と書きましたが、サーバーサイド編等の続きはないです。
話の落ちはご察しの通りになるかと思います。
この記事は マイナビ Advent Calendar 2020 の13日目の記事です。
恐らく、今年の弊社アドベントカレンダーの中で最も読む価値がない記事かと思われます。
時間の無駄だから読むなら暇なときにしような！
というかこういう記事ってQiitaに乗せて大丈夫なのか……？
導入らしきもの
フロントエンドの世界で戦う皆さん、PC購入の際に困ったことはありませんか。
まあMacの方はMacBookAirかMacBookProの一番高いカスタマイズを選ぶだけなので別に問題ないとは思うのですが、業務や宗教が理由でLinux or WindowsPCの使用を強いられている皆さんは、PC購入の際とあるパーツの選択にお困りになられているかと思います。
そう、PCの中核であるCPUです。
現在、x86アーキテクチャのCPUを提供している会社はIntelとAMDの二社が存在しており、傾向としてIntel製CPUがシングルスレッド性能、AMD製がマルチスレッド性能に優れています。
ゲーマーの方であれば、多くのゲームがシングルスレッド性能が重視される傾向にあるという話は有名な話なので迷うことはないかと思うのですが、果たしてコーディングではどうなのかという話はあまり聞きません。
そこで、今回はそこを調べてみようかと思います。
使用する機材
↑のようなことを言いましたが、正直なところイマドキ自作でIntelをご購入なさる人はよほどIntelに思い入れがある方だけなので(偏見)、私の手元にIntel製CPUはノートのものを除いて存在しません。
そこで、ちょうど記事のネタを考えたあたりで、私のクレカから数万円引かれる代わりに私の手元にRyzen5 5600Xが生えてきてくれたので、今回はこいつと数日前まで普段使いしていたRyzen7 3700Xを比較してみます。
この二つのCPU、性能はほぼ同じで、シングルスレッド性能はRyzen5 5600Xが、マルチスレッド性能ではRyzen7 3700Xが優れているという評価を受けているので、今回の題材にちょうどいい組み合わせかと思います。
(ただまあ、cpuクーラーとかケースのエアフローとかいろいろ異なるので、完璧なCPU性能の比較にならないことはご了承いただければと思います。)
具体的な利用機材は以下の通りです。
| 3700X | 5600X | |
|---|---|---|
| CPU | Ryzen7 3700X | Ryzen5 5600X |
| メモリ | DDR4-3200 CL22-22-22 1.2Volt | DDR4-3200 CL22-22-22 1.2Volt |
| SSD | CFD PCI-E Gen.4 x 4(NVMe 1.3) PG3VNFシリーズ 1TB | CFD PCI-E Gen.4 x 4(NVMe 1.3) PG3VNFシリーズ 1TB |
| マザーボード (PCIe Gen4効いてますよの証拠として) |
X570 Steel Legend | B550 ROG STRIX B550-I GAMING |
| GPU (関係ないとは思いますが一応) |
MSI RTX 2080 SUPER™ VENTUS OC | GIGABYTE RTX 3060Ti GAMING OC PRO |
おおむね性能が同程度のPCを用意できたかと。(XX万円したことを気にしてはいけない)
比較する
比較には、Vue.jsの開発ツールである vue-cli を用いたいと思います。
計測対象は、新規プロジェクト作成に至るまでの時間と、作成物のビルド時間とします。
本当はホットリロードの比較も行いたかったのですが、正確な時間が測れるかわからなかったので保留としました。
具体的な計測に用いるコマンドは以下の通りです。
新規プロジェクト作成
time make
create:
vue create foo -d
vue create bar -d
vue create baz -d
vue create hogehoge -d
vue create fugafuga -d
ソースコードのビルド
time make
build:
npm run build
npm run build
npm run build
npm run build
npm run build
結果
| 3700X | 5600X | |
|---|---|---|
| create project | real 3m31.132s | real 3m3.926s |
| build | real 0m26.106s | real 0m22.974s |
ビルドに関してはキャッシュされていたような気配を感じたのですが、おおむねこのような時間となりました。
完全に公正な比較とはいいがたいところがある比較ではあるのですが、おおむねシングルスレッド性能の方が重要なのではないかという仮説に至りました。
もっとも、ある一定のコア数があれば……みたいな前提がありそうな気はしますが。
ちなみに……(本題)
Viteを用いた場合このようになりました。
新規プロジェクト作成
time make vite
vite:
npm init vite-app foo
cp vite-makefile ./foo/makefile
cd foo; make
npm init vite-app bar
cp vite-makefile ./bar/makefile
cd bar; make
npm init vite-app baz
cp vite-makefile ./baz/makefile
cd baz; make
npm init vite-app hogehoge
cp vite-makefile ./hogehoge/makefile
cd hogehoge; make
npm init vite-app fugafuga
cp vite-makefile ./fugafuga/makefile
cd fugafuga; make
#filename is vite-makefile
vite:
npm i
ソースコードのビルド
time make
build:
npm run build
npm run build
npm run build
npm run build
npm run build
結果
| 3700X | 5600X | |
|---|---|---|
| create project | real 0m48.301s | real 0m38.698s |
| build | real 0m17.743s | real 0m17.449s |
はやい！(小並感)
CPUどうこう言う前に、ツール見直す方が先ですね。
(ViteはまだRC版なので会社では使えませんが)
最後に
なんだかんだ言いましたが、GPUと比べてCPUは低価格で上位機種を買いやすく、かつ交換がめんどくさいパーツランキング第二位に輝くので、その時に許される中で一番高いCPUを買うのが一番だと思います。
交換が面倒だとなかなか最新のものに更新しにくいのもあって、性能が低いCPUを買うと苦しみの期間が長くなりますし。
今 (2020/12/14) だと、Ryzen9系、もう少し待ってもよいならメモリがDDR5になる次の世代のRyzen君がおススメです。
Intel君は第12世代、第13世代あたりに期待しましょう。
まあおススメしといてあれですが、Ryzen9買えないんですけどね……Ryzen9 5900Xほしい……
(貯金的には買えるけど、物が出回ってないので買えない)