当我们在使用requirejs来管理js模块的依赖的时候，会发现页面的请求文件数会很多，那么如何去减少文件的请求次数呢？想必很多人都知道，可以使用requireJS的优化工具r.js来解决这个问题，而且r.js的使用也简单，容易上手。

r.js是什么？

r.js是requireJS的优化（Optimizer）工具，可以实现前端文件的压缩与合并，减小前端文件大小、减少文件的请求次数。

下面是使用r.js时，个人简单的使用记录。

一、准备

在使用它之前，

首先，你要先掌握requirejs的使用。

然后，需要安装nodeJS环境，以便通过命令行来执行r.js功能。

再次，需下载r.js文件（ 下载地址： http://requirejs.org/docs/download.html#rjs），将其放到你的项目根目录。本文用的r.js版本是2.3.2。

那么，下面以前端吧网站目录为demo简单说明一下r.js的使用，项目目录：


说明:
src是开发项目存放目录（也就是说js没有进行压缩与合并）。
dist是压缩与合并后项目存放的目录。（这里是先手动创建好）
build.js、r.js存放在qianduan8根目录下，与src、dist目录平级。（build.js是后面创建而成）

二、手动配置build.js

准备好r.js后，接下来我们手动配置build.js，本项目的build.js配置如下： 

({ 
	appDir: './',      //项目根目录
	dir: 'dist',       //定义输出的目录，所有文件打包后要存放的目录（个人在使用时是指定的，不指定有问题）
	baseUrl: 'src/js/', //相对于appDir，代表要查找js文件的起始文件夹，下文所有文件路径的定义都是基于这个baseUrl
	fileExclusionRegExp: /^(r|build)\.js$/,	//过滤正则表达式，匹配到的文件将不会被输出到输出目录去	
	optimize: "none",      //JavaScript 代码不压缩
	optimizeCss: 'standard',  //以标准的压缩方式压缩css
	removeCombined: false,   
	modules: [		//要优化的模块
	  { name:'index'} ,{ name:'site'},{ name:'aboutMain'},{ name:'content'},{ name:'list'}	
	  //就是各页面的入口js文件，相对baseUrl的路径，省略后缀“.js”
	],	
	paths:{  //设置模块的路径。相对路径以baseUrl为当前目录。
		'jquery':'lib/jquery-2.2.0.min',
		'slide':'mod/slide',
		'lazyload':'lib/jquery.lazyload.min'
	},
	shim:{    //shim配置在requirejs运行过程中被使用的话，需要在这里重复声明，
		'slide':['jquery'],
		'lazyload':['jquery'],
		'prettify':['jquery']
	}
})

在使用requirejs的时候，通常我们通过require.config配置好paths、shim，然后需要在每个入口页面都加上这个配置。如本例的require.config： 

require.config({
	paths:{
		'jquery':'./lib/jquery-2.2.0.min',
		'slide':'./mod/slide',
		'lazyload':'./lib/jquery.lazyload.min'
	},
	shim:{
		'slide':['jquery'],
		'lazyload':['jquery'],
		'prettify':['jquery']
	}
})


在这里，我们可以使用build.js的paths、shim配置后，就可以把每个页面的以上这段require.config配置全部删掉了。

以上配置相关参数具体说明：

1、appDir

应用程序的根目录。可选的，如果指定该设置，说明您的所有文件都在这个目录下面（包括dir和dirbaseUrl都以这个为根目录）。如果不设置，则以baseUrl设置的路径为准。

2、dir

输出目录的路径。如果不设置，则默认为和 build 文件同级的 build 目录。

3、baseUrl

默认情况下，所有的模块都是相对于这个路径的。如果没有设置，则模块的加载是相对于 build 文件所在的目录。另外，如果设置了appDir，那么 baseUrl 应该定义为相对于 appDir 的路径。

4、optimize

JavaScript 代码优化方式。可选的值：

       “uglify：使用 UglifyJS 压缩代码，默认值；

       “uglify2″：使用 2.1.2+ 版本进行压缩；

       “closure”： 使用 Google’s Closure Compiler 进行压缩，需要 Java 环境；

       “closure.keepLines”：使用 Closure Compiler 进行压缩并保留换行；

       “none”：不压缩；

5、optimizeCss

CSS 代码优化方式，可选的值有：

      “standard”：标准的压缩方式；

      “standard.keepLines”：保留换行；    

6、fileExclusionRegExp

要排除的文件的正则匹配的表达式。

7、removeCombined

删除之前压缩合并的文件，默认值 false。如果为true，将从输出目录中删除已合并的文件。

8、modules

定义要被优化的模块数组。每一项是模块优化的配置，常用的几个参数如下：

name：模块名；

create：如果不存在，是否创建。默认 false；

include：额外引入的模块，和 name 定义的模块一起压缩合并；

xclude：要排除的模块。有些模块有公共的依赖模块，在合并的时候每个都会压缩进去，例如一些基础库。使用 exclude 就可以把这些模块在压缩在一个更早之前加载的模块中，其它模块不用重复引入。

更多参数配置，请查看：

https://github.com/requirejs/r.js/blob/master/build/example.build.js

http://nomospace.com/posts/r.js-example.build.js.html

三、运行r.js

当我们都配置好以后，就可以使用如下命令运行来压缩和合并了。
node r.js -o build.js
如下图所示：

优化后的项目图：（会发现原先空目录的dist有了src目录）

四、优化前后效果的对比

1、文件代码对比（以入口文件index.js为例）
      优化前的index.js：（index.js大小1kB）


     

     优化后index.js：（其实就是把上图中的slide、jquery、common依赖的模块都合并成新的index.js了，index.js大小变为88kB）。

    

2、请求文件次数的对比

 优化前打开的index.html：（如图红线处，请求的js文件是5个）

优化后打开的index.html：（如图红线处，请求的js文件成2个了）

从图中对比可知，使用了r.js优化后，页面中请求文件的次数变少了，这样可以减少对服务器的请求，因为r.js把index.html页面所需要用到的js文件都全部合并到入口文件index.js中去了。

以上就是如何使用r.js的简单学习记录，欢迎指导！