SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

Scott Guthrie氏 Blog翻訳

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

連載:ScottGu's Blog翻訳

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

 本稿は、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%のパフォーマンス改善が行われています。遅いネットワーク(特に国外の顧客との)上では、さらに大幅な改善になるはずです。

会員登録無料すると、続きをお読みいただけます

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

次のページ
ASP.NET内でのバンドルおよびミニファイの使用

この記事は参考になりましたか?

  • このエントリーをはてなブックマークに追加
Scott Guthrie氏 Blog翻訳連載記事一覧

もっと読む

この記事の著者

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

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

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

Scott Guthrie(Scott Guthrie)

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/6307 2011/12/15 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング