应用r.js来优化你的前端

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文件夹里是不存在这些被匹配到的文件的。你能够按照需求，看看哪些文件是最终无需收到项目中的，从而编写相应的正则表达式。

r.js作了什么？

虽然咱们知道r.js能够帮咱们少写一些require.config，也能够帮咱们在最终项目中摒弃多余的文件，但这不是使用它的主要目的。

咱们能够分别打开案例中 before 和 after 目录下的index.html，看下使用r.js先后，该文件对服务器的请求发送了什么变化：

能够知道，r.js把index.html页面所须要用到的脚本都所有整合到入口文件index.js中去，从而减小了对服务器的请求。

另外样式文件也会在r.js的操做下进行压缩，从而有效减小该文件大小：

但愿此教程能帮你较好地使用r.js，共勉~