2012年7月6日 星期五

RequireJS對Backbone.js 做optimization

開發完成的Backbone.js Project包含了一堆的js檔案
可以使用RequireJS最佳化,將所有JS檔案壓縮成一個
一.準備工作
1.安裝nodejs
執行optimization 需要使用nodejs執行
下載與安裝
2.下載r.js檔案
這是用來執行工作的nodeJS Script檔案
下載
3.建立profile.js
檔案關聯設定檔

二.檔案架構
要執行最佳化工作是
nodejs以profile.js當作執行設定檔,來執行r.js,
請建立一個build的目錄來放置r.js與profile.js
build目錄不要放到backbone project js目錄下
檔案架構可以是
project/build/(放r.js與profile.js)
project/js/(所有專案內的js檔案)

三.profile.js的設定
1.baseUrl: 為profile.js所在目錄算起 要找到main.js的目錄參考
例如 baseUrl:../js/
2.out:要輸出結果的檔案名稱與路徑
例 out: "../js/main.min.js",  
3.paths:將main.js下設定的paths copy過來再加上require的路徑參考

paths : { 
  _loader:'utils/loader', 
  _$ : 'libs/jquery/jquery',  
  ...
  requireLib:'libs/require/require-min'       
}
4.include 設定requirejs的參考
  例
  include:'requireLib'
5.sample
({
    baseUrl: "../js/",
    name: "main",
    out: "../js/main.min.js",
    paths : {    
        _loader:'utils/loader',    
        _$:'libs/jquery/jquery',        
        _Underscore : 'libs/underscore/underscore',
        _Backbone : 'libs/backbone/backbone',
        ...
        requireLib:'libs/require/require-min'    
    },    
    include:'requireLib'
})  

四.執行
node r.js -o profile.js

五.網頁上使用
未作最佳化前使用
 <script data-main="js/main" src="js/libs/require/require.js"></script>  
最佳化後使用
 <script src="js/main.min.js"></script>  



 


沒有留言: