應用r.js來最佳化你的前端

標籤：style   blog   http   color   使用   os   io   strong   

r.js是requireJS的最佳化（Optimizer）工具，可以實現前端檔案的壓縮與合并，在requireJS非同步按需載入的基礎上進一步提供前端最佳化，減小前端檔案大小、減少對伺服器的檔案請求。
要使用r.js需下載r.js檔案（點我下載），將其放到你的項目根目錄；還需要安裝nodeJS（點我下載），以便通過命令列來執行r.js功能。
我們將拿一個小案例來詳細說明使用r.js的方法（你可以點此下載這個案例）。

如所示的項目（見案例中的before檔案夾）僅僅使用了requireJS，但還未使用過r.js。該項目有兩個頁面，其中 index.html 使用了jQuery和我寫的一個jq投影片外掛程式VajoyJS；另一個頁面 reg.html 使用了avalonJS 架構。

我們開啟index.html 和 reg.html兩個檔案，從引入requireJS標籤中的data-main資訊，可以知道它們的入口檔案分別為 js/pages 目錄下的 index.js 和 reg.js。

故咱分別開啟 js/pages 目錄下的 index.js 和 reg.js 檔案，看下它們的配置代碼:

⑴ index.js：

require.config({    paths: {    //相對這個js檔案的路徑        jquery: ‘../common/jq‘,        VJ:‘../common/VajoyJS‘    }});require([‘jquery‘], function ($) {    $("#outside2").html("下面是一個投影片");});require([‘jquery‘,‘VJ‘], function ($,VJ) {    VJ($("#outside")).slideFade("li_df","li_ac","arrow_left","arrow_right");});

⑵ reg.js：

require.config({    paths: {    //相對這個js檔案的路徑        avalon: ‘../common/avalon‘    }});require([‘avalon‘], function () {    var reg = avalon.define("reg", function(vm) {         vm.username = "";    })});

這裡我們自然會聯想到一個稍有麻煩的事情，就是每一個入口檔案都要配置一下require.config，比如有十個頁面要依賴到jQuery，那對應的十個入口檔案可能都要寫上：

require.config({    paths: {    //相對這個js檔案的路徑        jquery: ‘../common/jq‘        //,Others....    }});

自然是頗為煩瑣的事情，那麼有沒有辦法將所有頁面入口檔案的config資訊都集中在一起一次處理即可？
r.js可以幫你做到。

我們可以先大刀闊斧地把倆個入口檔案裡的 require.config({ ... }) 部分全部刪除掉，比如上述的 index.js 只需保留：

require([‘jquery‘], function ($) {    $("#outside2").html("下面是一個投影片");});require([‘jquery‘,‘VJ‘], function ($,VJ) {    VJ($("#outside")).slideFade("li_df","li_ac","arrow_left","arrow_right");});

View Code

然後我們把 r.js 檔案放到項目根目錄，再於根目錄建立一個 build.js 檔案，該檔案內容如下：

({     appDir: ‘./‘,   //項目根目錄    dir: ‘./vajoy‘,  //輸出目錄，全部檔案打包後要放入的檔案夾（如果沒有會自動建立的）        baseUrl: ‘./js/pages‘,   //相對於appDir，代表要尋找js檔案的起始檔案夾，下文所有檔案路徑的定義都是基於這個baseUrl的        modules: [                      //要最佳化的模組      { name:‘index‘} ,{ name:‘reg‘}    //說白了就是各頁面的入口檔案，相對baseUrl的路徑，也是省略尾碼“.js”    ],        fileExclusionRegExp: /^(r|build)\.js|.*\.scss$/,    //過濾，匹配到的檔案將不會被輸出到輸出目錄去        optimizeCss: ‘standard‘,         removeCombined: true,   //如果為true，將從輸出目錄中刪除已合并的檔案        paths: {    //相對baseUrl的路徑            avalon: ‘../common/avalon‘,            jquery: ‘../common/jq‘,            VJ:‘../common/VajoyJS‘    }    //     ,shim:{ .....}      //其實JQ和avalon都不是嚴格AMD模式，能shim一下最好了，不過這裡咱省略}) 

各參數的意義我是從網上找了一份說明（建議配合我代碼上的注釋來理解）：

接著是最重要的一步，開啟 Node.js command prompt 進入node命令列介面，並定位到該項目目錄：

然後鍵入

node r.js -o build.js 

並斷行符號來運行 r.js 最佳化器。這時候再開啟項目目錄，會發現新增了一個 vajoy 檔案夾，r.js把最佳化、壓縮後的全部專案檔都拷貝到了這個檔案下：

自此我們完成了 r.js 的全部操作（其實很簡單對吧~）

這裡要知道的倆點是，vajoy檔案夾是我們在 build.js 中“dir”項目所填寫的檔案名稱，r.js會自動把最終最佳化好的專案檔全都放到這裡，而之外的原檔案則不會被修改到。

另一點要瞭解的是，我們在 build.js 中設定了

fileExclusionRegExp: /^(r|build)\.js|.*\.scss$/

它表示告知r.js不要把匹配到的檔案放到dir定義的檔案夾（vajoy檔案夾）中，我們看看這個正則，它匹配了r.js、build.js和所有.scss尾碼的檔案。

而你可以看到，在vajoy檔案夾裡是不存在這些被匹配到的檔案的。你可以按照需求，看看哪些檔案是最終無需收到項目中的，從而編寫相應的Regex。

r.js做了什嗎？

雖然我們知道r.js可以幫我們少寫一些require.config，也可以幫我們在最終項目中摒棄多餘的檔案，但這不是使用它的主要目的。

我們可以分別開啟案例中 before 和 after 目錄下的index.html，看下使用r.js前後，該檔案對伺服器的請求發送了什麼變化：

可以知道，r.js把index.html頁面所需要用到的指令碼都全部整合到入口檔案index.js中去，從而減少了對伺服器的請求。

另外樣式檔案也會在r.js的操作下進行壓縮，從而有效減少該檔案大小：

希望此教程能幫你較好地使用r.js，共勉~