Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

バンドルおよびミニファイ・サポートの追加(ASP.NET 4.5シリーズ)

連載:ScottGu's Blog翻訳

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2011/12/15 14:00

 本稿は、Scott Guthrie氏のブログを、氏の許可を得て、翻訳、転載したものです。米Microsoft社の副社長で、ASP.NETやSilverlightの開発チームを統率する氏のブログでは、次期製品を含む最新の技術をいち早く紹介しています。

目次

 原典:New Bundling and Minification Support (ASP.NET 4.5 Series)

バンドルおよびミニファイ・サポートの追加(ASP.NET 4.5シリーズ)

 ASP.NET 4.5のブログ投稿シリーズで、今回は6回目になります。

 次期リリースの.NETおよびVisual Studioには、新機能が非常に多く含まれています。ASP.NET 4.5では、WebフォームとMVC、またそのどちらもの基盤となっているASP.NETコアも含め、非常に素晴らしい改善点が多く見られます。

 本日の投稿では、アプリケーションのパフォーマンス改善に役立つ、ASP.NETに追加されたバンドルおよびミニファイのビルトインサポートについてカバーします。この機能は、ASP.NET MVCおよびASP.NET Webフォームのソリューションを含むすべてのASP.NETアプリケーションで使用できます。

バンドルおよびミニファイの基礎

 Web検索にモバイルデバイスを使用する人が増えるにつれ、モバイル用に構築したWebサイトやアプリのパフォーマンスの重要性も高まってきます。スマートフォンでいろんなサイトのロードを試しましたが、携帯ネットワークを通じた遅いロードだけはフラストレーションに耐えきれずついにあきらめました。このように、サイトやアプリが遅くロードされるようなパフォーマンスが悪い場合には、せっかくの潜在顧客を逃すことになりかねません。強力なデスクトップマシンであっても、サイトのロード時間や見かけのパフォーマンスが、顧客の認識に大きく影響します。

 現在の多くのWebサイトは、問題の切り分けとコードベースをしっかり保つために、複数のJavaScriptやCSSファイルから構成されています。コーディングの観点からすればこれは優れた慣習なのですが、Webサイトの全体のパフォーマンスからすれば、残念な結果になるケースもしばしばです。複数のJavaScriptやCSSファイルは、ブラウザから複数のHTTPリクエストを要求し、これによりロード時間のパフォーマンスが悪くなってしまうのです。

簡単な例

 以下は、ローカルWebサイトをIE9で開いて、IEにビルトインされたF12開発者ツールを使用してネットワークのトラフィックを記録したものです。ご覧のとおりですが、Webサイトは5つのCSSと4つJavaScriptファイルから構成されており、ブラウザはこれらをダウンロードする必要があります。各ファイルは、現在ブラウザで別々に要求され、それぞれをサーバーが返しており、そのプロセスは、該当ファイルの数に応じて大幅な時間が取られます。

バンドル

 ASP.NETは、HTTPリクエストを少なくするために、複数のCSSやJavaScriptの『バンドル』または『組み合わせ』を簡単に行う機能を追加しています。これにより、ブラウザがファイルのリクエスト数を減少させ、ひいてはファイル取得時間を減少させます。以下は、上記のサンプルの更新バージョンで、この新しいバンドル(JavaScriptおよびCSSに対して1つずつのリクエストにする)機能を活用しています。

 これでブラウザは、サーバーに送るリクエストの数を減らせます。個々のファイルコンテンツは、同じレスポンス内にバンドル/組み合わせされますが、ファイルの内容は変わりません。そのため、全体のファイルサイズは、バンドルされる前とまったく同じです。ローカルの開発機(ブラウザとサーバー間のネットワークの待ち時間が最小のケース)であっても、CSSとJavaScriptファイルのバンドルは同じように全体のページロード時間を約20%減少させます。遅いネットワークを通じたパフォーマンス改善なら、より良い結果が得られます。

ミニファイ化

 ASP.NET次期リリースでも、コンテンツのダウンロードサイズの減少および『ミニファイ』が簡単になる新機能を追加しています。これは、空白文字、コメント、その他不必要な文字を、CSSおよびJavaScriptから削除するプロセスです。この結果、ファイルは小さくなり、ブラウズでのダウンロードやロードが速くなります。以下のグラフは、バンドルとミニファイが同時に使用された場合のパフォーマンス改善度合いを表しています。

 私のローカル開発機(ネットワークの待ち時間が最小のケース)上でも、現在では最初に比べ40%のパフォーマンス改善が行われています。遅いネットワーク(特に国外の顧客との)上では、さらに大幅な改善になるはずです。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • WINGSプロジェクト Chica(チカ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

バックナンバー

連載:Scott Guthrie氏 Blog翻訳

もっと読む

All contents copyright © 2005-2018 Shoeisha Co., Ltd. All rights reserved. ver.1.5