はじめに
株式会社 Linc’well フロントエンド基盤チームです。
私たち基盤チームでは、定期的に開発基盤ライブラリのアップデートや改善を行っています。
今回は Prettier を v2 から v3 にアップデートし、さらに --experimental-cli を使用することで フォーマット処理を10倍以上高速化 できた事例をご紹介します。
フォーマット時間の課題
弊社の開発環境はpre-commit 時に自動でフォーマットを実行しています。
しかし、一部のメンバーから「コミットに時間がかかって使いにくい」という声が挙がっていました。
長期的な開発で走査対象のファイルが増えていたことも影響し、実際に計測すると 1 回のフォーマットに最長で 16.070 秒 かかっていました。
この待ち時間がコミットフロー全体に影響し、開発体験を損なう要因となっていました。
そこで、フォーマットを pre-commit から外し、各自のタイミングでエディタによる自動フォーマットや npm scripts から実行する方法に切り替えていました。
アップデートのきっかけ
上記の課題に加えて、開発環境のPrettier のアップデートが出来ておらず、長い間 v2 を使い続けていました。
直近のプロジェクトで「開発基盤のライブラリを見直す」作業を進めており。その際に @prettier のmaintainer の方の投稿が目にとまりました。
「experimental-cli でフォーマットが高速化する」という主旨で、弊社環境でも試してみたいと思いアップデートを行いました。
なお Prettier v3 には一部破壊的変更があるとのことでしたが、弊社の開発環境では特に該当する部分はなく、スムーズに移行できました。
実施内容
アップデート作業としては以下の 2 点です。
-
prettierパッケージを v3 系にアップデートし、必要な plugin 設定を追加 -
npm scripts実行時に-experimental-cliフラグを付与
実行結果：速度比較
実際に --experimental-cli を有効にして実行した結果がこちらです。
| CLI | 実行時間 | CPU 使用率 |
|---|---|---|
| Prettier v2 | 16.070 秒 | 173% |
| Prettier v3 Experimental CLI | 1.438 秒 | 215% |
結果、約 11 倍の高速化 🚀 を確認できました。
仕組みについて
公式ドキュメントによると、--experimental-cli はキャッシュを積極的に利用する仕組みになっており、1 回目の実行後はキャッシュにより大幅に速度が向上します。
そのほかにも、ファイル探索のコストを削減しているなど、さまざまなアップデートがされているようです 👏
なお、CI などの環境ではキャッシュが存在しないため速度は変わりません。
しかし ローカルでのチェックが圧倒的に高速化され、開発体験が大幅に改善 しました。
まとめ
- Prettier v2 → v3 へのアップデートと
-experimental-cliの導入で 11 倍の速度改善 を実現 - ローカルでの開発体験が劇的に向上
今回の対応により、フォーマットの待ち時間がほぼ解消され、開発体験が大きく向上しました。
みなさんも機会があれば、ぜひお試しください。
弊社ではフロントエンドエンジニアを積極的に採用しています。
コードの負債解消に取り組んでおり、非常にやりがいのある時期です。
医療ドメインに興味のある方は、ぜひ採用ページもご覧ください。
ありがとうございました。
Discussion