Logo

Knipで不要なライブラリやデッドコードを検知して開発の無駄を減らす

Knipについてご紹介します

最近いくつかのプロジェクトでKnipを導入してみて良いなと思ったので共有したいと思います。

Knipとは

公式サイト:https://knip.dev/

Knip finds unused files, dependencies and exports in your JavaScript and TypeScript projects. Less code and dependencies lead to improved performance, less maintenance and easier refactorings.

https://github.com/webpro-nl/knip

と記載がある通り、未使用ファイルや依存ライブラリ、exportなどの構文を検知してくれるライブラリです。スクリプトとして実行できるためGithub ActionsなどのCIに組み込んで検知を自動化できます。

導入方法

ライブラリを追加

npm init @knip/config

上記コマンドでknip及び必要なライブラリを自動で追加してくれます。(スクリプトも追加されます)

具体的にはtypescript@types/nodeが依存ライブラリとして追加されます。

実行

追加されたスクリプトを実行します。

npm run knip

実際このブログのレポジトリで実行してみると以下のようになりました。

shadcn-uiでインストールしたuiコンポーネントが一部使われず残っていることが分かりました。

修正

検出されたファイルを確認し修正をします。

場合によっては検出されたがそのままにしておきたいケースがあると思います。例えば、Graphqlで自動的に生成されたコードやデバッグ時に使うライブラリで恒常的に使うわけではないdevDependenciesなどです。この場合は、設定ファイルを別途作成してignore, ignoreDependencies等を使って明示的に無視すると良いでしょう。

設定ファイルについては以下の記事が参考になります。

修正後

無事、検出されるファイルがなくなりました。

最後に

Knipは導入も簡単で自動化にも適したライブラリです。この手の最適化は人力では難しい領域かつ放置しがちなものだと思うのでライブラリを使って対応していく、が最適解かなと思いました。

その他の参考記事