應用r.js來優化你的前端

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");
});
View Code

而後咱們把 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,共勉~

donate

相關文章
相關標籤/搜索