Dojoのbuildツールの概要

7531 ワード

Dojoのbuildツールの概要
Dojoのビルドツールが必要なのはいつですか?
Dojoは非常に実用的なAjax実装フレームワークとして多くのweb 2.0開発者は広く使用していますが、Dojoを使用すると、クライアントブラウザに大量のDojoファイルをロードする必要があり、アプリケーションのパフォーマンスが低下します.Dojoのパフォーマンスに関する問題を解決する方法の1つとして、Dojoファイルをカスタマイズ・パッケージングおよび圧縮する方法があります(Dojoのパフォーマンスを向上させる具体的な方法は、「DojoベースのWeb 2.0アプリケーションのパフォーマンスを向上させる」を参照してください.Dojo自体は、Dojoライブラリ・ファイルのセットを提供しています(自分で作成したJavascriptファイルは、Dojoの仕様に合致すれば同様にパッケージングできます).buildを行うツールでは、ライブラリファイルをカスタマイズし、ファイルを圧縮する方法でブラウザがファイルをロードする時間を短縮します.
Dojoのメインライブラリファイル(dojoパッケージ)大きさは1 Mぐらいで、dijitパッケージとdojoxパッケージの大きさはすべて4 M-5 Mで、しかし私達はいつもこれらのライブラリのファイルを必要としないで、開発者自身の必要によって1部のDojoライブラリをカスタマイズすることができて、実際に使うライブラリのファイルの大きさは往々にして大いに下げることができます;筆者の現在の開発プロジェクトを例にして、カスタマイズした後に実際に使うDojoライブラリのファイルの大きさは300 Kぐらいしかありません.
またDojoのbuildツールはJavascriptファイルを圧縮することでブラウザがファイルをロードする時間を短縮します(この過程でShrinkSafeを使用する必要があります.詳細は「http://dojotoolkit.org/docs/shrinksafe」など)など、具体的な方法は以下の通りです.
  • Javascriptファイルを圧縮します.
  • すべてのスペースと空白の行を削除
  • すべてのコメントを削除
  • 定義変数名を
  • の代わりにより短い文字で置換
  • パッケージされたすべてのJavascriptファイルの内容を1つのファイル
  • にマージ
    圧縮処理により、Javascriptファイルのサイズは全体的に30%-50%減少し、同時にすべてのJavascriptファイルを1つのファイルにパッケージ化することで、ブラウザのロード時に複数回ファイルを開閉する負担を低減し、ロード時間を低減することができる.
     
    準備作業
  • から「dojoダウンロードサイト」へDojoソースコードをダウンロードし、ダウンロード後に直接解凍すればよい.Dojoの解凍ディレクトリをdojoとする(以下、Dojoファイルの解凍ディレクトリを「dojo」という.).
  • JDK(できるだけ1.5以上のバージョンを使用)をダウンロードしてインストールし、JAVA_HOME環境変数を設定する;
  • jdkダウンロードアドレス:http://java.sun.com/javase/downloads/index.jsp
     
    Dojoのビルドツールの使用
    Dojoが提供するbuildツールはdojoutilbuildsrc iptsの下にあり、windowsの下でディレクトリ内のbuild.bat(linuxの下でbuild.shを使用)ファイルを呼び出してbuild作業を実行できます.
    Windowsでbuild.batを呼び出す例を次に示します.
    build profile=base action=release releaseName=myDojo optimize=shrinksafe
    このコマンドには、次のような意味で最も一般的なパラメータがいくつか含まれています.
  • action:clean,release,help,
  • の3つの値を指定します.
  • releaseName:このreleaseの名前は、デフォルトでdojoです.
  • optimize:今回のbuildで最適化する方法は、一般的にshrinksafeを使用してもよい;
  • profile:buildが使用するprofileファイルを指定します.profileファイルにはbuildに関する構成情報が提供されています.dojoutilbuildsrc iptsprofileディレクトリには*.profile.jsファイルがたくさんあります.カスタマイズしたprofileファイルもこのディレクトリの下に置いてあります.例では「profile=base」はbase.profile.jsをbuildのパラメータとして指定することを示しています.
  • 実際にDojoのbuildツールを使用する場合は、提供されるprofileファイルの内容が重要ですが、以下の例ではprofileファイルの構成方法を詳しく説明します.
    Dojoファイルのカスタマイズ
    Dojoライブラリには、ユーザーが呼び出すために多くのファイルが用意されていますが、これらのファイルをすべて必要としない場合があります.この場合、Dojoのbuildツールを使用して、カスタマイズされたDojoライブラリファイルをカスタマイズすることができます.まず、profileファイルを作成して、私たちのニーズを説明する必要があります.
    インベントリ1.profileファイル構成例1
     /* example.profile.js */ 
     dependencies = { 
     layers: [    //               layer 
     { 
     name: "example.js",   //       js     
     dependencies: [       //       js     
    "dojo.date", 
    "dojox.uuid"       
     ] 
     } 
     ], 
     prefixes: [       //     
     [ "dijit", "../dijit" ], 
     [ "dojox", "../dojox" ] 
     ] 
     }

    注意:
  • dojo.jsはデフォルトでパッケージ化されており、dependenciesで
  • を宣言する必要はありません.
  • prefixesでパスを設定するには、dojodojodojo.jsに対するパスであるべきです../dijitは実際にはdojodijit
  • です.
    ファイル(example.profile.js)をdojoutilbuildsrc iptsprofilesディレクトリの下に置いて、次の操作を行います.
     build profile=example action=release releaseName=myDojo optimize=shrinksafe

    ビルドが完了すると、下の図のようにdojoの下にreleaseフォルダが生成されます.
    図1.build後に解放されたファイルの概略:
    ビルドのパラメータreleaseName=myDojoが設定されているため、releaseではmyDojoフォルダが生成され、今回のビルドで生成されたファイルはすべてこのフォルダの下に配置されます.dojoreleasemyDojodojoディレクトリの下で、example.jsとexample.uncompressed.jsの2つのファイルを見つけることができます.これがパッケージ化されたファイルです.example.uncompressed.jsは私たちが指定したすべてのdojoファイルを含むだけで、example.jsはexample.uncompressed.jsに基づいて圧縮処理を行いました.
    ビルド独自のJavascriptファイル
    私たち自身が作成したJavascriptファイルについては、Dojoが提供するbuildツールを使用して圧縮およびパッケージングを行うことができます.これらのjsファイルはDojoに関する仕様に従って作成する必要があることを前提としています.私たち自身のJavascriptファイルをパッケージングすることとDojoファイルをパッケージングすることには大きな違いはありません.Javascriptファイルが2つあるとします.
    インベントリ2.パッケージ化が必要な2つのJavascriptファイルを想定
     /* my.example1 */ 
     dojo.provide("my.example1");  
     dojo.require("my.example2");   //      my.example2    
     /* 
     * this is a js file witch named example1.js 
     */ 
    
     /* my.example2 */ 
     dojo.provide("my.example2"); 
     /* 
     * this is a js file witch named example2.js 
     */

    dojoの下に新しいフォルダ「my」を作成し、上の2つのファイルをそのフォルダの下に配置します.profileファイルは次のように構成されています.
    インベントリ3.profileファイル構成例2
     /* example.profile.js */ 
     dependencies = { 
    	 layers: [ 
     { 
            name: "example.js",   
     dependencies: [       
    "dojo.date", 
    "dojox.uuid", 
    "my.example1"     //            my.example1 
     ]   
        } 
     ], 
    	 prefixes: [ 
        [ "dijit", "../dijit" ], 
     [ "dojox", "../dojox" ], 
     [ "my", "../my"]      //       my            
    	 ] 
     }

    実行:
     build.bat profile=example action=release releaseName=myDojo optimize=shrinksafe

    Profileファイルではmy.example 1のみをパッケージ化することを宣言していますが、buildで生成されたexample.jsではmy.example 2の内容も追加されていることがわかります.これはbuildプロセス中にbuildプログラムがjsファイルの内容を分析する際にいくつかのキーワード(dojo.requireなど)を認識するためです.を使用して、現在のファイルが他のファイルに依存しているかどうかを判断し、依存しているファイルを一緒にパッケージ化します.したがって、buildプログラムがmy.example 1でdojo.require(「my.example 2」)を読み、別のファイル「my.example 2」に依存する必要があると判断します.、prefixesが提供するパスbuildプログラムに従ってmy.example 2.jsファイルを見つけ、そのファイルの内容を追加します.
    上記の例buildに従って、自分で作成したJavascriptファイルは、Dojoをカスタマイズしたファイルと1つのファイルにマージされます.自分で作成したJavascriptファイルを独立して使用する必要がある場合があります.profileファイルを変更してもいいです.
    インベントリ4.profileファイル構成例3
     /* example.profile.js */ 
     dependencies = { 
     layers: [ 
     {   //    layer           dojo   
     name: "mydojo.js",   
     dependencies: [       
    "dojo.date", 
    "dojox.uuid"
     ] 
     }, 
     {  //    layer           js   
     name: "example.js",   
     dependencies: [       
    "my.example1"
     ] 
     } 
     ], 
     prefixes: [ 
     [ "dijit", "../dijit" ], 
     [ "dojox", "../dojox" ], 
     [ "my", "../my"] 
     ] 
     }

    実行:
     build.bat profile=example action=release releaseName=myDojo optimize=shrinksafe

    このようにbuild後、mydojoとexampleの2つのlayerのパッケージファイルをそれぞれ入手します.
  • mydojo.jsとmydojo.uncompressed.js:カスタマイズしたDojoファイル
  • をパッケージ化
  • example.jsとexample.uncompressed.js:Javascriptファイルを自分で作成し、必要に応じて独立して使用できます.
     
    注意すべき問題
  • 上記でbuildプログラムはdojo.requireなどのキーワードに従って依存ファイルを追加するので、layerのdependenciesごとにパッケージする必要があるすべてのファイルをリストする必要はありません.いくつかのルートファイルをリストするだけです(請求書3に示すように)さらに、パッケージ化が必要なファイルと、依存する他のファイルのパスがprefixes宣言で登録されていることを確認する必要があります.そうしないと、buildプログラムは必要なファイルが見つからないために失敗します.
  • では、build中にshrinksafeを呼び出してjsファイルを圧縮します.圧縮ポリシーには、定義された変数名をより簡潔な文字列に置き換えることが含まれます.たとえば、”var identifier”を定義すると、圧縮処理によって”var _v01”になる可能性があります.Javascriptコードでeval文が使用され、evalの内容が使用されている場合定義した変数名がいくつか含まれると、パッケージ化されたファイルにエラーが発生して使用できなくなります.たとえば、次のJavascriptコード:
  •  var identifier = “”; 
     eval(“alert(identifier)”);

    圧縮された変数名identifierはbuildプログラムによって他の名前に置き換えられるため、evalメソッド、すなわちalert(identifier)を呼び出すとidentifierが認識できないためundefinedのエラーが報告される.
     
    小結
    本稿では,Dojoのbuildツールの使い方(profileファイルの構成が鍵)を初心者の視点から簡単に紹介し,以上の内容により読者はこのツールを用いて基本的なカスタマイズとパッケージング処理を行うことができ,興味のある読者は提供された参考資料を通じてさらに学習することができる.