import / require文で読み込む3rd party libraryのコストを表示してくれるVSCode extension。3年も前からあったのにまったく知らなかったな〜
完璧な分析ツールを目指しているわけではなく「開発中に明らかな問題に気づくためのものが必要（webpack-bundle-analyzerなどは素晴らしいけど見落とされがちなので）」というモチベーション。
asset bundleを分析するならもっと良いツールを使ってくれとのこと。
Vim pluginもあるらしい。
GitHub - yardnsm/vim-import-cost: 🏋️♂️ Display the import size of the JavaScript packages in Vim!
仕組み
どうやって計算しているのかなと思ったら作者によって解説されていた。
- ファイルの変更を検知する
- Typescript / Babylon AST parserで有効なimport/require文のリストを得る
- 3rd partyライブラリに関するimport or require の行をtmp fileとして書き出す
- このtmp fileをentrypointとしてWebpackを走らせる
- compile結果のstatsからサイズを取得して表示する
コードはこのへん。
面白い！
High CPU Load問題
僕はまだ遭遇していないのだけど、依存しているbabel-minify-webpack-pluginのためにCPU使用率が高くなる問題が報告されているのはちょっと気になる。このplugin自体はすでにdeprecatedなのでそのうちterser-webpack-pluginに移行されるかもしれないが、放置され気味なのでどうだろう…。
This article corresponds to the 8th day of ohbarye Advent Calendar 2020.
