Sencha Touch 2.2でCSSを小さくする４つの技
こんにちは、ゼノフィnakamuraです。
最近Android 2.xのデバイス上で、ロード時間が５秒以上かかるSencha Touch 2.2で開発されたアプリケーションを最適化するチャンスがありました。その原因は1.2 MBものapp.cssファイルだったので、100KBを少し超える程度に減少させて、問題を解決できました。ここでこの結果を果たすために利用したテクニックを4つと、それぞれの効果を紹介します。この記事の前に
Sencha Touch Theming Guide
を読むことをお勧めします。
冗長な＠importを避ける
結果: 1.23 MB -> 253 kB
これはよくある間違いで、CSSの肥大化に最も大きいインパクトがあります。デフォルトでは、次の2行が含まれているapp.scssファイルがあります：
1 2 | @import 'sencha-touch/default'; @import 'sencha-touch/default/all'; |
このファイルで全ての作業を行えますが、どのサイズのアプリケーションでも、これを分割する必要が出てきます。コードのある部分を別のファイルに書いて、その別のファイルに次の行を追加して、app.scssにインポートします：
1 | @import 'MySeparateFile'; |
MySeparateFile.scss内では、”sencha-touch/default”と”sencha-touch/default/all”を再びインポートしてはいけません。そうすると生成されたCSSが最後のapp.cssに再び含まれるようになります。私のアプリケーションでは、冗長なインポートはカスタム.scssファイルで何回もリピートされて、CSSがメガバイトにまで肥大しました。
デフォルトのフォントとアイコンを取り外す
結果: 253 kB -> 156 kB
Sencha Touch 2.2ではアイコンにウェブフォントを利用するので、デフォルトで100アイコン近くのほぼ全体のセットがコンパイルされたapp.cssにbase64で詰め込まれています。カスタムアイコンを使っているなら、これは必要ありません。次の変数をapp.scssにセットするだけで簡単に無効にできます：
1 2 | $include-pictos-font: false; $include-default-icons: false; |
この二つのオプションの違いをもっとよく理解するには、Sencha Touchのresourcesフォルダーの.scssソースコードをご覧になると良いでしょう。デフォルトの動作にデフォルトのアイコンを使う、検索フィールドや選択フィールドなどのようなコンポーネントを使っていて、カスタムフォントからアイコンを利用するには、その.scssをオーバーライドする必要があるかもしれません。
実験的なCSSを外す
結果: 156 kB -> 144 kB
このCompassの記事は それをよく説明します。要するにCompassは一般的なブラウザの実際のベンダープレフィックスされた機能だけではなく、多分もう対応してない「少数派」のブラウザまでサポートする「実験的な」CSSを生成します。ただ次をapp.scssに追加するだけで済みます：
1 2 3 4 5 6 | $experimental-support-for-mozilla : false; $experimental-support-for-webkit : false; // $support-for-original-webkit-gradients : false; $experimental-support-for-opera : false; $experimental-support-for-microsoft : false; $experimental-support-for-khtml : false; |
注： 3行目をコメントアウトしていますね。私のアプリケーションではAndroid 2.xをサポートする選択フィールド（Combo Boxとして知られている）を利用していて、これはコンパクトのシナリオでこのエフェクトをできるために古いWebkitグラデーションを使っています:
もし３行目のコメントを外して再びコンパイルしたら、次のようになります：
利用されてないTouch SASSを除く
結果: 144 kB -> 120 kB
Touchのクラスの依存性によってフレームワークの必要な部分だけのJavaScriptファイルをコンパイルできるように、CSSで同じ効果を得ることができます（もっと手間がかかりますが）。注意：この手順を効果的にするためにはSASSソースにどっぷり漬かる必要があります。例えば、選択フィールドのSASSファイルはチェックボックスのSASSファイルで定義されたmixinを利用します。 アプリケーションがチェックボックスを漬かっていない場合は、 チェックボックスのSASSの残りをインクルードしたくないので、 チェックボックスの.scssファイルからそれらのmixinを抽出したくなるでしょう。
復習しましょう: デフォルトのapp.scssには次の二つの行があります：
1 2 | @import 'sencha-touch/default'; @import 'sencha-touch/default/all'; |
このファイルのソースコードはここにあります：
1 2 | touch2.2/resources/themes/stylesheets/sencha-touch/_default.scss touch2.2/resources/themes/stylesheets/sencha-touch/default/_all.scss |
ソースに従えば、最初のファイルは”var”フォルダから.scssファイルをいくつかインポートして、これがSASS変数をセットアップします。このファイルを保持したいことでしょう。
二つ目のファイルは一つ一つコンポーネントで利用される実際のSASSをインポートしますので、このようになります：
1 2 3 4 5 6 7 8 9 | ... @import 'Button'; @import 'Panel'; @import 'Sheet'; @import 'MessageBox'; @import 'Toolbar'; @import 'carousel/Carousel'; @import 'form/Panel'; ... |
このタスクに関わる簡単な方法はapp.scssから「all」を外すことです：
1 | // @import 'sencha-touch/default/all'; |
…それで、その代わりに_all.scssからの個別のインポートを入れる：i.e.もしアプリケーションにメッセージボックスやツールバーを利用するだけなら、app.scssには次のように記述します:
1 2 | @import 'MessageBox'; @import 'Toolbar'; |
これをコンパイルする時には、多分パスの問題が発生すると思います。修正するには :
1 2 | @import 'sencha-touch/default/src/_MessageBox.scss'; @import 'sencha-touch/default/src/_Toolbar.scss'; |
まとめ
このパフォーマンステクニックはページの初期ロード時間から機能や見た目に影響せず、何秒もの時間を削減できます。Edgeコネクションがあるもっと古いデバイスでは、時間の節約は10秒以上超えることもあります。ユーザーにとってはアプリケーションの最初の起動に何秒かかかるでその印象がのこります。この時間はロード中のアイコンにならないように頑張って下さい。
P.S. Sencha Touch 2.2のカスタムアイコンフォントの作成について、次の記事をおすすめします：
