ExtJS4‎ > ‎配布用JSの作成‎ > ‎

JSBuilderで配布ファイル最適化

動機

    以前は始めから1つのファイルにアプリを作成していき、配布の為に、コメント、インデント、空改行、括弧や演算子の前後の空白の削除、とじ括弧だけの行は前の行につなげて、改行を減らす等を行う自前のスクリプトにかけてなんてことを行っていた。

    この方法だとソースがある程度大きくなった後は、修正に、特に修正したい行への移動に時間がかかるようになる。エディターによってはAというクラスを見ながらBというクラスをコードする場合、移動だと時間がかかるし同時には見れない。同じファイルを2つのエディターで開けばいいが保存する方を間違えないようにしなければならない等、気を使う作業だった。


    今回、senchaのおすすめのMVCのフレームワークに従って開発をやってみたら、まだ開発途中なのに、50〜60くらいのjsファイルができてしまった。このままで行くと軽く100を越えてしまうため、必要なライブラリのクラスだけ集めて固め、jsファイルの個数を減らし、全体の転送量も小さくするというのをやってみる。


    目的、目標

    • 配布用jsファイルをアプリとライブラリをあわせて1つだけにする 
    • ExtJSライブラリのうちアプリが動くのに必要な物だけを配布する 
    • さらにコードを圧縮し転送の時間をへらす

    日本語のガイド

    SDKツールダウンロードとインストール

    「DOWNLOAD SDK TOOL」ボタンでダウンロード
    • SenchaSDKTools-2.0.0-Developer-Preview.tar がダウンロードされるので、これを実行し、アプリケーションをインストールする
    • 新しいshellを起動して、「sencha」コマンドにパスが通っていることを確認する
      
      $ sencha
      Sencha Command v2.0.0 Developer Preview
      Copyright (c) 2011 Sencha Inc.
      
      usage: sencha COMMAND [ARGS]
      
      The available commands are:
         build   build a JSB project
         create bootstrapdata  generate boostrap data
         create jsb   generate a minimal JSB project for an app
         create manifest  generate classes manifest
         package   package your Touch web app into a native bundle
         slice theme   slice a custom theme's images for IE
      
      See 'sencha help COMMAND' for more information on a specific command.

    コンパイルのためのファイル準備

    • index.htmlをコピーして「index0.html」と「dev.html」を作成する
      • dev.html:開発用。今までのindex.htmlと内容は同じ
        「ext-all-debug.js」と「app.js」を読み込む。
      • index0.html:コンパイル用
        「ext-debug.js」と「app.js」を読み込む
        ※index.htmlでなく、index.phpを使用している場合、phpが出力したhtmlをindex0.htmlという名前で保存し、変更を加えればよい
      • index.html:配布用
        「ext.js」と「app-all.js」(圧縮したjavascript)を読み込む。
        ※index.htmlには下記のような変更を加える
        ext-all-debug.js → ext-debug.js

    ビルド定義ファイルの生成

    • アプリケーションのパスに移動し、jsb3ファイルを作成する
      $ cd /path/to/my/app
      $ sencha create jsb -a index0.html -p app.jsb3 -v
    • locale/ext-lang-ja.jsがエラーを出す場合、index0.htmlでの読み込み順を、ext-debug.js→app.js→ext-lang-ja.jsに変える
    • 下記のエラーがでる場合、ソースを見直す
      • ローダで起動の際、ブラウザコンソールに「c is not a constructor」
      • jsb3ファイル作成時にコマンドラインに「undefined:0 TypeError: 'null' is not a constructor」

    ソース見直し方

    • エラーは大抵の場合、Ext.ClassManagerのgetInstantiator()の中の動的なコードで発生し、どのファイルやどのクラスに問題が有ったのかを教えてくれない。
    • jsb3ファイル作成時にコマンドラインに「undefined:0 TypeError: 'null' is not a constructor」が表示され止まってしまう場合、index0.htmlからlocale/ext-lang-ja.jsをはずす
    • クラス定義の大文字小文字、sの有無等気をつけて見直す。ここが間違ってたら、ext-all-debug.jsでもうごいてないはず
    • クラスのコンフィグ定義の中で、Ext.create()を使っている箇所があれば、initComponent内で設定するように書き換える。
      ※その際、新規でinitComponentを用意したなら、最後の行に
      this.callParent(arguments);

      をつけるのを忘れないこと。
    • クラスのコンフィグ定義の中で、グローバルな変数を使用している箇所があれば、initComponent内で設定するように書き換える。
    • 上記のエラーがでてもそこまでのjsbファイルはできているので、自分が用意したクラスファイルが全て入っているかをチェックし、足らないものがあれば、そこに間違いがないか、コントローラ内で、stores/models/viewsに記載されているかを確認する
      • 自分の作成したクラスファイルが全て、jsb3ファイルに収まったのならば、「'null' is not a constructor」がでていても先に進める。 
      • ビルド用のファイルを「app-all.js」を作り、まずは動作させ、ローダが個別に読み足したファイルのクラスについて、定義の見直しや、適当な箇所でのrequires/views等の宣言の追加を行う方が効率がいい

    アプリケーションのビルド

    • コマンドラインよりビルドを行う
      $ sencha build -p app.jsb3 -d . -c -v
      
      Loading the Project Name Project
      Loaded 0 Packages
      Loaded 2 Builds
        * Parse all-classes.js with options:
          - debug: true
          - debugLevel: 1
        * Parse app-all.js with options:
          - debug: false
          - debugLevel: 1
      Copy resources...
      Done building!
    ※ソースのコメントや、文字列リテラルで日本語を使用していた場合、UTF-8でも延々とエラーがでまくる。
    [ERROR] 66082:27:unterminated string literal
    [ERROR] 66082:27:syntax error
    [ERROR] 66083:11:syntax error

    このため日本語を含むソースの場合、まずはガイドで説明されているコマンドに、圧縮しないオプション「-c」をつけてビルドする。フルに圧縮する手順は「UTF-8のソースを圧縮」で。

    配布用index.htmlの修正

    • index.html内のスクリプトタグ内のファイル名を下記のように変更
      ext-debug-all.js → ext.js
      app.js → app-all.js
    • 「locale/ext-lang-ja.js」を使用していたならばそのスクリプトタグを削除する
      ※開発用、コンパイル用のdev.html、index0.htmlは残しておく
    • これ以降、必要ファイルのみを圧縮した本番バージョンでの確認は、「index.html」を用い、開発は「dev.html」で行えばよい

    app-all.jsファイルをさらに圧縮

    • 今回、まずはチュートリアルと近い手順で最後まで進めるため、ビルドの際、「-c(無圧縮)」オプションを使用した。
    • このため、できたjsファイルは3M程度とかなり大きなサイズとなっている。
    • 日本語を使用していても「-c」オプションを用いず、フルに圧縮する手順を「UTF-8のソースを圧縮」に示す。
    Comments