requirejs子產品化開發後的合并壓縮

requireJs 項目壓縮合并

必要性

requireJs好處無需過多介紹，為了應對日益複雜，大規模的Javascript開發，我們一般将複雜的邏輯劃分成一個個小單元子產品，化整為零。這個時候一個項目要引用幾十個單元也是有可能的，每個單元都是一個js檔案，如果上線的都是這些小的檔案，每次加載頁面都要向伺服器發起這麼多請求，将對性能造成一定影響。是以現在就需要一個工具可以将這些檔案在不影響業務的前提下智能壓縮合并，以減少多餘的請求，于是 r.js 就誕生了。r.js的壓縮工具使用 UglifyJS 或者 Closure Compiler。此外r.js需要node環境，當然也可以運作在Java環境的 Rhino。

下面就平時項目中常用的兩種場景對 r.js 的使用方法進行總結 

注意：r.js 壓縮所用的js檔案必須得是本地的

場景一

 示例中的項目為單一目錄，所有需要用的js都在一個目錄，主檔案為 main.js，現要将所有檔案壓縮合并到檔案 built.js 中

1，确定有node環境

打開cmd，進入項目目錄進去r.js所在的目錄

輸入指令：node r.js -o baseUrl=./ name=main out=../js_min/built.js

參數說明：

baseUrl 起始路徑

name 入口檔案

out 輸出檔案

合并壓縮後就可以在頁面上調用了

壓縮之前的調用：<script data-main="js/main" src="http://s.thsi.cn/js/require.min.js"></script>

壓縮之後的調用：<script data-main="js_min/built" src="http://s.thsi.cn/js/require.min.js"></script>

場景二

配置檔案built.js 的内容：

{
    baseUrl: "./",                                     
    dir: "./build-file/",
    optimize: "uglify",
    modules: [{
        name: "./main"
    }],
    paths: {
        'jquery'            : '../common/jquery',
        'ClientHqData'      : '../common/ClientHqData',
        'StockCallBack'     : '../common/StockCallBack',
        'StockTable'        : '../common/StockTable',
        'hqRender'          : './hqRender',
        'swfobject'         : '../common/swfobject',
        'mmsj'              : '../common/mmsjflash',
        'setDate'           : '../common/setDatePicker',
        'clientInterface'   : '../common/clientInterface',
        'excanvas'          : '../common/excanvas',
        'flot'              : '../common/jquery.flot',
        'dpfxb'             : '../common/dpfxb',
        'subscribeSetup'    : '../common/subscribeSetup'
    }
}      

#baseUrl  預設的情況下，所有子產品都是相對于這個路徑的，如果沒有設定，則子產品的加載是相對于 built 檔案所在目錄
#dir  輸出目錄的路徑，如果不設定就預設為和 built同級的目錄
#optimize  代碼優化方式，常用可以設定的值：uglify（使用UglifyJS壓縮代碼，預設值）、none（不做合并壓縮）
#modules 定義要被優化的子產品數組，這裡是指子產品名稱
#paths 整個項目的引用情況，這樣的話可以不用單獨寫在入口檔案裡面了      

指令： node r.js -o built.js
#built.js 為配置檔案
      

引用（壓縮合并前）：
<script data-main="/js/gnbd/main" src="http://s.thsi.cn/js/require.min.js"></script> 
引用（壓縮合并後）：
<script data-main="/js/gnbd/build-file/main" src="http://s.thsi.cn/js/require.min.js"></script>