依存関係増えすぎて重くなった

最近、フロントエンドは専らreactを使用しています。
といっても、フロントは個人開発でしか触ったことがないので、現場レベルがどのようなものかはわかっていません。
だからと言って、個人開発は規模が小さくサクサクか、といわれるとそうでもありません。

むしろ、個人開発だからこそ、便利なモジュールを追加しまくって、依存関係が歪になっているかも。。。（私だけかもですねｗ）

そうなると、再デプロイするときの「yarn」コマンドがまあ時間かかること、、、

一気にどうにかしたい

調べてみると、ありました。

「depcheck」というものが便利のようなので早速使ってみました。
どこでも使えるように-gでinstallします。

npm install -g depcheck

完了すると、確認したいプロジェクト直下で下記を行うと、使用してない依存関係を出力してくれます。

C:\tool\git\napa-site-react\next>depcheck                                         
Unused dependencies
* @material-ui/core
* @types/gtag.js
* axios
* sharp
Unused devDependencies
* @typescript-eslint/parser
* autoprefixer
* postcss
* prettier

あとは取り除きたい依存をremoveしてあげるだけです。

yarn remove axios

テストを忘れずに

サクサク消したくなりますが、もしかすると、removeすることにより動かなくなるかもしれませんので、きちんと画面が動くかどうかはgitにpushする前に確認しましょう。
モジュールをたくさん入れちゃう、依存体質な貴方、試してみてください。