2012-09-18

使用 Google ClosureBuilder 產出最佳化的 Javascript 檔

最佳化的 Javascript 指的是「將多個 Javascript 檔組合成單一個 Javascript 檔，並刪除註解等無用的部份，以及最小化變數名稱」，這些動作的目的在於產生一個可以「快速下載」的精簡大檔案。

但是，這個精簡大檔案適用於正式環境，開發時還是用「適合閱讀」的檔案比較好。

ClosureBuilder 只能用來精簡 Google Closure 產生的檔案。

依照官方範例建立程式 start.js。

goog.provide('myproject.start');

goog.require('goog.dom');

myproject.start = function() {
  var newDiv = goog.dom.createDom('h1', {'style': 'background-color:#EEE'},
    'Hello world!');
  goog.dom.appendChild(document.body, newDiv);
};

// Ensures the symbol will be visible after compiler renaming.
goog.exportSymbol('myproject.start', myproject.start);
myproject.html
<!doctype html>
<html>
  <head>
<script type="text/javascript" src="../closure/goog/base.js"></script>
    <script src="start.js"></script>
  </head>
  <body>
    <script>
      myproject.start();
    </script>
  </body>
</html>
接下來就是這篇筆記存在的原因，官方文件有些小錯誤。

在 Windows 環境執行 Python 程式： 
python closure/bin/build/closurebuilder.py --root=closure --root=third_party --root=myproject --namespace=myproject.start
執行以上 指令 可以在 Console 看到這個範例所需的 Javascript 檔案清單，也就是瀏覽器需要下載的 js 檔案。

--root 需要指向所有需要的 js 目錄，包括 Google Closure 需要的 closure 與 third_party 兩個目錄，與 myproject 目錄。

--namespace 則是指定「程式入口」，ClosureBuilder 才知道從哪裡開始，官方文件錯在加了雙引號。

要執行以下指令前，得先去下載 Closure Compiler。
python closure/bin/build/closurebuilder.py --root=closure --root=third_party --root=myproject --namespace=myproject.start --output_mode=compiled --compiler_jar=compiler.jar --output_file=myproject/start-compiled.js
執行以上 指令 可以產出最佳化的 Javascript 檔案，接下來只要修改 myproject.html 裡的 script src 到 start-compiled.js，並移除 base.js 的 script tag（因為已經包到 start-compiled.js 裡了），這樣，只要一隻 html 和一隻 js 檔就可以了，官方文件錯在 --output_file  多了一個 s。

LimeJS 作為 Google Closure 的擴充，將這流程簡化了！  ---
於

沒有留言:

張貼留言