Closure LibraryをClosure Compilerで圧縮（ADVANCED_OPTIMIZATIONS編）

投稿日：

Google Chrome Extension "History Plus"を開発しているときのMemo.

前の記事では、Closure LibraryのCodeをClosure Compilerを使って結合するまでの環境設定や手順とか。

今度は
--compilation_level=ADVANCED_OPTIMIZATIONS
を追加して、最小Sizeのjs fileにする方法を試してみた。

環境はWindows 7 Home Premium 64bit （英語版）

実行するだけなら簡単。見やすくするために改行しているけど、実際は1行で実行。

> cd "C:\Users\Owner\Develop\Google Chrome Extension\"
> C:\Python27\python.exe
   "closure-library\closure\bin\build\closurebuilder.py"
   --root="closure-library"
   --root="History+\src\js"
   --namespace="historyplus.SearchController"
   --output_mode=compiled
   --compiler_jar="compiler.jar"
   --compiler_flags="--compilation_level=ADVANCED_OPTIMIZATIONS"
   --output_file="History+\history.min.js"

だけど、下記Errorが出て動かない。

Uncaught Error: Invalid value for argument 1. Property 'Ic': Unexpected property, Property 'dc': Unexpected property.

ここから試行錯誤。

1. まずはClosure Libraryの依存関係について理解する。

jQueryに慣れていると、関数を定義したあと、onreadyもしくはonload時に実行するというやり方になる。下記のような感じ。

window.onload = function(){
  var ctrl = new historyplus.SearchController();
};

これだと全て読み込まれた後なので、安心してInstanceを作成することが出来る。

Closure Libraryの場合は依存関係定義Fileを作成して、onReadyを待たずに実行していく方法が推奨されているらしい。下記Siteとかでなぜdeps.jsを構築しているのかやっと理解できた。

Closure Libraryによるアプリ開発のはじめ方 - WebOS Goodies

deps.jsの作り方はOfficial Siteを参考に。

Using DepsWriter - Closure Library - Google Code

--root_with_prefixに渡す値がbase.jsからの相対Pathなので、closure-libraryはLocalにCheckoutし直した。Folder構成は次のような感じ。

image

PowerShellからCommand実行。

> cd "C:\Users\Owner\Develop\Google Chrome Extension\History+\src"

> C:\Python27\python.exe
   "closure-library/closure/bin/build/depswriter.py"
    --root_with_prefix="js ../../../js"
    --output_file="js\deps.js"

htmlは

<script src="closure-library/closure/goog/base.js"></script>
<script src="js/deps.js"></script>
<body>
...
<script>goog.require('historyplus.SearchController');</script>
</body>

これで動作確認。

2. 準備が整ったのでADVANCED_OPTIMIZATIONSしてみる。

> C:\Python27\python.exe
   "closure-library\closure\bin\build\closurebuilder.py"
   --root="closure-library"
   --root="js"
   --namespace="historyplus.SearchController"
   --output_mode=compiled
   --compiler_jar="..\..\compiler.jar"
   --compiler_flags="--compilation_level=ADVANCED_OPTIMIZATIONS"
   --output_file="js\history.min.js"

63KBだった。htmlを修正。

<body>
...
<script src="js/history.min.js"></script>
</body>

これで実行してみると・・・。同じError・・・。ここで気付いた。chrome.history.searchなどのBrowserが提供しているAPIまで置き換えられてしまう。なので、

Closure Compilerに最適化を除外する関数を教えてあげないといけない。

この解決策は下記Siteを参考に。

上記Siteを参考にObjectのPropertyの記述方法を変更。除外FileをDownloadしてきて、再度Compile.

> C:\Python27\python.exe
   "closure-library\closure\bin\build\closurebuilder.py"
   --root="closure-library"
   --root="js"
   --namespace="historyplus.SearchController"
   --output_mode=compiled
   --compiler_jar="..\..\compiler.jar"
   --compiler_flags="--compilation_level=ADVANCED_OPTIMIZATIONS"
   --compiler_flags="--externs=..\..\chrome_extensions_ja_stable_Simple.js"
   --output_file="js\history.min.js"

でもErrorが取れない。

Propertyが置き換えられるときと、そうでないときがあるのが謎。解決に時間かかりそうなので、ADVANCED_OPTIMIZATIONS付けないで公開することにした。

> C:\Python27\python.exe
   "closure-library\closure\bin\build\closurebuilder.py"
   --root="closure-library"
   --root="js" 
   --namespace="historyplus.SearchController"
   --output_mode=compiled
   --compiler_jar="..\..\compiler.jar"
   --output_file="js\history.min.js"

 

< Related Posts >