FJCT_ニフクラ mobile backend(mBaaS)お役立ちブログ

スマホアプリ開発にニフクラ mobile backend(mBaaS)。アプリ開発に役立つ情報をおとどけ!

作成したスクリプトを小さくするには?

mBaaSを自分で拡張できるスクリプト機能ですが、現在約8KBまでのファイルしかアップロードできなくなっています。あまり巨大なファイルを許容すると、何でもできてしまうからなのですが、それでもこだわったコードを書いたら8KBを超えてしまうかも知れません。

そこで今回はスクリプトのサイズを小さくする方法を紹介します。これをミニファイと言います。幾つか方法がありますので自分に合ったものを選択してください。

Google Closure Compiler

まずコマンドラインを使ってミニファイする方法です。Googleが提供するツールを使って行ってみます。 Download the application というリンクがあるので、それをクリックします。

そうすると compiler.jar というファイルがダウンロードできますので、これを実行します。

java -jar compiler.jar --js input.js --js_output_file output.js

これを実行すると、例えば1,746byteあったファイルが895byteになります。さらに

java -jar compiler.jar --compilation_level ADVANCED_OPTIMIZATIONS --js index4.js --js_output_file index5.js

最適化オプションを指定すると751byteまで削減されます。半分以下です。

Google Closure Compiler

UglifyJS

UglifyJSはNode.jsで作成されています。そのため、Gulpなどのビルドツールとの相性も良いと思われます。

uglifyjs -o output.js input.js

UglifyJSの場合、output.jsは1,163byteでした。Google Closure Compilerと比べるとサイズが大きい印象です。さらにミニファイを強める場合は --unsafe オプションをつけます。

さらにUglifyJSはオプションを追加できるようになっていますので、必要に応じてオプションを設定します。

uglifyjs -c sequences=true,dead_code=true,conditionals=true,booleans=true,unused=true,if_return=true,join_vars=true,drop_console=true -o index5.js index4.js

とは言え、これでも1,085byteだったので、あまり圧縮率を高めるのには向いていないかも知れません。ただしGulpなどと組み合わせて使うのには最適です。

mishoo/UglifyJS: JavaScript parser / mangler / compressor / beautifier library for NodeJS

/packer/

最後はオンラインツールです。Webブラウザから使えます。

使い方は簡単で、JavaScriptのコードを貼り付けてpackボタンを押すだけです。Shrink variablesを有効にすると変数名が変わるのでより小さくできます。

944byteまで減らすことができ、52%もサイズを小さくできました。ごく手軽に使えるのでお勧めです。

/packer/


スクリプト機能を使いこなす際に、知っておくと便利だと思います。ぜひご利用ください!