Careerライブラリ整理をもっと快適に!依存モジュールとそのファイルサイズを可視化する「source-map-explorer」いなば2017.01.25Web制作フロントエンドShareこんにちは、フロントエンドエンジニアのいなばです。漬けの生活を送っています。久々に新規の開発案件に携わっていることもあり、なかなか楽しいです。そのファイルサイズを可視化するのに便利なツール「source-map-explorer」をご紹介します。アプリケーションの開発・運用は、長期に渡るうえ、規模感も大きいのでソースコードのサイズが大きくなりがちです。運用や改修をしていくうちに、「昔は使ってたけどいつの間にか使わなくなってしまったライブラリ」などが出てくることもしばしば。それらのファイルサイズを、数値だけではなくビジュアルで確認できると、定期的なチェックが楽になります。ファイルのソースマップを解析し、依存モジュールのファイルサイズやその割合などを可視化するためのツールです。使い方まずはインストールします。コマンドを実行するだけです。実行結果のサンプルを確認することができます。ファイル(非圧縮)で実行してみると、このような画面が立ち上がりました。大きくて3割強も陣取っています。ポリフィルしてくれているコードのサイズや割合も確認できました。ファイル(圧縮済み)のソースマップも解析してみました。ファイル(非圧縮)のソースマップも解析してみました。アプリの場合、moment.jsのlocaleファイルをすべて読み込んでしまっているのでファイルサイズを削減できる余地がありそうです。パッケージマネージャーが広まり、外部モジュールを気軽に追加できるようになりましたが、いつのまにかJavaScriptファイルが不必要に肥大化していかないよう、定期的にチェックする習慣をつけなければなぁ、と思いました。LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。このメンバーの記事をもっと読むフロントエンドエンジニアのいなばです。LIGではAngularやVueなどのフレームワークを使った中~大規模のWebアプリケーション開発、フロントエンドエンジニアの育成などを担当しています。好きなものはカフェインとカプサイシン。趣味はランニングと一眼レフです。PopularPR連載一覧イベント情報Web制作デザインTechnologyAIオウンドメディアSEO対策アプリ開発システム。