Sencha Touchのファイルサイズを150KByte小さくする方法
この記事はJavaScript advent calender 2011 Frameworkコースの4日目です。
世間ではjQuery Mobileが流行っていますね、それとは関係なくここではSencha Touchのネタを書きます。対象読者は既にSencha Touchを使っている人です。*1
さて、Sencha Touchはモバイル向けフレームワークですがMVCの仕組みを提供するモジュールや様々なUIパーツが含まれているため、ファイルサイズは圧縮状態のJSファイルだけで374KByte (gzip圧縮後は101KByte)もある。さらに標準テーマを含んだCSSファイルは143KByte*2。jQuery Mobileを使う時に必要なファイルと比較して2倍程度のサイズになる。
sencha-touch.jsから使わないクラスを除く
Sencha TouchのダウンロードパッケージにはJSBuilderというビルドツールが含まれている*3。これはSencha自体をビルドするのに使われているツールで、sencha-touch.jsb3というファイルにビルド構成が定義されている。先程述べた通りSenchaには様々な機能が含まれているため、実際には使わないクラスがかなりあるだろう。PhoneGapで動かすアプリであれば、WebStorageProxy, LocalStorageProxy, SessionStorageProxyは使わないだろうし、xml形式のデータを扱わないのであれば XmlWriter, XmlReader, XmlStore は不要。EventSimulator, EventRecorder はリリースファイルには含めないと思う。そんな感じでアプリで使っていないUIコンポーネント、データプロキシ、ストアをビルド構成から外していけば60KByteは減らせる。サブクラスを残して親クラスのみを消してしまうと動作しないので、継承関係は把握しておこう。
JSBuilderの起動は、ダウンロードしたディレクトリで
jsbuilder/JSBuilder.sh -p sencha-touch.jsb3 -d build
とやる。新たにbuildディレクトリが切られてファイルが出力される。
sencha-touch.cssから使わないスタイルを除く
Sencha TouchではCSSのビルドにcompassを使っている。CSSの定義はダウンロードしたファイルの resources/sass 以下に配置されている。標準テーマをそのまま使う定義は sencha-touch.scss に記述されている。内容は次の通り
@import 'sencha-touch/default/all'; @include sencha-panel; @include sencha-buttons; @include sencha-sheet; @include sencha-picker; @include sencha-tabs; @include sencha-toolbar; @include sencha-toolbar-forms; @include sencha-carousel; @include sencha-indexbar; @include sencha-list; @include sencha-list-paging; @include sencha-list-pullrefresh; @include sencha-layout; @include sencha-form; @include sencha-msgbox; @include sencha-loading-spinner;
見ての通り、UIコンポーネント毎にスタイルを生成しているのがわかる。使っていないUIコンポーネントの行はコメントアウトすれば良い。
scssからcssの生成は resources/sass に移動して
compass compile
する。Compassをインストールしていない場合は gem install compass しておく。
さらに次の通り、デフォルト生成をOFFにすると必要なアイコンスタイルのみを含める事ができる。
@import 'sencha-touch/default/all';
// 必要なスタイルのみを生成したいので、デフォルト生成をOFFにする
$include-default-icons: false;
$include-toolbar-uis: false;
@include sencha-panel;
@include sencha-buttons;
// 中略
@include sencha-msgbox;
@include sencha-loading-spinner;
// 必要なアイコンスタイルのみを生成する
@include pictos-iconmask('action');
@include pictos-iconmask('add');
@include pictos-iconmask('delete');
@include pictos-iconmask('settings');
// タブバーは ui=light でのみ使用する
@include sencha-toolbar-ui('light', $base-color);アイコン用のスタイルはbase64で画像がインライン展開されているのでそれなりにでかい。どの変数をいじればファイルが小さくなるかは resources/themes/stylesheets/sencha-touch/default 以下のファイルを見ればわかるだろう。上の例だと、143KByte → 53KByte に減らす事ができた。
まとめ
アプリケーションがどれだけSenchaの機能を使っているかに依るが、大体100~150KByteは減らせるのではないかと思う。
