[TOC] # 优化器`r.js` RequireJS提供一个基于 node.js 的命令行工具`r.js`的打包工具，用来压缩多个js文件。 它的工作其实就是：解读出根据你的配置环境的目录结构下的代码存放目录结构，然后把标准的代码结构转换成具名模块的代码结构，如果你执行了合并，则把依赖的模块的代码合并到制定的一个文件中，以减少网页的HTTP请求数 第一步是安装`r.js`（假设已经安装了`node.js`）。 ~~~ npm install -g requirejs //r.js 已经是其一部分 ~~~ 然后，使用的时候，直接在命令行键入以下格式的命令。 ~~~ node r.js -o <arguments> ~~~ `<argument>`表示命令运行时，所需要的一系列参数，比如像下面这样： ~~~ node r.js -o baseUrl=. name=main out=main-built.js ~~~ 除了直接在命令行提供参数设置，也可以将参数写入一个文件，假定文件名为build.js。 ```js ({ baseUrl: ".", name: "main", out: "main-built.js" }) ``` 然后，在命令行下用r.js运行这个参数文件，就OK了，不需要其他步骤了。 ~~~ node r.js -o build.js ~~~ 下面是一个参数文件的范例，假定位置就在根目录下，文件名为build.js。 ```js ({ appDir: './', baseUrl: './js', dir: './dist', modules: [ { name: 'main' } ], fileExclusionRegExp: /^(r|build)\.js$/, optimizeCss: 'standard', removeCombined: true, paths: { jquery: 'lib/jquery', underscore: 'lib/underscore', backbone: 'lib/backbone/backbone', backboneLocalstorage: 'lib/backbone/backbone.localStorage', text: 'lib/require/text' }, shim: { underscore: { exports: '_' }, backbone: { deps: [ 'underscore', 'jquery' ], exports: 'Backbone' }, backboneLocalstorage: { deps: ['backbone'], exports: 'Store' } } }) ``` 上面代码将多个模块压缩合并成一个main.js。 参数文件的主要成员解释如下： * appDir：项目目录，相对于参数文件的位置。 * baseUrl：js文件的位置。 * dir：输出目录。 * modules：一个包含对象的数组，每个对象就是一个要被优化的模块。 * fileExclusionRegExp：凡是匹配这个正则表达式的文件名，都不会被拷贝到输出目录。 * optimizeCss: 自动压缩CSS文件，可取的值包括“none”, “standard”,“standard.keepLines”,“standard.keepComments”, “standard.keepComments.keepLines”。 * removeCombined：如果为true，合并后的原文件将不保留在输出目录中。 * paths：各个模块的相对路径，可以省略js后缀名。 * shim：配置依赖性关系。如果某一个模块不是AMD模式定义的，就可以用shim属性指定模块的依赖性关系和输出值。 * generateSourceMaps：是否要生成source map文件。 更详细的解释可以[参考官方文档](https://github.com/requirejs/r.js/blob/master/build/example.build.js)。 运行优化命令后，可以前往 dist 目录查看优化后的文件。 下面是另一个 build.js 的例子。 ```js ({ mainConfigFile : "js/main.js", baseUrl: "js", removeCombined: true, findNestedDependencies: true, dir: "dist", modules: [ { name: "main", exclude: [ "infrastructure" ] }, { name: "infrastructure" } ] }) ``` 上面代码将模块文件压缩合并成两个文件，第一个是 main.js（指定排除 infrastructure.js），第二个则是 infrastructure.js。 # 多对多打包 个人觉得，每个页面要只有自己相关的模块，不能第二个页面还加载第一个页面中用不着的无关紧要的 js 文件。 所以理想打包情况是：使用`r.js`来合并压缩，使每个页面除下载`require.js`外只下载各自合并的大文件 page1.js 和 page2.js。 [example-multipage-shim](https://github.com/requirejs/example-multipage-shim) 基于 RequireJS 的多页面项目，这些页面共享一组带有shim配置的通用模块。 # 参考 [RequireJS - 使用 r.js 实现模块、项目的压缩合并（压缩js、css文件）](http://www.hangge.com/blog/cache/detail_1704.html) [优化器r.js](http://javascript.ruanyifeng.com/tool/requirejs.html#toc6) [requirejs-optimization](http://requirejs.org/docs/optimization.html) [RequireJS进阶-模块的优化及配置的详解](http://blog.csdn.net/ye_mingjia/article/details/42374975)