Chromeで不要なCSS/JavaScriptを洗い出す

こんにちは!
開発部の武内です。

Webフロントエンドの開発はここ数年で急激に高度化していますが、
それを大きく後押ししている一因にブラウザ付属の開発ツールがあります。

Chrome、Firefox、Edge、Safariなどに付属していますが、どれも非常に高機能です。
Webフロントエンドエンジニアで使っていない方はいないのではないでしょうか。

  • グラフィカルなデザイン調整
  • コードのステップ実行
  • 通信のロギング
  • etc…

今回、Chrome 59のアップデートでCSS/JavaScriptのカバレッジ機能が追加されたので試してみました。

CSS and JS code coverage

What’s New In DevTools (Chrome 59)

Find unused CSS and JS code with the new Coverage tab. When you load or run a page, the tab tells you how much code was used, versus how much was loaded. You can reduce the size of your pages by only shipping the code that you need.

ページロード時に実行をトレースして使用されたコードを確認できるようですね。

Chromeの更新

Chromeを59に更新します。
普段からChromeを使用している方は自然と更新されているかと思いますが、
更新されていない場合は 設定→ヘルプ→Google Chromeについて から更新します。
2017/06/26現在の最新バージョンは59.0.3071.109でした。

お試しコード

以下のように作成しました。

カバレッジ機能

設定→その他のツール→デベロッパーツール を開き、
下部 Console の左のメニューから Caverage を選択してCaverageタブを追加します。

chrome_cava01

左側のレコードボタンを押してトレースを開始します。

chrome_cava02

この状態でページにアクセスします。

chrome_cava03

コードは想定通りに動きました。
レコードボタンを再度押すと結果が表示されます。

chrome_cava04

緑が使用、赤が未使用を表します。

chrome_cava05

どの行が実行されているかも確認できます。
JavaScriptはnot_execute()が実行されておらず、

chrome_cava06

CSSはBlueが実行されていません。
つまりこれらは無駄なコードということになります。

おわりに

クライアントサイドにおいてはコードのダウンロードが大きな実行時間を占めることもあります。
この機能を使い、自社サイトのコードの棚卸しなんか良いかもしれませんね。

皆さまの快適なWebフロントエンド開発の一助になれば幸いです。