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

UTF-8のソースを圧縮

何をするか

前回の「JSBuilderで配布ファイル最適化」では、圧縮なしにビルドを行う所までを示したが、できたapp-all.jsは3M以上と大きなサイズとなる。

原因は圧縮のエンジンycompressorにソースがUTF-8であることが知らされていないからだ。現在のjsbuilderのコマンドラインでエンコードの種類を渡すオプションは無いが、jsbuilder自体javascriptで書かれているので、ycompressorを呼んでいるソースを直接書き換え、必要なオプションを設定することとする。

macでの手順

他も大差ないはず。
  1. senchaをインストールしたフォルダに移動する(preview版とフォルダが異なるので注意)
    $ which sencha
    /Applications/SenchaSDKTools-2.0.0-beta3/sencha
    $ cd /Applications/SenchaSDKTools-2.0.0-beta3/
  2. Project.jsのycompressorのオプションを変更する(preview版とフォルダが異なるので注意)
    $ sudo cp compat/jsbuilder/src/Project.js compat/jsbuilder/src/Project.js.org
    sudo vi compat/jsbuilder/src/Project.js

    165行目のycompressor行にオプションを追加
    $ diff jsbuilder/src/Project.js.org jsbuilder/src/Project.js
    165c165
    --- jsbuilder/src/Project.js.org 2012-01-17 09:47:36.000000000 +0900
    +++ jsbuilder/src/Project.js 2012-01-17 09:49:54.000000000 +0900
    @@ -162,7 +162,7 @@
    },
    getCompressor : function() {
    - return 'java -jar "' + system.script.replace(Fs.getPath('bin/JSBuilder.js'), '') + Fs.getPath('ycompressor/ycompressor.jar') + '" --type js ';
    + return 'java -jar "' + system.script.replace(Fs.getPath('bin/JSBuilder.js'), '') + Fs.getPath('ycompressor/ycompressor.jar') + '" --type js --line-break 200 --charset UTF-8 ';
    },
    getSourceFiles: function() {
    オリジナルのオプションの最後にブランクがあるが、変更後も保持する。正式なコマンドはこの後にファイル名がくるので。

これで、「-c」を指定せずにビルドしても、UTF-8の日本語を含むソースを問題(文字化け)なく圧縮できるようになった。

オプションについて

オプションは http://stacktrace.jp/tools/yuicompressor/ で調べた。

  • 「--charset UTF-8」がキモ。
  • 「--linbreak 200」は全く改行がないと、間違ってファイルをクリックしてしまったときにエディターや心に負担をかけるのでつけてみた。つけなくても当然よい。
    ※0.5%だけ配布ファイルが大きくなるが、ロード時間はさほど変わらないと思う。

効果

  • 2コマンドだけで生成できるので、負担が減った(セミコロンで区切れば1行で流せる)
    $ sencha create jsb -a index0.html -p app.jsb3 -v
    $ sencha build -p app.jsb3 -d . -v
  • サイズは3.2M→800Kと25%位まで縮小できる

Comments