ホーム > ASP.NET, インフラ, モバイル > ASP.NET 4 WebFormでモバイルサイトを作成する場合のスクリプト結合

ASP.NET 4 WebFormでモバイルサイトを作成する場合のスクリプト結合


これはOne ASP.NET Advent Calendar 2012の12/17日分の記事となります。前回の記事はnobuhisaさんの「知っている人は知っている、知らない人は知らない『NDjango』」です。次回の記事はnakamura_toさんです。

。。。やべっす。書くネタが無いです。ASP.NETといっても、いろいろありますが基本WebFormしか触っていないので、ちょうど都合よく発生した、お仕事で困ったことで逃げるとします。

スクリプトがいっぱい

少し前ですがWebFormとjQueryMobile、knockoutを基盤に使ったシステムの開発方針を決めたことがあります。もともと単純な機能しか利用しないし画面もそう多くないのででさらっと作れればいいよーという話だったので、メンテナンス性を考え、ページはViewModel毎に1つのJavascriptファイルと、ViewModelが利用するサービスクラスが名前空間毎にファイルを分けて作成することにしました。

開発が終盤になり、なんとなくソリューションを覗いてみたら、画面や機能はどんどん追加され、Javascriptだけでも40以上がマスターページに登録されていました。

スクリプトのロードを早くしたい

ASP.NETでjQueryMobileなページを作成する場合、どのページからランディングされても動くように、マスターページ側でそのサイトで利用する全てのスクリプトをロードさせます。このため、初めてのそのサイトにアクセスの場合は、数十のスクリプトがロードされることになり、場合によってはそれなりにロード時間がかかります。

Fiddlerでネットワーク帯域のエミュレートをしながらダウンロードを調査してみました。Fiddlerでのネットワーク帯域の制限方法はココが参考になります(→Android開発で3G回線速度を再現する)。近頃のモバイルネットワークは高速ですが、今回は下りが大体512kbpsぐらいに制限して調査してみます。

image image

タイムラインは下のほうが切れてしまっていますが、ページ全体で758KBの読み込みで、2.8秒の時間がかかっています。

ASP.NET 4 WebFormでの解決案

ASP.NET 4.5では、System.Web.Optimization名前空間を使った便利な仕組みがあるようなのですが、ASP.NET 4な環境では使えません。チャックさんのJavaScript / CSS ファイルの自動縮小・結合処理: ASP.NET MVC 4 新機能シリーズがわかりやすいです。

ASP.NETでは古くからのScriptMangerコントロールにも、スクリプトの結合機能(クライアント スクリプトを複合スクリプトに結合)があります。今回はScriptManagerのスクリプト結合機能を利用してjQueryやknockout, jQueryMobileのスクリプトを結合することでスクリプトのロードが早くなるかを検証します。

ScriptManagerのCompositeScript機能を利用したスクリプトの結合

まずはマスターページを開いて、ScriptManagerを追加します。

今回、ASP.NET AJAX関連JavaScriptは読み込む必要は無いのでAjaxFrameworkModeをDisabledに変更しています(あっ、ScriptManagerはrunat=”server”なformの中に置きましょうね。ココの記事ではformを消してしまいましたが、無いと上手く動いてくれません)。

<asp:ScriptManager runat="server" AjaxFrameworkMode="Disabled">
<CompositeScript>
    <Scripts>
        <asp:ScriptReference Path="~/Scripts/json2.min.js"/>
        <asp:ScriptReference Path="~/Scripts/jquery-1.7.2.min.js"/>
        <asp:ScriptReference Path="~/Scripts/jquery.validate.min.js"/>
        <asp:ScriptReference Path="~/Scripts/knockout-2.1.0.js"/>

        <asp:ScriptReference Path="~/Scripts/jquery.mobile-1.1.0.min.js"/>
        <asp:ScriptReference Path="~/Scripts/jquery.mobile.datebox.min.js"/>
        <asp:ScriptReference Path="~/Scripts/jquery.mobile.datebox.i8n.jp.js"/>
    </Scripts>
</CompositeScript>
</asp:ScriptManager>

さて実行するとどうなるかな?。。。。。。ありゃ、Javascriptのエラーが出ちゃいました。どうもjson2が上手く読み込めていない様子なので、外に出してあげます。

image

マスターページのコードはこうなりました。

<%@ Master Language="VB" AutoEventWireup="false" CodeBehind="Site1.master.vb" Inherits="WebApplication6.Site1" %>
<!DOCTYPE html>
<html>
<head runat="server">
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=5.0,user-scalable=yes"/>
    <link href='~/Content/jquery.mobile-1.1.0.min.css' rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src='<%= ResolveClientUrl("~/Scripts/json2.min.js") %>'></script>
    <asp:ContentPlaceHolder ID="Head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form runat="server">
    <asp:ScriptManager runat="server" AjaxFrameworkMode="Disabled">
        <CompositeScript>
            <Scripts>
                <asp:ScriptReference Path="~/Scripts/jquery-1.7.2.min.js"/>
                <asp:ScriptReference Path="~/Scripts/knockout-2.1.0.js"/>

                ... 略 ...

                <asp:ScriptReference Path="~/Scripts/jquery.mobile-1.1.0.min.js"/>
                <asp:ScriptReference Path="~/Scripts/jquery.mobile.datebox.min.js"/>
                <asp:ScriptReference Path="~/Scripts/jquery.mobile.datebox.i8n.jp.js"/>
            </Scripts>
        </CompositeScript>
    </asp:ScriptManager>
    </form>                
    
    <asp:ContentPlaceHolder ID="Contents" runat="server">
    </asp:ContentPlaceHolder>
</body>
</html>

どかなー

とりあえず適当なページを作って実行すると、問題なく表示されましたね。

image

コンテンツのロード状況を見ると、ページ全体で239KBの読み込みで1.9秒の時間がかかっています。ページのサイズとしては500KBの軽量化、ページのロード時間としては1秒ぐらい早くなっています。ScriptManagerのComposit機能では、スクリプト自体の圧縮を行わないのでこんなものでしょうかね。

imageimage

Ajax Minifierでビルド時にスクリプトファイルを圧縮してあげると、スクリプト自体のサイズが小さくなるのでもう少し早くなるかもしれませんね。

カテゴリー:ASP.NET, インフラ, モバイル タグ:
  1. まだコメントはありません。
  1. No trackbacks yet.

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。