r.js是requireJS的優化(Optimizer)工具,能夠實現前端文件的壓縮與合併,在requireJS異步按需加載的基礎上進一步提供前端優化,減少前端文件大小、減小對服務器的文件請求。
要使用r.js需下載r.js文件(點我下載),將其放到你的項目根目錄;還須要安裝nodeJS(點我下載),以便經過命令行來執行r.js功能。
咱們將拿一個小案例來詳細說明使用r.js的方法(你能夠點此下載這個案例)。css
以下圖所示的項目(見案例中的before文件夾)僅僅使用了requireJS,但還未使用過r.js。該項目有兩個頁面,其中 index.html 使用了jQuery和我寫的一個jq幻燈片插件VajoyJS;另外一個頁面 reg.html 使用了avalonJS 框架。html
咱們打開index.html 和 reg.html兩個文件,從引入requireJS標籤中的data-main信息,能夠知道它們的入口文件分別爲 js/pages 目錄下的 index.js 和 reg.js。前端
故咱分別打開 js/pages 目錄下的 index.js 和 reg.js 文件,看下它們的配置代碼:node
⑴ index.js:jquery
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:git
require.config({ paths: { //相對這個js文件的路徑 avalon: '../common/avalon' } }); require(['avalon'], function () { var reg = avalon.define("reg", function(vm) { vm.username = ""; }) });
這裏咱們天然會聯想到一個稍有麻煩的事情,就是每個入口文件都要配置一下require.config,好比有十個頁面要依賴到jQuery,那對應的十個入口文件可能都要寫上:github
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"); });
而後咱們把 r.js 文件放到項目根目錄,再於根目錄新建一個 build.js 文件,該文件內容以下:app
({ 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文件夾裏是不存在這些被匹配到的文件的。你能夠按照需求,看看哪些文件是最終無需收到項目中的,從而編寫相應的正則表達式。
r.js作了什麼?
雖然咱們知道r.js能夠幫咱們少寫一些require.config,也能夠幫咱們在最終項目中摒棄多餘的文件,但這不是使用它的主要目的。
咱們能夠分別打開案例中 before 和 after 目錄下的index.html,看下使用r.js先後,該文件對服務器的請求發送了什麼變化:
能夠知道,r.js把index.html頁面所須要用到的腳本都所有整合到入口文件index.js中去,從而減小了對服務器的請求。
另外樣式文件也會在r.js的操做下進行壓縮,從而有效減小該文件大小:
但願此教程能幫你較好地使用r.js,共勉~